js基礎物件及其建立模式

物件構建方法：object建構函式和物件字面量

//object
建構函式建立
const obj = new
object();
obj.name = 'anna';
obj.age = 24;
//物件字面量建立
const obj =

物件屬性分為：資料屬性、訪問器屬性

資料屬性描述符包含：configurable（屬性是否可delete、修改為訪問器屬性）、enumerable（是否可用for-in迴圈返回該屬性）、writable（是否可寫）、value

訪問器屬性包含： configurable（屬性是否可delete刪除該屬性、修改為資料屬性）、enumerable、get（讀取屬性呼叫的函式，預設undifined）、set（寫入屬性呼叫的函式，預設undifined）。訪問器屬性可通過object.difineproperty(obj, attrname, descripter)或object.difineproperties(obj, attrobj)

//
資料屬性
object.difineproperty(person, 'name', )
console.log(person.name) 
//anna
person.name = 'lily'； //
在非嚴格模式下，會忽略該操作；在嚴格模式下會報錯
//訪問器屬性
object.difineproperty(person, 'newage', ,
set: 
function
(newval) 
}})person.newage = 40;
console.log(person.newage) 
//40,如果沒有set屬性，為唯讀，返回24

工廠模式

用以解決object建構函式和物件字面量建立包含同樣屬性、方法的物件時產生的大量重複**，缺點是無法區分物件。

function
createperson(name, age) 
returno;}
const person1 = createperson('anna', 23);
const person2 = createperson('jophy', 24);
console.log(person1.name);
console.log(person2.name)

建構函式模式

用以解決工廠模式無法區分建立物件的問題

function
person(name, age) 
}const person1 = new person('anna', 23);
const person2 = new person('jophy', 24);
console.log(person1.name);
console.log(person2.name)

建構函式模式不足是同名稱的函式實際是不同的函式例項，若函式較少可通過函式定義轉移的方式解決該問題，但若函式較多都掛到全域性物件上，則都掛到全域性物件上了，從而使自定義的引用型別失去了封裝性。

//
通過建構函式模式建立的同一名稱的函式實際是不同函式例項
console.log(person1.sayname == person2.sayname); //
false
//函式定義轉移，sayname掛載到全域性物件window上
function
person(name, age) 
function
sayname() 
const person1 = new person('anna', 23);
const person2 = new person('jophy', 27);

原型模式

每個函式都包含prototype（原型）屬性，這個屬性是乙個指標，指向乙個物件，而這個物件的用途是包含可以由特定型別的所有例項共享和方法。字面意思即prototype就是通過呼叫建構函式而建立的那個物件例項的原型物件。使用原型物件的好處是可以讓所有物件例項共享它所包含的屬性和方法。

function person() 
person.prototype.name = 'anna';
person.prototype.age = 23;
person.prototype.sayname = function
() const person1 = new person(); //
prototype是person1/person2的原型物件
const person2 = new
person();
person1.sayname() 
//anna
person2.sayname() //
anna
console.log(person1.sayname === person2.sayname) //
true，兩個物件例項的sayname方法是同乙個函式例項

判斷乙個屬性在物件例項中還是原型物件中

function
propertyinprototype(obj, propertyname)

for-in只會列出可列舉的屬性，由於ie8中，如果原型物件上某屬性不可列舉，即使物件例項重寫了該屬性，該屬性依然顯示不出來，所以推薦用object.keys()方法，該方法會返回物件上所有可列舉的例項屬性。

function
person() 
person.prototype.name = 'anna';
person.prototype.age = 23;
person.prototype.sayname = function
() const keys =object.keys(person.prototype);
console.log(keys); 
//["name", "age", "sayname"]
const person1 = new
person();
console.log(keys1); //
const person2 = new
person();
const keys1 =object.keys(person1);
person2.gender = 'female';
person2.job = 'programer';
const keys2 =object.keys(person2);
console.log(keys2); 
//["gender", "job"]

object.getownpropertynames(obj) 獲取物件例項所有屬性，無論是否可列舉

組合使用建構函式模式+原型模式

鑑於原型模式的缺點有：

1.引用型別值的修改——某個物件例項修改了該引用型別的值，其他物件例項對應的值也會跟著修改；

2.物件例項無法傳參。

這兩個不足結合建構函式模式可完美解決，該組合方式也是使用最廣泛的。

function
person(name, age) 
person.prototype =
}const person1 = new person('anna', 23);
const person2 = new person('jophy', 27);
person1.friends.push('lily');
console.log(person1.friends); 
//["jack", "tony", "lily"]
console.log(person2.friends); //
["jack", "tony"]

js基礎物件及其建立模式

JS物件建立模式

「物件建立」模式

物件建立模式

js基礎 物件及其建立模式

JS物件建立模式

「物件建立」模式

物件建立模式

相關推薦

js基礎物件及其建立模式