js原型鏈繼承

很久沒來研究下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;
}
}




最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容