DIV CSS 佈局教程網

本文為大家分享了js創建對象的多種方法，分享個方法的優劣，具體內容如下

第一種創建對象的方式：

創建JSON對象
推薦使用的場合： 作為函數的參數，臨時只用一次的場景。比如設置函數原型對象。

 var object = {
  name: "Eric",
  age: 24,
  sayHi: function(){
   console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
  }
 };

第二種創建對象的方式：

創建一個Object對象

 var object = new Object();
 object.name = "Eric";
 object.age = 24;
 object.sayHi = function(){....};

以上兩種創建對象方式的缺點:不能作為對象創建的模板，也就是不能用new進行構造新對象。

第三種創建對象的方式：

 function Person() {
  this.name = "Eric";
  this.age = 24;
  this.sayHi = function(){
   console.log(this.name);
  }
 }

 var object1 = new Person();
 var object2 = new Person();

這種創建對象方式解決了前兩種方式的缺點，可以作為對象創建的模板，可以一直復用創建出多個對象。

new運算符的作用：

執行構造函數（new後面的那個函數），在構造函數內部創建一個空對象
把上一部創建的空對象跟構造函數的原型對象進行關聯
然後把this指向當前空對象
在構造函數執行結束後，如果沒有return，把空對象返回給object

new運算符原理

第三種方式有個缺點： 對象的內部的函數會在每個對象中都存一份如果創建的對象非常多的話，那麼非常浪費內存。函數的行為是所有對象可以共有，不需要每個對象都保存一份。所以，可以把函數放到原型中進行聲明，那麼所有對象都有了公共的函數，而且內存中只保留一份。所有的屬性寫到對象的內部

第三種方式beta1：

 function Person() {
  this.name = 'Eric';
  this.age = 24;
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person();
 var object2 = new Person();

繼續升級 beta2 ：

 function Person(name,age) {
  this.name = name || "";
  this.age = age || "";
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person(name1,age1);
 var object2 = new Person(name2,age2);

問題：1、調用者如果傳遞參數的順序發生變化，那麼廢了
問題：2、參數增減都會導致函數聲明變化，調用的地方也可能發生變化。

如何解決：繼續升級 beta3 :

 function Person(option) { //用一個對象把所有參數覆蓋
  this.name = option.name || "";
  this.age = option.age || "";
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person({
   name: "Eric",
   age: 24
  });
 var object2 = new Person({
   name: "XXX",
   age: xx
  });

繼續優化，把初始化的代碼 放到init函數中

繼續升級 beta4 :

 function Person(option) {
  this._init(option);
 }
 Person.prototype = {
  _init: function (option){
   this.name = option.name;
   this.age = option.age;
  },
  sayHi: function(){
   console.log("HI");
  }
 };

 var object1 = new Person({
   name: "Eric";
   age: 24
  });
 object1.sayHi();

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。