JavaScript之建立物件
阿新 • • 發佈:2018-12-12
建立物件的方式:
- 工廠模式
- 建構函式模式
- 原型模式
- 組合使用建構函式模式和原型模式
- 動態原型模式
- 繼承建構函式模式
- 穩妥建構函式模式
1. 工廠模式
建立一個函式,用函式來封裝以特定介面建立物件的細節。
function createPerson(name, age, job) { let o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() { console.log(this.name); }; return o; } let person1 = createPerson("wang", 17, "software engineer"); let person2 = createPerson("dch", 29, "doctor"); console.log(person1); console.log(person2);
工廠模式可以解決建立多個相似物件的問題,但沒有辦法知道一個物件的型別。
2. 建構函式模式
自定義建構函式如下:
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { console.log(name); }; } let person3 =new Person("wang", 17, "software engineer"); let person4 =new Person("dch", 29, "doctor"); person3.sayName(); console.log(person4);
區別
- 沒有顯示的建立物件
- 沒有直接將屬性和方法賦給this物件
- 沒有return語句
- 建構函式開頭大寫
new操作符呼叫建構函式實際上會經歷以下四個步驟:
- 建立一個新物件
- 將建構函式的作用域賦給新物件(因此this就指向了這個新物件)
- 執行建構函式中的程式碼(為這個新物件新增屬性)
- 返回新物件
person3和person4分別儲存著Person的一個不同的例項。這兩個物件都有一個constructor屬性,該屬性指向Person。
console.log(person3.constructor === Person); // true console.log(person4.constructor === Person); // true
console.log(person3.constructor === Object); // false
console.log(person4.constructor === Object); // false
constructor最初是用來標識物件型別的,但是檢測物件型別還是instanceof操作符更可靠一些。 在這個例子中建立的物件既是Person例項又是Object例項
console.log(person3 instanceof Person); // true
console.log(person4 instanceof Person); // true
console.log(person3 instanceof Object); // true
console.log(person4 instanceof Object); // true
缺點: 每個Person例項都包含一個不同的名sayName的function例項
console.log(person3.sayName == person4.sayName); // false
3. 原型模式
每個函式都有一個prototype屬性,這個屬性是一個指標,指向一個物件,而這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。好處是可以讓所有的物件例項共享它所包含的屬性和方法。
function Person(name) {
this.name = name || "Oreo"
}
Person.prototype.age = 18;
Person.prototype.job = 'software engineer';
Person.prototype.sayName = function() {
console.log(this.name);
}
let person1 = new Person("wang");
person1.sayName(); // wang
let person2 = new Person();
person2.sayName(); // Oreo
console.log(person1.sayName === person2.sayName); // true