javascript 面向?qū)ο?實(shí)現(xiàn)繼承的幾種方式)

liujs 發(fā)布于2019-08-23 16:41 / 2091人閱讀

摘要：老明調(diào)用了從原型中繼承來(lái)的方法繼承到了當(dāng)前對(duì)象的原型中調(diào)用了從原型中擴(kuò)展來(lái)的方法構(gòu)造繼承基本思想借用構(gòu)造函數(shù)的基本思想就是利用或者把父類(lèi)中通過(guò)指定的屬性和方法復(fù)制借用到子類(lèi)創(chuàng)建的實(shí)例中。

1、原型鏈繼承

核心：將父類(lèi)的實(shí)例作為子類(lèi)的原型

缺點(diǎn)：父類(lèi)新增原型方法/原型屬性，子類(lèi)都能訪問(wèn)到，父類(lèi)一變其它的都變了

        function Person (name) {
            this.name = name;
        };

        Person.prototype.getName = function () {    //對(duì)原型進(jìn)行擴(kuò)展
            return this.name;
        };

        function Parent (age) {
            this.age = age;
        };

        Parent.prototype = new Person("老明");   //這一句是關(guān)鍵 //通過(guò)構(gòu)造器函數(shù)創(chuàng)建出一個(gè)新對(duì)象，把老對(duì)象的東西都拿過(guò)來(lái)。

        Parent.prototype.getAge = function () {
            return this.age;
        };

//        Parent.prototype.getName = function () {   //可以重寫(xiě)從父類(lèi)繼承來(lái)的方法,會(huì)優(yōu)先調(diào)用自己的。
//            console.log(222);
//        };

        var result = new Parent(22);
        console.log(result.getName());  //老明　　//調(diào)用了從Person原型中繼承來(lái)的方法(繼承到了當(dāng)前對(duì)象的原型中)　　
        console.log(result.getAge());   //22 　　//調(diào)用了從Parent原型中擴(kuò)展來(lái)的方法

2、構(gòu)造繼承

基本思想
借用構(gòu)造函數(shù)的基本思想就是利用call或者apply把父類(lèi)中通過(guò)this指定的屬性和方法復(fù)制（借用）到子類(lèi)創(chuàng)建的實(shí)例中。
因?yàn)?b>this對(duì)象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定的。也就是說(shuō)，在全局中，this等于window，而當(dāng)函數(shù)被作為某個(gè)對(duì)象的方法調(diào)用時(shí)，this等于那個(gè)對(duì)象。
call、apply 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。

所以，這個(gè)借用構(gòu)造函數(shù)就是，new對(duì)象的時(shí)候(new創(chuàng)建的時(shí)候，this指向創(chuàng)建的這個(gè)實(shí)例)，創(chuàng)建了一個(gè)新的實(shí)例對(duì)象，
并且執(zhí)行Parent里面的代碼，而Parent里面用call調(diào)用了Person，也就是說(shuō)把this指向改成了指向新的實(shí)例，
所以就會(huì)把Person里面的this相關(guān)屬性和方法賦值到新的實(shí)例上，而不是賦值到Person上面,
所以所有實(shí)例中就擁有了父類(lèi)定義的這些this的屬性和方法。

因?yàn)閷傩允墙壎ǖ?b>this上面的，所以調(diào)用的時(shí)候才賦到相應(yīng)的實(shí)例中，各個(gè)實(shí)例的值就不會(huì)互相影響了。

核心：使用父類(lèi)的構(gòu)造函數(shù)來(lái)增強(qiáng)子類(lèi)實(shí)例，等于是復(fù)制父類(lèi)的實(shí)例屬性給子類(lèi)（沒(méi)用到原型）

缺點(diǎn)：方法都在構(gòu)造函數(shù)中定義，只能繼承父類(lèi)的實(shí)例屬性和方法，不能繼承原型屬性/方法，無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類(lèi)都有父類(lèi)實(shí)例函數(shù)的副本，影響性能

      function Person (name) {
            this.name = name;
            this.friends = ["小李","小紅"];
            this.getName = function () {
                return this.name;
            }
        };

//        Person.prototype.geSex = function () {    //對(duì)原型進(jìn)行擴(kuò)展的方法就無(wú)法復(fù)用了
//            console.log("男");
//        };

        function Parent = (age) {
            Person.call(this,"老明");　　//這一句是核心關(guān)鍵
            //這樣就會(huì)在新parent對(duì)象上執(zhí)行Person構(gòu)造函數(shù)中定義的所有對(duì)象初始化代碼，
            // 結(jié)果parent的每個(gè)實(shí)例都會(huì)具有自己的friends屬性的副本
            this.age = age;
        };

        var result = new Parent(23);
        console.log(result.name);　　　　//老明
        console.log(result.friends);　　//["小李", "小紅"]
　　　　 console.log(result.getName());　　//老明
　　　　 console.log(result.age);　　　　//23
　　　　 console.log(result.getSex());　　//這個(gè)會(huì)報(bào)錯(cuò)，調(diào)用不到父原型上面擴(kuò)展的方法

3、組合繼承

組合繼承（所有的實(shí)例都能擁有自己的屬性，并且可以使用相同的方法，組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷，結(jié)合了兩個(gè)的優(yōu)點(diǎn)，是最常用的繼承方式）

核心：通過(guò)調(diào)用父類(lèi)構(gòu)造，繼承父類(lèi)的屬性并保留傳參的優(yōu)點(diǎn)，然后再通過(guò)將父類(lèi)實(shí)例作為子類(lèi)原型，實(shí)現(xiàn)函數(shù)復(fù)用

缺點(diǎn)：調(diào)用了兩次父類(lèi)構(gòu)造函數(shù)，生成了兩份實(shí)例（子類(lèi)實(shí)例將子類(lèi)原型上的那份屏蔽了）

        function Person  (name) {
             this.name = name;
             this.friends = ["小李","小紅"];
         };

         Person.prototype.getName = function () {
             return this.name;
         };

        function Parent (age) {
            Person.call(this,"老明");　　//這一步很關(guān)鍵
            this.age = age;
        };

        Parent.prototype = new Person("老明");　　//這一步也很關(guān)鍵
        var result = new Parent(24);
        console.log(result.name);　　　　//老明
        result.friends.push("小智");　　//
        console.log(result.friends);　　//["小李","小紅","小智"]
        console.log(result.getName());　　//老明
        console.log(result.age);　　　　//24

        var result1 = new Parent(25);   //通過(guò)借用構(gòu)造函數(shù)都有自己的屬性，通過(guò)原型享用公共的方法
        console.log(result1.name);　　//老明
        console.log(result1.friends);　　//["小李","小紅"]

4、寄生組合繼承

核心：通過(guò)寄生方式，砍掉父類(lèi)的實(shí)例屬性，這樣，在調(diào)用兩次父類(lèi)的構(gòu)造的時(shí)候，就不會(huì)初始化兩次實(shí)例方法/屬性，避免的組合繼承的缺點(diǎn)

缺點(diǎn)：堪稱(chēng)完美，但實(shí)現(xiàn)較為復(fù)雜

        function Person(name) {
            this.name = name;
            this.friends = ["小李","小紅"];
        }

        Person.prototype.getName = function () {
            return this.name;
        };

        function Parent(age) {
            Person.call(this,"老明");
            this.age = age;
        }

        (function () {
            var Super = function () {};     // 創(chuàng)建一個(gè)沒(méi)有實(shí)例方法的類(lèi)
            Super.prototype = Person.prototype;
            Parent.prototype = new Super();     //將實(shí)例作為子類(lèi)的原型
        })();

        var result = new Parent(23);
        console.log(result.name);
        console.log(result.friends);
        console.log(result.getName());
        console.log(result.age);