JavaScript實(shí)現(xiàn)繼承

kamushin233 發(fā)布于2019-08-19 18:35 / 1097人閱讀

摘要：以下內(nèi)容均基于本人對高級程序設(shè)計(jì)第三版小節(jié)的理解先看一下父類私有受保護(hù)成員，只允許在父類的構(gòu)造函數(shù)中賦值公有成員引用類型的成員構(gòu)造函數(shù)中的方法，打印一些基本信息原型中的方法，將構(gòu)造函數(shù)中的非函數(shù)成員以格式打印方式一原型鏈繼承實(shí)現(xiàn)方式子類的原

以下內(nèi)容均基于本人對《JavaScript高級程序設(shè)計(jì)》第三版6.3小節(jié)的理解

先看一下父類

function Animal(name) {
    var name = name;             //"私有（受保護(hù)）"成員，只允許在父類的構(gòu)造函數(shù)中賦值
    this.food = undefined;       //"公有"成員

    //引用類型的成員
    this.birthday = {            
      year: undefined
    };

    //構(gòu)造函數(shù)中的方法，打印一些基本信息
    this.greeting = function() {
      console.log("Hi, my name is {" + name + "} I like eat {" + this.food + "} and my birth year is {" + this.birthday.year + "}");
    };

    //原型中的方法，將構(gòu)造函數(shù)中的非函數(shù)成員以JSON格式打印
    Animal.prototype.briefInfo = function() {
      var brief = {
        name: name,
        food: this.food,
        birthday: this.birthday
      };
      console.log(JSON.stringify(brief));
    };
  }

方式一：原型鏈繼承

實(shí)現(xiàn)方式：子類的原型指向父類的實(shí)例

子類：

function Dog() {}
Dog.prototype = new Animal();        //原型指向父類的實(shí)例

測試：

var dog1 = new Dog();
dog1.food = "shit";
dog1.birthday.year = 2015;

var dog2 = new Dog();
dog2.food = "bones";
dog2.birthday.year = 2016;

dog1.greeting();  //console: Hi, my name is {undefined} I like eat {shit} and my birth year is {2016}
dog2.greeting();  //console: Hi, my name is {undefined} I like eat {bones} and my birth year is {2016}

dog1.briefInfo();  //console: {"food":"shit","birthday":{"year":2016}}
dog2.briefInfo();  //console: {"food":"bones","birthday":{"year":2016}}

//以上，
//birthday是引用類型的屬性，所以dog1的birthday.year被dog2覆蓋了;
//無法給dog1和dog2的name賦值

存在的問題：

引用類型的對象會被子類的所有實(shí)例共享(1.1)

無法在創(chuàng)建子類的實(shí)例時，給父類的構(gòu)造函數(shù)傳遞參數(shù)(1.2)

方式二：借用構(gòu)造函數(shù)（偽造對象、經(jīng)典繼承）

實(shí)現(xiàn)方式：在子類的構(gòu)造函數(shù)中利用call(或者apply)方法執(zhí)行父類構(gòu)造函數(shù)(問題1.2解決)，將執(zhí)行對象設(shè)為子類的this,相當(dāng)于把父類構(gòu)造函數(shù)中的成員拷貝了一份到子類(問題1.1解決)

子類

function Dog(name) {
  Animal.call(this, name);
}

測試

var dog1 = new Dog("tom");
dog1.food = "shit";
dog1.birthday.year = 2015;

var dog2 = new Dog("mike");
dog2.food = "bones";
dog2.birthday.year = 2016;

dog1.greeting();  //console: Hi, my name is {tom} I like eat {shit} and my birth year is {2015}
dog2.greeting();  //console: Hi, my name is {mike} I like eat {bones} and my birth year is {2016}

//briefInfo是父類原型中的屬性，并沒有被繼承，以下語句會報錯
dog1.briefInfo();  //error: dog1.briefInfo is not a function
dog2.briefInfo();  //error: dog2.briefInfo is not a function

存在的問題：

父類原型中定義的屬性無法被繼承

綜合方式一方式二，一種很明顯的方式呼之欲出了：

方式三：組合繼承

實(shí)現(xiàn)方式：結(jié)合原型鏈繼承和經(jīng)典繼承

子類

function Dog(name) {
  Animal.call(this, name);    //經(jīng)典繼承
}
Dog.prototype = new Animal();    //原型鏈繼承

測試

var dog1 = new Dog("tom");
dog1.food = "shit";
dog1.birthday.year = 2015;

var dog2 = new Dog("mike");
dog2.food = "bones";
dog2.birthday.year = 2016;

dog1.greeting();  //console: Hi, my name is {tom} I like eat {shit} and my birth year is {2015}
dog2.greeting();  //console: Hi, my name is {mike} I like eat {bones} and my birth year is {2016}
dog1.briefInfo();  //console: {"name":"tom","food":"shit","birthday":{"year":2015}}
dog2.briefInfo();  //console: {"name":"mike","food":"bones","birthday":{"year":2016}}

//終于得到了預(yù)期的結(jié)果，算是較好的實(shí)現(xiàn)了繼承。
//但是，并不完美

存在的問題

父類的構(gòu)造函數(shù)被調(diào)用了兩次

為了引出下一個繼承方式，先將函數(shù)的繼承放在一邊，看一下js中對象的繼承

(摘抄原文)
1. 原型式繼承
var person = {
  name: "martin"
  firend: ["bob", "steven"]
};
  
function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
}
var anotherPerson = object(person);    //antherPerson繼承了person
2. 寄生式繼承
function createAnother(original) {
  var clone = object(original);    //原型式繼承定義的方法
  //擴(kuò)展對象
  clone.sayHi = function() {
    console.log("hi");
  }
  return clone;
}

回到正題，接下來介紹一顆 “銀彈”

方式四：寄生組合式繼承

實(shí)現(xiàn)方式：

利用經(jīng)典繼承拷貝父類構(gòu)造中的屬性到子類

利用原型式繼承創(chuàng)建一個繼承父類原型的對象

將該對象的constructor屬性指向子類的構(gòu)造函數(shù)(寄生式繼承:擴(kuò)展對象)

將子類的prototype指向該對象

子類

function Dog(name) {
  Animal.call(this, name);
}

function F() {}
var supProto = Animal.prototype;
F.prototype = supProto;
var subProto = new F();
subProto.constructor = Dog;
Dog.prototype = subProto;

測試

var dog1 = new Dog("tom");
dog1.food = "shit";
dog1.birthday.year = 2015;

var dog2 = new Dog("mike");
dog2.food = "bones";
dog2.birthday.year = 2016;

dog1.greeting();   //console: Hi, my name is {tom} I like eat {shit} and my birth year is {2015}
dog2.greeting();   //console: Hi, my name is {mike} I like eat {bones} and my birth year is {2016}
dog1.briefInfo();  //console: {"name":"tom","food":"shit","birthday":{"year":2015}}
dog2.briefInfo();  //console: {"name":"mike","food":"bones","birthday":{"year":2016}}