javascript現(xiàn)繼承的方式有哪些

這篇文章主要介紹了javascript現(xiàn)繼承的方式有哪些，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

旬陽網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),旬陽網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為旬陽上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的旬陽做網(wǎng)站的公司定做！

1、原型鏈繼承

核心： 將父類的實例作為子類的原型

缺點：  父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了

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

        Person.prototype.getName = function () {    //對原型進行擴展
            return this.name;
        };

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

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

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

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

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

2、構(gòu)造繼承

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

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

因為屬性是綁定到this上面的，所以調(diào)用的時候才賦到相應(yīng)的實例中，各個實例的值就不會互相影響了。

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

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

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

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

        function Parent = (age) {
            Person.call(this,'老明');　　//這一句是核心關(guān)鍵
            //這樣就會在新parent對象上執(zhí)行Person構(gòu)造函數(shù)中定義的所有對象初始化代碼，
            // 結(jié)果parent的每個實例都會具有自己的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());　　//這個會報錯，調(diào)用不到父原型上面擴展的方法

3、組合繼承

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

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

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

        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);   //通過借用構(gòu)造函數(shù)都有自己的屬性，通過原型享用公共的方法
        console.log(result1.name);　　//老明
        console.log(result1.friends);　　//['小李','小紅']

4、寄生組合繼承

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

缺點：堪稱完美，但實現(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)建一個沒有實例方法的類
            Super.prototype = Person.prototype;
            Parent.prototype = new Super();     //將實例作為子類的原型
        })();

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

感謝你能夠認真閱讀完這篇文章，希望小編分享javascript現(xiàn)繼承的方式有哪些內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學(xué)習(xí)!

文章題目：javascript現(xiàn)繼承的方式有哪些
轉(zhuǎn)載來源：http://bm7419.com/article4/gipcie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、虛擬主機、自適應(yīng)網(wǎng)站、微信公眾號、商城網(wǎng)站、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)