JavaScript構(gòu)造函數(shù)繼承

FrancisSoung 發(fā)布于2019-08-20 18:53 / 1877人閱讀

摘要：的繼承分為構(gòu)造函數(shù)的繼承和非構(gòu)造函數(shù)繼承其中繼承的還有，以下不支持。小黑黑色通過(guò)深拷貝針對(duì)對(duì)象數(shù)組和函數(shù)，淺拷貝只是引用，內(nèi)存不變來(lái)繼承深拷貝可以使用遞歸賦值小粉粉色

js的繼承分為構(gòu)造函數(shù)的繼承和非構(gòu)造函數(shù)繼承;其中繼承的還有call、apply、Object.create()，ie8以下不支持Object.create()。
子能訪問(wèn)父的公有屬性和方法，父不能訪問(wèn)子的

首先開(kāi)頭講講prototype,__proto__,constructor的關(guān)系：
   1.prototype只有函數(shù)才有（包含__proto__,constructor）
   2.proto__(ie是沒(méi)有這個(gè)屬性的),constructor函數(shù)對(duì)象都有

1.call和apply繼承

function Animal(){
            this.species = "動(dòng)物";
            Animal.prototype.notice="i am parent";
        }
        function Dog(name,color){
            Animal.apply(this,arguments);
            this.name = name;
            this.color = color;
        }
        var dog1 = new Dog("小白","白色");
        console.log(dog1.species);

2.通過(guò)建立空的構(gòu)造函數(shù)作為橋接實(shí)現(xiàn)繼承

function extend1(p,s){
            function F(){};
            F.prototype = p.prototype;
            console.log(typeof F);//function
            var f = new F();
            console.log(typeof f);//object
            console.log(f.constructor);
            s.prototype = f; //此時(shí)s.prototype.constructor指向Anmial()構(gòu)造函數(shù)，為了避免繼承繚亂，所以要把s.prototype.constructor指回本身。
            s.prototype.constructor = s;
        }
        extend1(Animal,Dog);
        var dog2 = new Dog("小黑","黑色");
        console.log("dog2"+ dog2.notice);

3.通過(guò)深拷貝(針對(duì)對(duì)象、數(shù)組和函數(shù)，淺拷貝只是引用，內(nèi)存不變)來(lái)繼承
(深拷貝可以使用遞歸賦值、call、apply、$.extend(true,{},{}..))

 function extend2(p,s){
            var parent = p.prototype;
            var son = s.prototype;
            for(var i in parent){
                son[i] = parent[i];
            }
        }
        extend2(Animal,Dog);
        var dog3 = new Dog("小粉","粉色");
        console.log("dog3"+ dog3.notice);

GPU云服務(wù)器云服務(wù)器繼承構(gòu)造函數(shù) 構(gòu)造函數(shù) 繼承 php 構(gòu)造方法繼承構(gòu)造函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84841.html

相關(guān)文章

徹底搞懂JavaScript中的繼承

摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構(gòu)造函數(shù)繼承，在中是一種關(guān)鍵的實(shí)現(xiàn)的繼承方法，相信你已經(jīng)很好的掌握了。你應(yīng)該知道，JavaScript是一門基于原型鏈的語(yǔ)言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關(guān)。甚至可以說(shuō)，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。一、構(gòu)造函數(shù)，原型屬性與實(shí)例對(duì)象要搞清楚如何在JavaScript中實(shí)現(xiàn)繼承，...

_ivan 2019-08-21 17:48 評(píng)論0 收藏0
白話解釋 Javascript 原型繼承(prototype inheritance)

摘要：我們有了構(gòu)造函數(shù)之后，第二步開(kāi)始使用它構(gòu)造一個(gè)函數(shù)。來(lái)個(gè)例子這種方式很簡(jiǎn)單也很直接，你在構(gòu)造函數(shù)的原型上定義方法，那么用該構(gòu)造函數(shù)實(shí)例化出來(lái)的對(duì)象都可以通過(guò)原型繼承鏈訪問(wèn)到定義在構(gòu)造函數(shù)原型上的方法。來(lái)源: 個(gè)人博客白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承? 學(xué)過(guò)面向?qū)ο蟮耐瑢W(xué)們是否還記得，老師整天掛在嘴邊的面向?qū)ο笕筇?..

kid143 2019-08-21 15:09 評(píng)論0 收藏0
重新認(rèn)識(shí)JavaScript面向?qū)ο? 從ES5到ES6

摘要：基于原型的面向?qū)ο笤诨谠偷恼Z(yǔ)言中如并不存在這種區(qū)別它只有對(duì)象不論是構(gòu)造函數(shù)，實(shí)例，原型本身都是對(duì)象。允許動(dòng)態(tài)地向單個(gè)的對(duì)象或者整個(gè)對(duì)象集中添加或移除屬性。為了解決以上兩個(gè)問(wèn)題，提供了構(gòu)造函數(shù)創(chuàng)建對(duì)象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認(rèn)識(shí)面向?qū)ο?1. JavaScript...

VishKozus 2019-08-30 13:56 評(píng)論0 收藏0
重新認(rèn)識(shí)JavaScript面向?qū)ο? 從ES5到ES6

摘要：基于原型的面向?qū)ο笤诨谠偷恼Z(yǔ)言中如并不存在這種區(qū)別它只有對(duì)象不論是構(gòu)造函數(shù)，實(shí)例，原型本身都是對(duì)象。允許動(dòng)態(tài)地向單個(gè)的對(duì)象或者整個(gè)對(duì)象集中添加或移除屬性。為了解決以上兩個(gè)問(wèn)題，提供了構(gòu)造函數(shù)創(chuàng)建對(duì)象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認(rèn)識(shí)面向?qū)ο?1. JavaScript...

用戶83 2019-08-26 11:38 評(píng)論0 收藏0
徹底理解Javascript中的原型鏈與繼承

摘要：在節(jié)中，我們學(xué)習(xí)到了通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象的三個(gè)重要步驟，其中的一步是把構(gòu)造函數(shù)的對(duì)象設(shè)置為創(chuàng)建對(duì)象的原型。利用而不是直接用創(chuàng)建一個(gè)實(shí)例對(duì)象的目的是，減少一次調(diào)用父構(gòu)造函數(shù)的執(zhí)行。 JavaScript語(yǔ)言不像面向?qū)ο蟮木幊陶Z(yǔ)言中有類的概念，所以也就沒(méi)有類之間直接的繼承，JavaScript中只有對(duì)象，使用函數(shù)模擬類，基于對(duì)象之間的原型鏈來(lái)實(shí)現(xiàn)繼承關(guān)系，ES6的語(yǔ)法中新增了class關(guān)鍵...

ziwenxie 2019-08-21 11:23 評(píng)論0 收藏0