javascript之繼承

lavor 發(fā)布于2019-08-21 14:34 / 3458人閱讀

摘要：阮一峰的講解構(gòu)造函數(shù)繼承動(dòng)物構(gòu)造函數(shù)綁定大毛黃色動(dòng)物模式大毛黃色動(dòng)物如果替換了，都要為新的對(duì)象加上屬性，并將這個(gè)屬性指向原來(lái)的對(duì)象。

阮一峰的講解

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

function Animal() {
    this.species = "動(dòng)物";
}

function Cat(name,color) {
    this.name = name;
    this.color = color;
}

構(gòu)造函數(shù)綁定

function Cat(name,color) {
    Animal.apply(this,arguments);
    this.name = name;
    this.color = color;
}

var cat1 = new Cat("大毛","黃色");
alert(cat1.species); //動(dòng)物

prototype模式

Cat.prototype = new Animal(); 
//Cat.prototype.constructor === Animal;
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黃色");
alert(cat1.species); //動(dòng)物

PS:如果替換了prototype，都要為新的prototype對(duì)象加上constructor屬性，并將這個(gè)屬性指向原來(lái)的對(duì)象。

直接繼承prototype

function Animal(){}
Animal.prototype.species = "動(dòng)物";

Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;

與前一種方法相比，由于不用執(zhí)行和建立Animal的實(shí)例了，比較省內(nèi)存
缺點(diǎn)：Animal.prototype.constructor === Cat

利用空對(duì)象作為中介

var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;

F是空對(duì)象，幾乎不占內(nèi)存

拷貝繼承

function Animal(){}
Animal.prototype.species = "動(dòng)物";

function extend(Child,Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for(var i in p){
        c[i] = p[i];
    }
}

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

var  Chinese = {
    nation: "中國(guó)"
}；
var Doctor = {
    career: "醫(yī)生"
}

兩個(gè)對(duì)象都是普通對(duì)象，不是構(gòu)造函數(shù)，無(wú)法使用構(gòu)造函數(shù)方法實(shí)現(xiàn)繼承

object()方法

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}把子對(duì)象的prototype屬性指向父對(duì)象

var Doctor = object(Chinese);
Doctor.career = "醫(yī)生";
alert(Doctor.nation); // 中國(guó)

淺拷貝

function extend(p) {
    var c = {};
    for(var i in p){
        c[i] = p[i];
    }
    return c;
}

淺拷貝只能拷貝基本類型的數(shù)據(jù)

深拷貝

能夠?qū)崿F(xiàn)數(shù)組和對(duì)象的拷貝

function deepCopy(p,c){
    var c = c || {};
    for(var i in p){
        if(typeof p[i] === "Object"){
            c[i] = (p[i].constructor === "Array")? [] : {};
            deepCopy(p[i],c[i]);
        }else{
            c[i] = p[i];
        }
    }
    return c;
}

云服務(wù)器 GPU云服務(wù)器 javascript繼承 javascript繼承方法 Javascript實(shí)現(xiàn)繼承 javascript類的繼承

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

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

相關(guān)文章

JavaScript深入之繼承的多種方式和優(yōu)缺點(diǎn)

摘要：深入系列第十五篇，講解各種繼承方式和優(yōu)缺點(diǎn)。優(yōu)點(diǎn)融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)，是中最常用的繼承模式。寄生組合式繼承為了方便大家閱讀，在這里重復(fù)一下組合繼承的代碼組合繼承最大的缺點(diǎn)是會(huì)調(diào)用兩次父構(gòu)造函數(shù)。 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。寫在前面本文講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。但是注意：這篇文章更像是筆記，哎...

JackJiang 2019-08-20 16:30 評(píng)論0 收藏0
面向?qū)ο蟮?em>JavaScript之繼承(一) 類式繼承

摘要：那你們肯定會(huì)問(wèn)為什么共用，而沒(méi)有共用呢，下面就給你解釋，請(qǐng)看引用類型是共用的值類型是私用的。引言面向?qū)ο蟮木幊陶Z(yǔ)言都具繼承這一機(jī)制,而 JavaScript 是基于原型(Prototype)面向?qū)ο蟪绦蛟O(shè)計(jì),所以它的實(shí)現(xiàn)方式也是基于原型(Prototype)實(shí)現(xiàn)的. 繼承的方式類式繼承構(gòu)造函數(shù)繼承組合繼承原型式繼承寄生式繼承寄生組合式繼承 1.類式繼承 //聲明父...

forsigner 2019-08-20 14:21 評(píng)論0 收藏0
javascript面向?qū)ο?em>之“多態(tài)”

摘要：之前，本質(zhì)上不能算是一門面向?qū)ο蟮木幊陶Z(yǔ)言，因?yàn)樗鼘?duì)于封裝繼承多態(tài)這些面向?qū)ο笳Z(yǔ)言的特點(diǎn)并沒(méi)有在語(yǔ)言層面上提供原生的支持。所以在中出現(xiàn)了等關(guān)鍵字，解決了面向?qū)ο笾谐霈F(xiàn)了問(wèn)題。 ES6之前，javascript本質(zhì)上不能算是一門面向?qū)ο蟮木幊陶Z(yǔ)言，因?yàn)樗鼘?duì)于封裝、繼承、多態(tài)這些面向?qū)ο笳Z(yǔ)言的特點(diǎn)并沒(méi)有在語(yǔ)言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...

JerryWangSAP 2019-08-23 14:11 評(píng)論0 收藏0
面向?qū)ο蟮?em>JavaScript之繼承(二) 構(gòu)造函數(shù)繼承

摘要：引言創(chuàng)建即繼承構(gòu)造函數(shù)繼承何為構(gòu)造函數(shù)如果你還不清楚構(gòu)造函數(shù)和普通函數(shù)的區(qū)別那請(qǐng)看構(gòu)造函數(shù)與普通函數(shù)構(gòu)造函數(shù)繼承構(gòu)造函數(shù)繼承的核心是或的使用通過(guò)這個(gè)方法改變函數(shù)的作用環(huán)境為父類添加方法聲明子類子類通過(guò)將子類中的變量在父類中執(zhí)行了一遍由引言創(chuàng)建即繼承---構(gòu)造函數(shù)繼承何為構(gòu)造函數(shù)?如果你還不清楚構(gòu)造函數(shù)和普通函數(shù)的區(qū)別,那請(qǐng)看JavaScript構(gòu)造函數(shù)與普通函數(shù) 構(gòu)造函數(shù)繼承構(gòu)...

laoLiueizo 2019-08-20 14:22 評(píng)論0 收藏0
深入理解 Javascript 之繼承

摘要：繼承繼承子類可以使用父類的所有功能，并且對(duì)這些功能進(jìn)行擴(kuò)展。類繼承父類父類添加共有方法子類繼承父類子類添加共有方法其中最核心的一句代碼是將原型指向了父類的原型對(duì)象。繼承繼承：子類可以使用父類的所有功能，并且對(duì)這些功能進(jìn)行擴(kuò)展。繼承的過(guò)程，就是從一般到特殊的過(guò)程。類繼承 // 父類 var supperClass = function() { var id = 1; thi...

wuyangnju 2019-08-23 10:56 評(píng)論0 收藏0
【JavaScript】面向?qū)ο?em>之繼承

摘要：一繼承原型式繼承定義臨時(shí)構(gòu)造函數(shù)，作為參數(shù)傳入對(duì)象作為著構(gòu)造函數(shù)原型，并最后返回該構(gòu)造函數(shù)的實(shí)例對(duì)象定義一個(gè)臨時(shí)構(gòu)造函數(shù)遍歷對(duì)象屬性和方法將函數(shù)參數(shù)作為函數(shù)的原型姜構(gòu)造函數(shù)創(chuàng)造的對(duì)象進(jìn)行返回犬夜叉借助構(gòu)造函數(shù)無(wú)論是原型鏈還是原型式繼承，都有 JS(JavaScript) 一.繼承1.原型式繼承定義臨時(shí)構(gòu)造函數(shù)，作為參數(shù)傳入對(duì)象作為著構(gòu)造函數(shù)原型，并最后返回該構(gòu)造函數(shù)的實(shí)例對(duì)象 func...

sewerganger 2019-08-26 12:16 評(píng)論0 收藏0