C4:繼承

Karrdy 發(fā)布于2019-08-26 11:41 / 1395人閱讀

摘要：如何繼承如上，只需簡單將函數(shù)的指向一個對象，就完成了對這個的對象的繼承。這一點和直接使用函數(shù)的繼承方式很像。中出現(xiàn)了類的語法糖，我們寫繼承就更簡便了。

原型

Each object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain. ---MDN

當(dāng)我們在一個obj對象上查找是否具有某個屬性的時候，這個過程是這樣的：
1.現(xiàn)在obj 對象中查找是否有該屬性，如果有，查找終止。（也就是說如果obj對象上面和它的原型上又一個同名屬性，那么對象上面的屬性優(yōu)先。）
2.如果沒有，則查看當(dāng)前obj是否具有__proto__。這個__proto__就是obj原型的引用。如果obj對象沒有原型，那么查找終止。
3.如果obj有原型，就查找obj的原型上是否有這個屬性。如果有，查找終止。返回這個屬性。
4.如果obj的原型上沒有這個屬性，則查看obj的原型是否有原型。如果沒有，則查找終止。
5.如果obj的原型上上面有它自己的原型，那么繼續(xù)在obj的原型的原型上繼續(xù)查找。

幾乎每一個js對象都有原型，但是有個例外。

let a = Obeject.crate(null)
let b = {}

當(dāng)Object.create()傳入null的時候，返回一個真正的空對象a。這個對象不同于b,a對象上什么都沒有，但是b對象上還有一個__proto__指向Object.prototype。

__proto__和prototype

function Man(name){
    this.name = name
}
Man.prototype.setName = function(name){
    this.name = name
}
let a = new Man("lee")
console.log(a)

輸出如下：

實例化的對象a中有兩個屬性一個是name,還有一個就是它的原型__proto__。而這個__proto__是指向a 這個對象的構(gòu)造函數(shù) (a.__proto__.constructor 就是a這個對象的構(gòu)造函數(shù)，也就是Man這個函數(shù)。) 的原型的。并且，修改對象的__proto__是不推薦的做法，對于性能的影響可能有時候我們不能不重視。而在Man的這個函數(shù)的prototype上面我們定義了一個setName的屬性。
所以按照上面的查找流程，我們在a對象的原型上找到了setName屬性。

如何繼承

let animal = {
    weight:20,
    setWeight:function(weight){
        this.weight = weight
    }
}

function Cat(name){
    this.name = name
}

cat.prototype = animal

如上，只需簡單將函數(shù)的prototype指向一個對象，就完成了對這個的對象的繼承。現(xiàn)在所有通過new Cat()創(chuàng)建的對象都共享這個animal對象里面的屬性。
這一點和直接使用Object.create()函數(shù)的繼承方式很像。

另外一種繼承方式，也是比較受開發(fā)者認(rèn)可，類似于下面這種：

function Animal(weight){
    this.weight = weight
}
Animal.prototype.setWeight = function(weight){
    this.weight = weight
}
function Cat(name,weight){
    Animal.call(this,weight)
    this.name = name
}
//同時，我們別忘了，將Cat的prototype設(shè)為Animal的prototype，這樣就完成了對Animal的繼承。
Cat.prototype = Object.create(Animal.prototype)
Cat.prototype.constructor = Cat

ES6 中出現(xiàn)了類的語法糖，我們寫繼承就更簡便了。

最后附上一張原型鏈的解析圖：