小議JS原型鏈、繼承
阿新 • • 發佈:2018-12-09
繼承是前端面試必問,說到繼承,就必須談一談原型鏈,本文適合有一定基礎的且對原型鏈有一定了解的前端朋友。
原型鏈
我面試的時候都會這麼回答原型鏈:js萬物皆物件,用var a={} 或 var a = new Object();或者用建構函式的形式:var a = new A();建立一個物件時,該物件不僅可以訪問它自身的屬性,還會根據__proto__屬性找到它原型鏈上的屬性,直到找到Object上面的null
。如有不貼切,忘評論不足之處哈。更詳細的參考mdn: developer.mozilla.org/zh-CN/docs/…
對於下面的例子:
var A = function(){
this.name="xiaoming" ;
}
A.prototype.age=9;
var a = new A();
console.log(a.age); //9
複製程式碼
我參考以前學習java時對例項和Class的圖畫了一個原型鏈的圖,不太好,但是畫圖不易,小女子求您一個贊哈。
言歸正傳,圖中長方形代表例項物件a,圓形代表原型,三角形代表建構函式。由圖可知:a.__proto__ === A.prototype; //true
A.prototype.constructor===A; //true
A.prototype.__proto__===Object.prototype; //true
Object.prototype.__proto__===null; //true
複製程式碼
上方示例可以在看完我的解釋之後再回顧一遍。例項和原型之間是通過__proto__
屬性連線,且是單向的,從例項指向原型;原型和建構函式之間連線是雙向的,通過constroctor和prototype連線,具體見圖;其實Function和Object比較特殊,他們既是物件又是函式,兩者內部同時含有proto和prototype屬性,可看下面程式碼:
Object.__proto__ === Function.prototype //true
Object.__proto__ === Function.__proto__//true
Object.prototype === Function.prototype.__proto__ // true
Function instanceof Object //true
Object instanceof Function //true
複製程式碼
至此,原型鏈的知識差不多可以理解了,後面介紹繼承的幾種方式。