Javascript繼承，再談

小龍女先生發表於2018-03-10
JavaScript繼承

     說到Javascript的繼承，相信只要是前端開發者都有所瞭解或應用，因為這是太基礎的知識了。但不知各位有沒有深入去理解其中的玄機與奧祕。今本人不才，但也想用自己的理解來說一說這其中的玄機和奧祕。

一、類繼承的發展吏

  • function實現的繼承

function的繼承是完全模仿了OOP的程式設計思想。實現的是類的繼承

  • object.create實現的繼承

用object.create來修改其原型

  • es6的繼承

增加了class來模擬OOP的繼承實現。上述兩種繼承實現，他都還是支援的。

二、各時期類繼承的實現

  • function繼承方式的實現（OOP）
function Animate(name){
    this.name = name;
}
Animate.prototype.getName = function(){
    return this.name;
}

function Dog(name){
    Animate.apply(this,arguments);
    this.leg = 4;
}
Dog.prototype = Inherit(Animate, Dog);
Dog.prototype.say = function(){
    return 'wang';
}

//function模式的繼承
function Inherit(parent, child){
    //建立一個無原型方法的類
    function f(){}
    f.prototype = parent.prototype; //將父物件的原型賦給臨時物件
    f.prototype.constructor = child; //將子類建構函式繫結到 臨時物件的 prototype原型上,保持子類建構函式與prototype上的一致。
    return new f(); //執行了f的建構函式，而沒有執行prototype.constructor指向的建構函式
} 

var dog = new Dog('dog');
console.log('getName:' + dog.getName()); //dog
console.log("say:" + dog.say()); //wang
console.log( 'dog instanceof Animate:' + (dog instanceof Animate)); //true
console.log( 'dog instanceof Animate: ' + (dog instanceof Dog)); //true

OOP方式的繼承實現網上有很多種，如：原型鏈，實現、組合、寄生組合繼承等。上述實現為寄生組合繼承在，算比較通用且完美的一種方案了。

  • object.create實現繼承
    這是一個升級版本的類式繼承，需要了解object.create方法。Object.create(proto, [propertiesObject])，其中proto是新建立物件的原型物件，而propertiesObject是可選的，要新增到新建立物件的可列舉屬性（即其自身定義的屬性，而不是原型連結上的屬性）。
    我們還需要了解的方法：Object.setPrototypeOf（內部原型的寫方法）；Object.getPrototypeOf（內部原型的讀方法）。內部原型：[[prototype]] == proto
    上述繼承程式碼的改造後
function Animate(name){
    this.name = name;
}
Animate.prototype.getName = function(){
    return this.name;
}

function Dog(name){
    Animate.apply(this,arguments);
    this.leg = 4;
}
Inherit(Animate, Dog); //呼叫點改造
Dog.prototype.say = function(){
    return 'wang';
}
//繼承實現方法改造
function Inherit(parent, child){
    child.prototype = Object.create(parent.prototype); //create實現parent上的原型複製
    child.prototype.constructor = child; //將建構函式指回子類
} 

var dog = new Dog('dog');
console.log('getName:' + dog.getName()); //dog
console.log("say:" + dog.say()); //wang
console.log( 'dog instanceof Animate:' + (dog instanceof Animate)); //true
console.log( 'dog instanceof Animate: ' + (dog instanceof Dog)); //true

2.1 對prototype的嘗試

上述示例中用了Object.create方法建立一個物件，然後再賦值給Prototype，而為什麼不用Object.setPrototypeOf方法直接改變其Prototype的值呢。原因摘錄來源於MDN:

由於現代 JavaScript 引擎優化屬性訪問所帶來的特性的關係，更改物件的 [[Prototype]]在各個瀏覽器和 JavaScript 引擎上都是一個很慢的操作。其在更改繼承的效能上的影響是微妙而又廣泛的，這不僅僅限於 obj.proto = ... 語句上的時間花費，而且可能會延伸到任何程式碼，那些可以訪問任何[[Prototype]]已被更改的物件的程式碼。如果你關心效能，你應該避免設定一個物件的 [[Prototype]]。相反，你應該使用 Object.create()來建立帶有你想要的[[Prototype]]的新物件。

物件繼承的實現：

var animate = {
    name: "name"
};
Object.setPrototypeOf(animate,{
    getName: function(){
        return this.name;
    }
});

var dog = {
    leg: 4
};
Object.setPrototypeOf(dog,{
    say: function(){
        return 'wang';
    }
}); 
Object.setPrototypeOf(Object.getPrototypeOf(dog),Object.getPrototypeOf(animate));

console.log('getName:' + dog.getName()); //dog
console.log("say:" + dog.say()); //wang

三、ES6類繼承的實現

es6對類繼承提供了原生的支援，這讓Javascript更像後端語言了，簡單使用如下：

class Animate{
    constructor(name){
        this.name = name
    }
    getName(){
        return this.name;
    }
}

class Dog extends Animate{
    constructor(name){
        super(name);
        this.leg = 4;
    }
    say(){
        return "wang";
    }
}
var dog = new Dog('dog');
console.log('getName:' + dog.getName()); //dog
console.log("say:" + dog.say()); //wang
console.log( 'dog instanceof Animate:' + (dog instanceof Animate)); //true
console.log( 'dog instanceof Animate: ' + (dog instanceof Dog)); //true

四、總結及疑問

     經過本文梳理，你是否發現Javascript的類繼承實現越來越簡單，更接近於Java，.net這類靜態編譯語言了，或許這就是所謂的萬物歸一的哲學道理。但在此還是存在一個極大的疑問：Object.setPrototypeOf方法在MDN不建議使用，說是更改內部的[[prototype]]屬性存在效能問題 和 影響。不知道其影響為何，望大神們指定。

相關文章