Object.create方法及其在繼承上的應用

方法介紹

Object.create 方法是JavaScript中用於創建對象的一個方法 。
Object.create接收兩個參數，第一個表示要繼承的對象，第二個參數表示也是一個對象，用於對新創建的對象進行初始化 。下面我們來看具體應用：

var Obj ={
 name:'mini',
 age:3,
 show:function () {
     console.log(this.name +" is " +this.age);
 }
}

上面的Obj對象是一個原始對象，用於被繼承 。

var MyObj = Object.create(Obj,{
like:{
 value:"fish",   // 初始化賦值
 writable:true,   // 是否是可改寫的
 configurable:true, // 是否能夠刪除，是否能夠被修改
 enumerable:true    //是否可以用for in 進行枚舉
},
hate:{
configurable:true,
get:function () { console.log(111);  return "mouse" },  // 獲取對象hate屬性時觸發的方法
set:function (value) {  // 設置對象hate屬性時觸發的方法 
    console.log(value,2222);
    return value;
}    
}
});

注意：Object.create方法第二個參數的屬性也是對象，對象中的所有屬性都是固定，不是自定義的 。具體每個屬性代表什麼意思，我們在上邊代碼的註釋中已有所標記。我們可以通過以下代碼加深對這個方法的理解：

console.log(MyObj.name);  // mini
console.log(MyObj.like);  // fish
MyObj.like = "peanut";    // 屬性修改賦值
console.log(MyObj.like);  // peanut
MyObj.hate;  // 111    觸發get方法
MyObj.hate = 'dog'; // dog,2222   觸發set方法

相信通過上邊的執行結果你已經能大概理解了Object.create方法的使用方法 。而且你可能也注意到了，這裏get和set 方法似乎還蘊含更大的潛力 。我們可以利用它們去實現數據的過濾和數據的綁定 。實現一些簡單的mvvm的效果。但這不是我們討論的重點 。

在繼承上的應用

在講解Object.create方法在構造函數上的應用之前我們先來回顧構造函數的繼承

var Animal=function () {}
Animal.prototype.show=function () {
    console.log("animal");
}
var  Dog = function () { }
var subClass = function () {}
subClass.prototype = Animal.prototype;
Dog.prototype = new subClass(); // 繼承Animal 

以上代碼是我們實現繼承最常用的一種方式，這種方式是藉助於一個代理函數，通過繼承構造函數的實例來繼承構造函數上的屬性 。

在瞭解了Object.create方法之後，或許你可以通過另一種方式實現繼承：

var A = function () { };
A.prototype.sayName=function () {
    console.log('a');
}

// B的實例繼承了A的屬性
var B = function () { };
B.prototype = Object.create(A.prototype);
var b = new B();
b.sayName();  // a

通過檢測，我們發現通過繼承原型對象然後賦值給自己的原型對象的這種方式也可以實現繼承 。但這種方式是不是我們想要的完美繼承呢 ？

// 重新改寫B的prototype
B.prototype= {
    sayName:function () {
        console.log("b");
    }
}

//  改寫後,B的實例屬性發生了變化
var b1 = new B();
b1.sayName();  //b

//  A的實例維持原來的屬性，沒有被改寫。達到了我們想要的繼承效果
var a1 = new A();
a1.sayName(); //a

通過上邊的案例，我們可以發現，Object.create這種方式實現了將A,B的原型完美分隔 。雙方不會互相影響，也就是說這是確實可行的繼承實現方式 。

不過，像Object.create這種黑科技方法一般都會存在兼容性問題 。所以我們還需要處理一下兼容問題，才能放心使用 。

if(typeof Object.create != "function")
 {
 Object.create=function (o) {
 function F() {}
 F.prototype=o;
 return new F();
 }
 }

通過上邊這個補丁代碼，似乎又回到了我們之前處理繼承的方式，如此一來，我們便可以在所有瀏覽器中 通過B.prototype =Object.create(A.prototype)的方式來實現繼承了 。