js面向對象小結（工廠模式，構造函數，原型方法，繼承）
本文轉至：TJYoung
最近過了一遍尼古拉斯澤卡斯的高級程序設計第三版（紅皮書）第六章：面向對象程序設計，現在把總結出來的東西和大家分享一下。
主要內容如下：
1.工廠模式
2.構造函數模式
3.原型模式
4.繼承
一、工廠模式
工廠模式中的函數中會創建一個對象，最後return這個對象，通過每次調用時傳入的參數不同來解決創建多個相似對象的問題。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 工廠模式
function creatPerson(name, age, job) {
var o = {};
o.name = name; o.age = age;
o.job = job;
o.sayName = function() {
console.log(this.name);
}
return o;
}
var tianjiao = creatPerson(‘tj‘,22,‘fe‘);
console.log(tianjiao)
|
二、構造函數模式
構造函數本身也是函數，只不過是一個創建對象的函數
| 1 2 3 4 5 6 7 8 9 10 |
// 構造函數
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
console.log(this.name)
};
}
var tj2 = new Person(‘tj2‘, 23)
console.log(tj2)
|
要創建person新實例，必須使用new操作符，調用構造函數會經歷以下四步：
1.創建一個新對象
2.將構造函數的作用域給了新對象（this指向新對象）
3.為新對象添加屬性
4.返回新對象
創建自己定義的構造函數意味著將來可以將它的實例標識為一種特定的類型，而工廠模式則都是object，無法區別。
構造函數和其他函數的唯一區別是調用方式不同，而任何函數只要用new操作符調用，那他就可以作為構造函數。
三、原型模式
每個函數都有一個prototype屬性，這個屬性是一個指針，指向一個對象，這個對象的用途是包含可以由特定類型的實例共享的屬性和方法。
使用原型對象的好處是可以讓所有對象實例共享他所包含的屬性和方法。不必在構造函數中定義對象實例的信息，而是可以將這些信息直接添加到原型對象中。
| 1 2 3 4 5 6 7 8 9 10 11 |
// 原型方法
function Person() {
}
Person.prototype.name = ‘tj3‘;
Person.prototype.age = 24;
Person.prototype.sayName = function(){
alert(this.name)
}
var tj3 = new Person();
console.log(tj3)
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
//更簡單的原型方法
function Person() {
}
Person.prototype = {
name:‘tj4‘,
age:25,
sayName : function() {
alert(this.name)
}
};
var tj4 = new Person();
console.log(tj4)
|
四、組合使用構造函數和原型模式
構造函數模式用於定義實例屬性，而原型模式定義方法和共享的屬性。這種混合模式還支持向構造函數傳遞參數。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 組合使用構造函數和原型模式
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
alert(this.name)
}
}
Person.prototype = {
sayJob : function() {
console.log(this.job);
}
}
var person1 = new Person(‘tj‘, 22 , ‘fe‘);
|
五、原型鏈繼承
原型鏈繼承的主要思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。
警告：通過原型鏈繼承是，不能使用對象字面量創建原型方法，這樣會重寫原型鏈！
| 1 2 3 4 5 6 7 8 9 10 |
// 原型鏈繼承
function SuperType() {
this.color = [‘red‘, ‘blue‘];
}
function SubType() {
}
SubType.prototype = new SuperType();// 繼承了SuperType
var instance1 = new SubType();
console.log(instance1);
|
六、借用構造函數繼承
其實就是用call和apply實現繼承
| 1 2 3 4 5 6 7 8 9 10 |
// 借用構造函數繼承
function wanda() {
this.money = [1,2,3]
}
function sicong() {
wanda.call(this);
}
var sc = new sicong();
sc.money.push(666)
console.log(sc)
|
七、組合繼承
將原型鏈和借用構造函數的技術組合起來一起用，好處是既能實現函數的復用，又能保證每個實例有自己的屬性。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 組合繼承
function SuperType(name) {
this.name = name;
this.color = [‘red‘, ‘blue‘];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age) {
SuperType.call(this, name);//繼承屬性
this.age = age;
}
SubType.prototype = new SuperType();//繼承方法
var instance1 = new SubType(‘tj‘, 22);
instance1.sayName();
|
最後還有寄生式繼承和寄生組合式繼承，自己工作中也沒有用過，這裏就不贅述了。
js面向對象小結（工廠模式，構造函數，原型方法，繼承）