js 繼承和原型鏈
js 是一個讓習(xí)慣于使用面向類（class 例如java or c++）的開發(fā)者困惑的語言，正如它是充滿活力的并且沒有提供類（calss）（class 這個關(guān)鍵字被介紹是在 es2015,同時作為一個語法糖，js仍然保持基于原型的方式）
當(dāng)涉及到繼承，js 僅僅有一個結(jié)構(gòu)objects, 每個object 有一個私有的屬性（關(guān)系到prototype）支持一個鏈的其他對象調(diào)用它的原型（prototype）.這個原型對象也有它自己的原型（prototype）并且一直到原型對象的prototype為null. 按照定義，null沒有原型（prototype）,并且在它的原型鏈中作為最后的鏈。
在js中所有objects是位于它頂級原型鏈中的一個實例object.
雖然，原型繼承經(jīng)常被視作 JavaScript 的一個弱點，但事實上，原型繼承模型比經(jīng)典的繼承模型更強(qiáng)大。舉例來說，在原型繼承模型的基礎(chǔ)之上建立一個經(jīng)典的繼承模型是相當(dāng)容易的
原型鏈的繼承
繼承屬性
js 的objects是動態(tài)的包屬性，js的objects對于一個原型對象有一個鏈，當(dāng)我們試圖找尋一個對象的屬性，這個屬性將不僅在該object中尋找，同時在該對象的原型（prototype）中查找，直到在該原型鏈中找到該匹配的屬性，否則直到該原型鏈的結(jié)束null時結(jié)束。
創(chuàng)建一個對象fo,該對象有自己的屬性a和b
function fo(){
this.a=1;
this.b=2;
}
fo.prototype={b:3,c:4}
var fun=new fo();
console.log(fun.a)// 1
console.log(fun.b)// 2
console.log(fun.c)// 4
console.log(fun.d)// undefined
繼承方法
js在形式上沒有基于類（class）語言定義他們的方法，在js中任何方法（function）都可以在形式上增加為它的屬性，一個繼承的方法扮演作為其他屬性，包括隱式屬性和顯示屬性
當(dāng)一個繼承的function被執(zhí)行，則this指向的是繼承的object,不是原型對象object,這個function屬于自己的屬性
var o={
a:2,
m:function(){
return this.a+1
}
}
console.log(o.m()); // 3
var p=Object.create(o);
p.a=4
console.log(p.m()); // 5
使用不同的方式創(chuàng)建對象和生成原型鏈
使用普通語法創(chuàng)建對象
var o={a:1};
//o這個對象繼承了Object.prototype上的所有屬性
//所以可以這樣用o.hasOwnProperty("a")
//hasOwnProperty 是Object.prototype的自身屬性。
//object.prototype的原型為null.
//原型鏈如下：
// o ---> Object.prototype ---> null
var arr=["first","second"];
//數(shù)組都繼承與 Array.prototype
//(indexOf,forEach等方法都是從它繼承而來)
//原型鏈如下
// a--->Array.prototype ---> Object.prototype ---> null
function f(){
return 2;
}
//函數(shù)都繼承于 Function.prototype
//(call,bind 等方法都是從它繼承而來)
// f--->Function.prototype--->Object.prototype --->null
使用構(gòu)造器創(chuàng)建對象
在js中，構(gòu)造器就是一個普通的函數(shù)，當(dāng)使用new 操作符來作用這個函數(shù)時，它就被稱為構(gòu)造方法（構(gòu)造器）。
function Draw(){
this.vs = [];
this.es = [];
}
Draw.prototype = {
addv: function(v){
this.vs.push(v)
}
}
var D=new Draw();
// D是生成的對象，他的自身屬性有vs和es
// 在D被實例化時，D.prototype指向了Draw.prototype
使用Object.create 創(chuàng)建對象
在ECMAScript 5 中引入了一個新方法： Object.create().可以調(diào)用這個方法來創(chuàng)建一個新對象。新對象的原型就是調(diào)用create方法時傳入的第一個參數(shù)：
var a = {a:1};
// a ---> Object.prototype ---> null
var b = Object.create(a);
// b ---> a---> Object.prototype --->null
console.log(b.a) //繼承而來
var c = Object.create(b);
// c --->b ---> a---> Object.prototype ---> null
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); //undefined ,因為d沒有繼承Object.prototype
使用class 關(guān)鍵字
在ECMAScript6 引入了一套新的關(guān)鍵字用來實現(xiàn)class. 使用基于類語言的開發(fā)人員會對這些結(jié)構(gòu)感到熟悉。但是他們是不一樣的。javascript仍然是基于原型的。這些新的關(guān)鍵字包括class,constructor,static,extends,和super
"use strict";
class Polygon {
constructor(height,width){
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength){
super(sideLength,sideLength);
}
get area (){
return this.height * this.width;
}
set sideLength (newLength){
this.height = newLength;
this.width = newLength;
}
}
var square = new Square(2);
性能
在原型鏈上查找屬性比較耗時，對性能有副作用，這在性能要求苛刻的情況下很重要。另外，試圖訪問不存在的屬性時會遍歷整個原型鏈。
遍歷對象的屬性時，原型鏈上的每個可枚舉屬性都會被枚舉出來。
檢測對象的屬性是定義在自身上還是原型鏈上，有必要使用hasOwnProperty方法，所有繼承自O(shè)bject.prototype的對象都包含這個方法。
hasOwnProperty 是js中唯一一個只涉及對象自身屬性而不會遍歷原型鏈的方法。
注意：僅僅通過判斷值undefined還不足以檢測一個屬性是否存在，一個屬性可能存在而其值恰好為undefined
不好的實踐：擴(kuò)展原生對象的原型
一個經(jīng)常被用到的錯誤實踐是擴(kuò)展Object.prototype或者其它內(nèi)置的原型。
該技術(shù)被稱為monkey patching, 它破壞了原型鏈的密封性。盡管，一些流行的框架（如Prototype.js) 在使用該技術(shù)，但是并沒有足夠好的理由要用其它非標(biāo)準(zhǔn)的方法將內(nèi)置的類型系統(tǒng)搞亂。
我們?nèi)U(kuò)展內(nèi)置對象原型的唯一理由是引入新的js引擎的某些新特性，比如Array.forEach。
//B將繼承自A
function A(a){
this.varA = a;
}
//以上函數(shù)A的定義中，既然A.prototype.varA總會被this.varA遮蔽，
//那么將varA加入到原型（prototype）中的目的是什么
A.prototype = {
varA : null,
doSomething:function(){
//...
}
}
/*
如果varA并不是在每個實例中都被初始化，那這樣做將是有效果的。
*/
B.prototype = Object.create(A.prototype,{
varB : {
value:null,
enumerable: true,
configurable : true,
writable: true
},
doSomething : {
value : function (){ //override
A.prototype.doSomething.apply(this.arguments);
},
enumerable: true,
configurable: true,
writable: true
}
})
B.prototype.constructor = B;
var b = new B();
b.doSomething();
最重要的是
類型被定義在。prototype中，然而用Object.create()來繼承
prototype 和 Object.getPrototypeOf
對于從java或c++轉(zhuǎn)來的開發(fā)人員說javascript會有點讓人困惑，因為它全部是動態(tài)的，都是運行時，而且不存在類（calsses）.所有的都是實例（對象）。即使我們模擬出的“類（classes)",也只是一個函數(shù)對象。
你可能注意到了，我們的函數(shù)A有一個特殊的屬性是(prototype)叫原型。這個特殊的屬性與js的new 運算符一起工作。對原型對象的引用會復(fù)制到新實例內(nèi)部的prototype 屬性。例如，當(dāng)你這樣： var a1=new A(), js就會設(shè)置a1.prototype=A.prototype (在內(nèi)存中創(chuàng)建對象后，并在運行this綁定的函數(shù) A()之前)。然后在你訪問實例屬性時，javascript首先檢查他們是否直接存在于該對象中（即是否是該對象的自身屬性），如果不是，它會在 prototype中查找，也就是說，你在原型定義的元素將被所有實例共享，甚至可以在稍后對原型進(jìn)行修改，這種變更將影響到所有現(xiàn)存實例。
向上面的的例子中，如果你執(zhí)行 var a1=new A(); var a2 =new A(); 那么a1.doSomething 事實上會指向 Object.getPrototypeOf(a1).doSomething, 它就是你在 A.prototype.doSomething 中定義的內(nèi)容。 比如：Object.getPrototypeOf(a1).doSomething ==Object.getPrototypeOf(a2).doSomething== A.prototype.doSomething.
簡而言之， prototype 是用于類型的，而Object.getPrototypeOf()是用于實例的 （instances),兩者功能一致。
[[Prototype]] 看起來就像遞歸引用
如a1.doSomething，Object.getPrototypeOf(a1).doSomething，Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething 等等等， 直到它找到 doSomething 這個屬性或者 Object.getPrototypeOf 返回 null。
var o=new Foo();
//js實際上執(zhí)行的是
var o=new Object();
o.prototype= Foo.prototype;
Foo.call(o);
//然后執(zhí)行
o.someProp;
它會檢查是否存在 someProp 屬性。如果沒有，它會查找 Object.getPrototypeOf(o).someProp ,如果仍舊沒有，它會繼續(xù)查找 Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp ，一直查找下去，直到它找到這個屬性 或者 Object.getPrototypeOf() 返回 null 。
結(jié)論
在用原型繼承編寫復(fù)雜代碼前理解原型繼承模型十分重要。同時，還要清楚代碼中原型鏈的長度，并在必要時結(jié)束原型鏈，以避免可能存在的性能問題。此外，除非為了兼容新 JavaScript 特性，否則，永遠(yuǎn)不要擴(kuò)展原生的對象原型。
