JavaScript面向對象的程序設計——「對象繼承」的注意要點

繼承

繼承分爲接口繼承和實現繼承；接口繼承只繼承方法簽名，實現繼承則繼承實際的方法；因爲函數沒有簽名，因此ECMAScript 中沒有接口繼承，只能依靠原型鏈來實現實現繼承。

原型鏈

基本思想是利用原型鏈讓一個引用類型繼承另外一個引用類型的屬性和方法：

如：Person2.prototype 是Person1.prototype 的繼承，那麼（「--->」 意爲「指向」）：

Person2.prototype - [[Prototype]] ---> Person1.prototype
Person2 - prototype ---> Person2
person2 - [[Prototype]] ---> Person2.prototype
//Person2.prototype 無 constructor

Person1.prototype - cunstructor ---> Person1
Person1 - prototype ---> Person1.prototype
person1 - [[Prototype]] ---> Person1.prototype

具體方法

具體如何繼承呢：

function People(){}; //原始的
People.prototype.sayWorld = function(){
    return "World people"
};

function Person(){}; //繼承的
Person.prototype = new People(); //這裏應該注意要先繼承
Person.prototype.sayNation = function(){ //而後再修改prototype
    return "Chinese people"
};

var person = new Person(); //實例
console.log(person.sayNation()); //Chinese people
console.log(person.sayWorld()); //World people

必定要注意！！！給原型添加方法的代碼必定要放在替換原型的語句以後！！！

再舉個例子：

function WorldPeople(){};
WorldPeople.prototype = {
    constructor: WorldPeople,
    color: "",
    say: function(){
        return "People in the Earth."
    },
    friends: ["Oliver","Alice","Troy"]
};

function Chinese(){};
Chinese.prototype = new WorldPeople();
Chinese.prototype.color = "yellow";
Chinese.prototype.say = function(){
    return "i am Chinese."
};

var person1 = new Chinese();

console.log(person1.friends.toString());
console.log(person1.color);
console.log(person1.say());    
/*
[Log] Oliver,Alice,Troy (repetition.html, line 163)
[Log] yellow (repetition.html, line 164)
[Log] i am Chinese. (repetition.html, line 165)
*/

肯定原型和實例的關係

用instanceof 操做符和insPrototypeOf() 方法便可，如：

console.log(person1 instanceof Object); //true;
console.log(person1 instanceof WorldPeople); //true;
console.log(person1 instanceof Chinese); //true;

console.log(Object.prototype.isPrototypeOf(person1)); //true
console.log(WorldPeople.prototype.isPrototypeOf(person1)); //true
console.log(Chinese.prototype.isPrototypeOf(person1)); //true

謹慎定義方法

必定要記得，給原型添加方法的代碼必定要放在替換原型的語句以後！

還要記得，經過原型鏈實現繼承時，不能使用字面兩建立原型方法，由於這樣會重寫原型鏈！

原型鏈的問題

1. 包含引用類型值的原型，該屬性會被全部實例共享；

2. 在建立子類型的實例時，不能向超類型的構造函數中傳遞參數；

對於第一種問題：

function People(){}
People.prototype.friends = ["Alice","Oliver"];

function Person(){};
Person.prototype = new People();

var person1 = new Person();
var person2 = new People();

person1.friends.push("Troy");

console.log(person1.friends);
console.log(person2.friends); //二者徹底相同

有什麼解決辦法呢：

借用構造函數（不推薦使用）

被稱爲「借用構造函數」的技術或僞造對象或經典繼承。如：

function People(){
    this.friends = ["Alice","Oliver"];
}

function Person(){
    People.call(this); //繼承了People
}

//這裏就沒必要寫Person.prototype = new People()

var person1 = new Person();
var person2 = new Person();

person1.friends.push("Troy");

console.log(person1.friends); //["Alice", "Oliver", "Troy"]
console.log(person2.friends); //["Alice", "Oliver"]

該方法的主要優點就是能夠在子類型構造函數中向超類型構造函數傳遞參數。

又如：

function SuperType(name){
    this.name = name;
}

function SubType(){
    SuperType.call(this,"Oliver"); //這裏不單單繼承了SuperType，並且還向它傳遞了參數
    this.age = 18;
}

var person = new SubType();
console.log(person.name); //Oliver
console.log(person.age); //18

因爲函數不可複用等問題，不推薦使用。

組合繼承（最經常使用的模式）

也叫作僞經典繼承。如：

//不通用的屬性
function SuperType(name){
    this.name = name;
    this.colors = ["Blue","Red","Black"];
}
//通用的方法
SuperType.prototype.sayName = function(){
    return (this.name);
};

//繼承屬性並新增屬性
function SubType(name,age){
    SuperType.call(this,name);//繼承屬性
    this.age = age;//新增屬性
}
//繼承方法並新增方法
SubType.prototype = new SuperType();//繼承方法
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){//新增方法
    return (this.age);
};

var person1 = new SubType("Oliver",18);
var person2 = new SubType("Troy",24);
person1.colors.pop();
console.log(person1.colors);
console.log(person2.colors);
console.log(person1.sayName() + person1.sayAge());
console.log(person2.sayName() + person2.sayAge());

/*
[Log] ["Blue", "Red"] (repetition.html, line 255)
[Log] ["Blue", "Red", "Black"] (repetition.html, line 256)
[Log] Oliver18 (repetition.html, line 257)
[Log] Troy24 (repetition.html, line 258)
*/

最經常使用的方法。再舉個例子：

function People(name,age){
    this.name = name;
    this.age = age;
    this.friends = [];
}
People.prototype.friendsList = function(){
    document.write(this.friends.toString());
};

function Person(name,age,color,job){
    People.call(this,name,age);
    this.color = color;
    this.job = job;
}
Person.prototype = new People();
Person.prototype.constructor = Person;
Person.prototype.sayInfo = function(){
    document.write(this.name + this.age + this.color + this.job);
};

var person1 = new Person("Oliver",18,"yellow","Hero");
person1.friends.push("Alice");
person1.sayInfo(); //Oliver18yellowHero
person1.friendsList(); //Alice

var person2 = new Person("Troy",24,"White","Fighter");
person2.friends.push("Oliver","Islan");
person2.sayInfo(); //Troy24WhiteFighter
person2.friendsList(); //Oliver,Islan

平時用這個方法已經足夠。又如：

function Cars(name){
    this.name = name;
    this.hasColor = ["blue","black"];
}
Cars.prototype.sayName = function(){
    console.log(this.name);
};

function Car(name,color){
    Cars.call(this,name);
    this.color = color;
}
Car.prototype = new Cars();
Car.prototype.constructor = Car;
Car.prototype.sayColor = function(){
    console.log(this.color);
};
var benz = new Car("Benz-C200","Black");
benz.hasColor.push("red");
benz.sayName();
benz.sayColor();
console.log(benz.hasColor);
var benz2 = new Car("Benz-C180","White");
benz2.hasColor.push("white");
benz2.sayName();
benz2.sayColor();
console.log(benz2.hasColor);    
/*
[Log] Benz-C200 (repetition.html, line 309)
[Log] Black (repetition.html, line 319)
[Log] ["blue", "black", "red"] (repetition.html, line 325)
[Log] Benz-C180 (repetition.html, line 309)
[Log] White (repetition.html, line 319)
[Log] ["blue", "black", "white"] (repetition.html, line 330)
*/

結合建立對象和繼承對象，來一個比較吧：

重要！

重要！

重要！

//組合使用構造函數模式和原型模式-建立對象
function Person(name,age){
    this.name = name;
    this.age = age;
    this.friendsList = ["Alice","Islan"];
}
Person.prototype.friends = function(){
    console.log(this.friendsList.toString());
};

var person1 = new Person("Oliver",18);
var person2 = new Person("Troy",24);
person1.friendsList.pop();
person1.friends(); //Alice
person2.friends(); //Alice,Islan

//組合繼承-繼承對象
function Person(name,age){
    this.name = name;
    this.age = age;
    this.friendsList = ["Alice","Islan"];
}
Person.prototype.friends = function(){
    console.log(this.friendsList.toString());
};
function Info(name,age,job){
    Person.call(this,name,age);
    this.job = job;
}
Info.prototype = new Person();
Info.prototype.constructor = Info;
Info.prototype.sayJob = function(){
    console.log(this.job);
};

var person1 = new Info("Oliver",18,"Master");
var person2 = new Info("Troy",24,"Hero");
person1.friendsList.pop();
person1.friends(); //Alice
person2.friends(); //Alice,Islan
person1.sayJob(); //Master
person2.sayJob(); //Hero

對比一下，就能夠看出，繼承屬性主要應用到call 操做符給超類型構造函數傳遞參數；而繼承方法則要注意不可以使用字面量語法。

以上

原型式繼承

一般只是想讓一個對象與另外一個對象保持相似的狀況下，原型式繼承是徹底能夠勝任的。共享相應的引用類型的值的屬性。

語法是：

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

如：

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var person = {
    name: "Oliver",
    friends: ["Alice","Islan"]
};

var anotherPerson = object(person);
anotherPerson.name = "Troy";
anotherPerson.friends.push("Ellen");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Ellen";
yetAnotherPerson.friends.push("Troy","Oliver");

console.log(person.friends);

又如：

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var person = {
    name: "Oliver",
    friends: ["Alice","Islan"]
};

var anotherPerson = object(person);
anotherPerson.name = "Troy";
anotherPerson.friends.push("Oliver");

console.log(person.friends);["Alice", "Islan", "Oliver"]

這種方法比較簡單，只是想讓person 和anotherPerson 保持相似並共享引用類型的值的屬性。

寄生式繼承（不能作到函數複用而致使效率下降）

建立一個封裝繼承過程的函數而已：

function createAnotherObj(obj){
    var clone = obj;
    clone.sayHi = function(){
        console.log("hi");
    };
    return clone;
}

var person = {
    name: "Troy",
    friends: ["Alice"]
};

var anotherObj = createAnotherObj(person);
anotherObj.sayHi();
anotherObj.name = "Oliver";
anotherObj.friends.push("Ellen");
console.log(person.friends);
console.log(anotherObj.friends); //兩個徹底同樣

寄生組合式繼承（最理想的繼承範式）

基本邏輯就是首先建立一個超類型原型的一個副本；而後爲副本添加constructor 屬性；最後把副本賦值給子類型的原型。如：

function inheritPrototype(SubType,SuperType){
    var prototype = Object(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

function SuperType(name){
    this.name = name;
    this.color = ["red","yellow"];
}
SuperType.prototype.list = function(){
    console.log(this.color.toString());
};

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayName = function(){
    console.log(this.name);
};

var type1 = new SubType("Oliver",18);
var type2 = new SubType("Troy",24)
type2.color.pop();
type1.list(); //red,yellow
type2.list(); //red

應該經常使用這種模式，比較完善。