面試必問之繼承

豢生發表於2019-02-16
面試繼承

js繼承常用的三種方法，記錄一下，馬上要面試了。

覺得有用可以幫我點個贊嗎？謝謝了。

    // 原型鏈繼承
    function Parent() {
      this.name = `原型鏈繼承`;
      this.play = [1,2,3];
    }
    Parent.prototype.getName = function () {
      console.log(this.name);
    }

    function Child() {
      this.type = `原型鏈繼承child`;
    }
    Child.prototype = new Parent();
    // 原型鏈上的原型物件是通用的，改變一個，其他的都會改變，但我們不想所有物件都改變
    var child1 = new Child();
    var child2 = new Child();
    child1.play.push(4)
    console.log(child1.play)
    console.log(child2.play)
    // 建構函式繼承
    function Parent() {
      this.name = `建構函式繼承`;
      this.play = [1,2,3];
    }
    Parent.prototype.getName = function () {
      console.log(this.name);
    }

    function Child() {
      Parent.call(this)
      this.type = `建構函式繼承child`;
    }

    var child1 = new Child();
    console.log(child1.getName)
    //建構函式繼承不會繼承原型鏈上的方法
    // 組合繼承
    // 原理：建立中間物件，中間物件的原型物件是父類的
    function Parent() {
      this.name = `組合繼承`;
      this.play = [1,2,3];
    }
    Parent.prototype.getName = function () {
      console.log(this.name);
    }

    function Child() {
      Parent.call(this)
      this.type = `組合繼承child`;
    }
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
    //沒有這句程式碼，Child.prototype.constructor會指向Parent
    var child = new Child()
    console.log(child instanceof Child,child instanceof Parent);
    console.log(child.constructor);

相關文章