js高階_物件的建立模式
阿新 • • 發佈:2022-03-15
方式一:object建構函式模式
套路:先建立空object物件,再動態新增屬性/方法。
使用場景:起始時不確定物件內部的資料。
缺點:語句太多。
var person=new Object();
person.name='tom';
person.age=18;
person.setName=function(name){
this.name=name;
}
person.setName("ace");
console.log(person.name,person.age);
方式二:物件字面量模式
套路:使用{ }建立物件,同時指定屬性/方法。
使用場景:起始時物件內部資料是確定的。
缺點:如果建立多個物件,有重複程式碼。
var person={
name:"tom",
age:18,
setName:function(name){
this.name=name;
}
};
person.setName("張三");
console.log(person.name,person.age);
如果建立多個物件,有重複程式碼。比如:要建立一個person2又要寫重複的屬性方法
方式三:工廠模式
套路:通過工廠函式動態建立物件並返回。函式能返回一個物件,他就是工廠函式。
使用場景:需要建立多個物件。
問題:物件沒有一個具體的型別,都是object型別。
這樣建立多個物件就不用寫重複的程式碼
function createPerson(name,age){ var obj={ name:name, age:age, setName:function(name){ this.name=name; } } return obj; } //建立2個物件 var p1=createPerson("張三",18); var p2=createPerson("王五",19);
缺點:創建出來的物件沒有具體的型別,比如,再建立一個student的工廠
那麼,它們都是object型別
方式四:自定義建構函式模式
套路:自定義建構函式,通過new建立物件。
使用場景:需要建立多個型別確定的物件。
缺點:每個物件都有相同的資料,浪費記憶體。
//定義型別 function Person(name,age){ this.name=name; this.age=age; this.setName=function(name,age){ this.name=name; } } //建立例項 var p1=new Person("張三",18); //建立例項 var p2=new Person("李四",20); console.log(p1,p2)
這樣就能建立不同型別的物件
缺點就是他們中的方法浪費記憶體,因為每個物件都有一個,物件裡的方法都是單獨的存在的。
方式五:建構函式+原型的組合模式
套路:自定義建構函式,屬性在函式中初始化,方法新增到原型上。
使用場景:需要建立多個型別確定的物件。
//定義型別
function Person(name,age){//在建構函式中只初始化一般屬性
this.name=name;
this.age=age;
}
Person.prototype.setName=function(name,age){
this.name=name;//this是例項物件。
}
//建立例項
var p1=new Person("張三",18);
//建立例項
var p2=new Person("李四",20);
console.log(p1,p2)