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]]屬性存在性能問題 和 影響。不知道其影響為何，望大神們指定。