本文為大家分享了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(){....};
建構新物件。
第三種創建物件的方式:
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);
了
問題: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函數中