javascript之繼承

lavor 發布于2019-08-21 14:34 / 3457人閱讀

摘要：阮一峰的講解構造函數繼承動物構造函數綁定大毛黃色動物模式大毛黃色動物如果替換了，都要為新的對象加上屬性，并將這個屬性指向原來的對象。

阮一峰的講解

構造函數繼承

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

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

構造函數綁定

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

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

prototype模式

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

PS:如果替換了prototype，都要為新的prototype對象加上constructor屬性，并將這個屬性指向原來的對象。

直接繼承prototype

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

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

與前一種方法相比，由于不用執行和建立Animal的實例了，比較省內存
缺點：Animal.prototype.constructor === Cat

利用空對象作為中介

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

F是空對象，幾乎不占內存

拷貝繼承

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

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

非構造函數的繼承

var  Chinese = {
    nation: "中國"
}；
var Doctor = {
    career: "醫生"
}

兩個對象都是普通對象，不是構造函數，無法使用構造函數方法實現繼承

object()方法

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

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

淺拷貝

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

淺拷貝只能拷貝基本類型的數據

深拷貝

能夠實現數組和對象的拷貝

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;
}

云服務器 GPU云服務器 javascript繼承 javascript繼承方法 Javascript實現繼承 javascript類的繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87949.html

JavaScript深入之繼承的多種方式和優缺點

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

JackJiang 2019-08-20 16:30 評論0 收藏0
面向對象的JavaScript之繼承(一) 類式繼承

摘要：那你們肯定會問為什么共用，而沒有共用呢，下面就給你解釋，請看引用類型是共用的值類型是私用的。引言面向對象的編程語言都具繼承這一機制,而 JavaScript 是基于原型(Prototype)面向對象程序設計,所以它的實現方式也是基于原型(Prototype)實現的. 繼承的方式類式繼承構造函數繼承組合繼承原型式繼承寄生式繼承寄生組合式繼承 1.類式繼承 //聲明父...

forsigner 2019-08-20 14:21 評論0 收藏0
javascript面向對象之“多態”

摘要：之前，本質上不能算是一門面向對象的編程語言，因為它對于封裝繼承多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。所以在中出現了等關鍵字，解決了面向對象中出現了問題。 ES6之前，javascript本質上不能算是一門面向對象的編程語言，因為它對于封裝、繼承、多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...

JerryWangSAP 2019-08-23 14:11 評論0 收藏0
面向對象的JavaScript之繼承(二) 構造函數繼承

摘要：引言創建即繼承構造函數繼承何為構造函數如果你還不清楚構造函數和普通函數的區別那請看構造函數與普通函數構造函數繼承構造函數繼承的核心是或的使用通過這個方法改變函數的作用環境為父類添加方法聲明子類子類通過將子類中的變量在父類中執行了一遍由引言創建即繼承---構造函數繼承何為構造函數?如果你還不清楚構造函數和普通函數的區別,那請看JavaScript構造函數與普通函數構造函數繼承構...

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

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

wuyangnju 2019-08-23 10:56 評論0 收藏0
【JavaScript】面向對象之繼承

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

sewerganger 2019-08-26 12:16 評論0 收藏0