很久沒來研究下js原型鏈了 有時被面的真的有些懵逼了
今天自己寫個demo來看看 到底是怎么回事
// 定義個對象A 屬性a
function A(a){
this.a = a;
}
// 定義一個對象B 屬性b 繼承A
function B(a,b){
A.call(this, a);
this.b = b;
}
// 定義一個空的function 拓展原型鏈上的一環(huán)
function F(){};
// F的原型 指向A
F.prototype = A.prototype;
// B的原型 指向F的示例
B.prototype = new F();
// 修復(fù)B的構(gòu)造函數(shù)為B
B.prototype.constructor = B;
var a = new A("a1");// 創(chuàng)建對象a
var b = new B("a2","b2"); //創(chuàng)建對象b
console.log(a instanceof A); // true
console.log(b instanceof B); // true
console.log(b instanceof A); //true
js中 一切都是對象 都是來自于原型鏈的上的繼承 都是來自于Object的原型
js 默認(rèn)的內(nèi)置對象 Object Function Array Date 等
基本數(shù)據(jù)類型 Number String undefined null Boolean等
多個對象的實例的來自于原型的對象
var a1 = new A('A1');
var a2 = new A('A2');
a1.__proto__ === a2.__proto__ // true
a1.__proto__ === A.prototype // true
// 對象實例的原型__proto__ 指向原型對象 A.prototype
// js中 prototype 是方法特有的原型對象 指向的是一個對象 這個對象即使原型鏈上的對象 可以想象成超鏈接一樣
技巧:
定義個空的function 拓展原型鏈的節(jié)點 通過修改節(jié)點的原型對象的執(zhí)行 來模擬強類型語言的繼承
代碼如下
// Child 繼承Parent
function F() {}
F.prototype = Parent.prototype;
Child.protype = new F();
Child.prototype.constructor = Child;
另外 附加一句ES6/ES7才是大潮流
ES5手動修改原型鏈的方式 確實有些惡心
附上es6代碼 可以使用babel轉(zhuǎn)化
class A{
constructor (a){
this.a = a;
}
}
class B extends A{
constructor(a,b){
super(a);
this.b = b;
}
}