javascript繼承機制實例詳解_javascript技巧

本文實例講述了javascript繼承機制。分享給大家供大家參考。具體分析如下：

初學javascript一般很難理解Javascript語言的繼承機制它沒有"子類"和"父類"的概念，也沒有"類"（class）和"實例"（instance）的區分，全靠一種很奇特的"原型鏈"（prototype chain）模式，來實現繼承。

我花了很多時間，學習這個部分，還做了很多筆記。但是都屬於強行記憶，無法從根本上理解。

一、如何建立一個類別

假設有給叫Person的類別如下：

複製程式碼 程式碼如下:

var Person = function(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function() {
    return this.name;
}

如上：Person代表地球上所有的人，每個人都有這兩個基本屬性：name和age；現在我們要實現一個學生類，然後我們知道了； 學生也是一個人，及學生也有name和age等屬性；現在的問題是怎麼能把這個關係搭起來？
先來看看純粹物件導向的語言是如何做到的(如：Actionscrpt3)

複製程式碼 程式碼如下:

class Students extend Person {}; //很簡單，一行程式碼；更確切的說是一個單字--extend

二、換成js如何能做到

在講解js的繼承機制實作之前，先了解一下js的原型鏈：

複製程式碼

複製程式碼

程式碼如下:

var person = new Person('Poised-flw', 21);

person.getName(); // "Poised-flw"

就上面的getName()方法來說，是如何執行的？首先會在Person這個函數裡面找是否有getName（）這個方法，發現沒有；然後就轉到 Person.prototype中尋找，發現有！然後就調用，若沒有呢？繼續按照相同的方法一直沿著prototype尋找下去，直到找到方法或 達到原型鏈的頂端為止！ 舉例來說，現在有一個叫做DOG的建構函數，表示狗物件的原型。

複製程式碼

程式碼如下:

　　function DOG(name){
　　　　this.name = name;

　　} 對這個建構函式使用new，就會產生一個狗物件的實例。

複製程式碼

複製程式碼

程式碼如下:

　　var dogA = new DOG('大毛');

　　var dogA = new DOG('大毛');
　　alert(dogA.name); // 大毛

注意建構函式中的this關鍵字，它就代表了新建立的實例物件。 三、new運算子的缺點 用建構函式產生實例對象，有一個缺點，那就是無法共享屬性和方法。

例如，在DOG物件的建構子中，設定一個實例物件的共有屬性species。

複製程式碼

程式碼如下:　　function DOG(name){ 　　　　this.name = name; 　　　　this.species = '犬科'; 　　}

然後，產生兩個實例物件：

複製程式碼

複製程式碼 程式碼如下:

　　var dogA = new DOG('大毛');
　　var dogA = new DOG('大毛');

　　var dogB = new DOG('二毛'); 這兩個物件的species屬性是獨立的，修改其中一個，不會影響到另一個。 複製程式碼 程式碼如下:　　dogA.species = '貓科'; 　　alert(dogB.species); // 顯示"犬科"，不受dogA的影響
每一個實例對象，都有自己的屬性和方法的副本。這不僅無法做到資料共享，也是極大的資源浪費。

所以：繼承的思想： 透過js特有的原型鏈來實現繼承機制！

四、基於原型鏈的繼承

1.直接繼承實作

複製程式碼 程式碼如下:

var Students = function(name, age, sid) {
    Person.call(this, name, age);
    this.sid = sid;
}
Students.prototype = new Person(); //把Person放到Students的原型鏈上實作繼承機制
Students.prototype.constructor = Students;
Students.prototype.getResults = function() {
    // 得到學生的成績
}

一定不要少了Students.prototype.constructor = Students這一行！ ，定義一個建構函式的時候，它預設的prototype是一個Object實例，然後prototype的constructor屬性會自動被設定成該函式本身 ！ ！ ！若手動將prototype設定為另一個物件的時候，則新物件自然不會具有原物件的contructor值，故需要重新設定其constructor屬性。如：

複製程式碼 程式碼如下:

var Test = function() {
    this.time = "now";
}
console.log(Test.prototype); // Object {} 一個空物件
console.log(Test.prototype.constructor); // function() {this.time = "now";},及函數本身
// 若手動改變Test的prototype屬性
Test.prototype = {
    someFunc: function() {
        console.log('hello world!');
    }
};
console.log(Test.prototype.constructor); // function Object() { [native code] }
// 然後你會發現完全指錯了，故手動更改prototype屬性的時候需要更改它的constructor指向;

經過上面的測試就知道為什麼要修改constructor值了。

2.封裝繼承的函數extend

複製程式碼 程式碼如下:

function extend(subClass, superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
}

其實這個函數的功能只是上面繼承過程的一個封裝，不同的有：
只繼承了superClass的prototype屬性，並沒有繼承superClass建構函式中的屬性;
這樣做的優點在於：減少去new一個建構函式的開銷！
當然隨之的問題是不能單一的通過這個函數就能讓subClass繼承superClass的所有性質
改進：

複製程式碼 程式碼如下:

// 在Students建構子中繼續加入一行程式碼：
Person.call(this, name, age);

五、小結

利用js的原型鏈原理，我們可以很容易的實作js的繼承機制，儘管不是非常的嚴格，但是我的目的達到了： 重複的程式碼盡量出現一次！

希望本文所述對大家的javascript程式設計有所幫助。