1. 程式人生 > 其它 >js高階_物件的建立模式

js高階_物件的建立模式

方式一: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)