《Javascript 高階程式設計(第三版)》筆記0x9 OOP 建立物件
阿新 • • 發佈：2018-12-12
目錄
建立物件
工廠模式
函式 createPerson()能夠根據接受的引數來構建一個包含所有必要資訊的 Person 物件。可以無數次地呼叫這個函式，而每次它都會返回一個包含三個屬性一個方法的物件。工廠模式雖然解決了建立多個相似物件的問題，但卻沒有解決物件識別的問題（即怎樣知道一個物件的型別）。
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");建構函式模式
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");建立自定義的建構函式意味著將來可以將它的例項標識為一種特定的型別；而這正是建構函式模式勝過工廠模式的地方。
將建構函式當作函式
// 當作建構函式使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
// 作為普通函式呼叫
Person("Greg", 27, "Doctor"); // 新增到 window
window.sayName(); //"Greg"
// 在另一個物件的作用域中呼叫
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"建構函式的問題
每個方法都要在每個例項上重新建立一遍。
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName(){
alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");原型模式
建立的每個函式都有一個 prototype（原型）屬性，這個屬性是一個指標，指向一個物件，而這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"—— 來自例項
alert(person2.name); //"Nicholas"—— 來自原型使用 delete 操作符則可以完全刪除例項屬性，從而讓我們能夠重新訪問原型中的屬性。
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"—— 來自例項
alert(person2.name); //"Nicholas"—— 來自原型
delete person1.name;
alert(person1.name); //"Nicholas"—— 來自原型hasOwnProperty()方法
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg";
alert(person1.name); //"Greg"—— 來自例項
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); //"Nicholas"—— 來自原型
alert(person2.hasOwnProperty("name")); //false
delete person1.name;
alert(person1.name); //"Nicholas"—— 來自原型
alert(person1.hasOwnProperty("name")); //false
原型與 in 操作符
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" —— 來自例項
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" —— 來自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" —— 來自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true同時使用 hasOwnProperty()方法和 in 操作符，就可以確定該屬性到底是存在於物件中，還是存在於原型中
function hasPrototypeProperty(object, name){
return !object.hasOwnProperty(name) && (name in object);
}
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person = new Person();
alert(hasPrototypeProperty(person, "name")); //true
person.name = "Greg";
alert(hasPrototypeProperty(person, "name")); //falseObject.keys()
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"Object.getOwnPropertyNames()
var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys); //"constructor,name,age,job,sayName"更簡單的原型語法
function Person(){
}
Person.prototype = {
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
}
};原型的動態性
原型模式的重要性不僅體現在建立自定義型別方面，就連所有原生的引用型別，都是採用這種模式建立的。所有原生引用型別（Object、 Array、 String，等等）都在其建構函式的原型上定義了方法。
alert(typeof Array.prototype.sort); //"function"
alert(typeof String.prototype.substring); //"function"
String.prototype.startsWith = function (text) {
return this.indexOf(text) == 0;
};
var msg = "Hello world!";
alert(msg.startsWith("Hello")); //true原型物件的問題
function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true組合使用建構函式模式和原型模式
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true動態原型模式
通過在建構函式中初始化原型（僅在必要的情況下），又保持了同時使用建構函式和原型的優點。換句話說，可以通過檢查某個應該存在的方法是否有效，來決定是否需要初始化原型。
function Person(name, age, job){
//屬性
this.name = name;
this.age = age;
this.job = job;
//方法
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();寄生建構函式模式parasitic
function Person(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
function SpecialArray(){
//建立陣列
var values = new Array();
//新增值
values.push.apply(values, arguments);
//新增方法
values.toPipedString = function(){
return this.join("|");
};
//返回陣列
return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green" 穩妥建構函式模式durable objects
穩妥物件，指的是沒有公共屬性，而且其方法也不引用 this 的物件。穩妥物件最適合在一些安全的環境中（這些環境中會禁止使用 this 和 new），或者在防止資料被其他應用程式（如 Mashup程式）改動時使用。穩妥建構函式遵循與寄生建構函式類似的模式，但有兩點不同：一是新建立物件的例項方法不引用 this；二是不使用 new 操作符呼叫建構函式。
function Person(name, age, job){
//建立要返回的物件
var o = new Object();
//可以在這裡定義私有變數和函式
//新增方法
o.sayName = function(){
alert(name);
};
//返回物件
return o;
}