理解JS非構造函數繼承

Cristic 發布于2019-08-19 18:04 / 2542人閱讀

摘要：即對象為非構造函數，普通函數繼承另一個普通函數。方法淺拷貝深拷貝推薦方法發明人，提出的函數。該函數就是把子對象的屬性，指向父對象。

即對象為非構造函數，普通函數繼承另一個普通函數。

object()方法

淺拷貝

深拷貝（推薦）

object()方法

json發明人Douglas Crockford，提出的object()函數。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

該函數就是把子對象的prototype屬性，指向父對象。使用時依然是先繼承后定義子對象的方法和屬性

var parent = {
    name: "Oliver"
};
var child = object(parent); //先繼承
child.age = 18; //后定義
console.log(child.name); //Oliver
console.log(child.age); //18

淺拷貝

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

該方法只能繼承基本數據類型，如果父對象有數組等對象，拷貝的只是個地址，子對象屬性的改變會導致父對象屬性的改變（篡改問題）

var parent = {
    name: "Oliver",
    friend: [1,2,3]
};

var child = extend(parent); //先繼承
child.age = 18;

console.log(child.name); //Oliver
console.log(child.age); //18
child.friend.pop();
console.log(child.friend); //兩者都改變了
console.log(parent.friend); //兩者都改變了

深拷貝

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

該方法原理是遞歸調用"淺拷貝"

var parent = {
    name: "Oliver",
    friend: [1, 2, 3]
};

var child = deepCopy(parent); //先繼承
child.age = 18;

console.log(child.name); //Oliver
console.log(child.age); //18
child.friend.pop();
console.log(child.friend); //[1, 2]
console.log(parent.friend); //[1, 2, 3]

GPU云服務器云服務器繼承構造函數構造函數繼承非構造函數 JS構造函數

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

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

面向對象的 JavaScript

摘要：是完全的面向對象語言，它們通過類的形式組織函數和變量，使之不能脫離對象存在。而在基于原型的面向對象方式中，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向對象的語言，或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0
獨家解析Javascript原型繼承

摘要：面向對象實現代碼動物發聲汪汪喵喵調用代碼動物發聲喵喵動物發聲汪汪當要增加一種動物時，只需增加一個繼承，不會影響其他已有的動物邏輯。所以的繼承和的原型繼承，可謂殊途同歸。傳統面向對象的繼承和多態我們知道C++／Java／C#等面向對象語言，都原生地支持類的繼承。繼承的核心作用大抵是創建一個派生類，并使其復用基本類（即父類）的字段和／或方法。并且派生類可以重寫基本類的方法。這樣基本類和...

verano 2019-08-20 18:01 評論0 收藏0
JS對象繼承與原型鏈

摘要：此用來定義通過構造器構造出來的對象的原型，構造器內部的代碼用來給對象初始化。對象繼承 VS 類繼承在 class-based 的面向對象的世界里，要出現對象，必須先有類。類之間可以繼承，類再使用 new 操作創建出實體，父子對象之間的繼承體現在父類和子類上。你不能說對象 a 繼承了對象 b，只能說 class A 繼承了 class B，然后他們各自有一個實例a、b。 JS中實現...

QLQ 2019-08-22 11:08 評論0 收藏0
JavaScript之深入各種繼承

摘要：通常有這兩種繼承方式接口繼承和實現繼承。理解繼承的工作是通過調用函數實現的，所以是寄生，將繼承工作寄托給別人做，自己只是做增強工作。適用基于某個對象或某些信息來創建對象，而不考慮自定義類型和構造函數。一、繼承的概念繼承，是面向對象語言的一個重要概念。通常有這兩種繼承方式：接口繼承和實現繼承。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。《JS高程》里提到：由于函數沒有簽名，...

tomlingtm 2019-08-23 17:08 評論0 收藏0
JS中繼承方式總結

摘要：三組合繼承結合原型鏈方式和借用構造函數方式的有點，進行改進的一種繼承方式。四寄生組合式繼承為了解決組合繼承中子構造函數的原型鏈出現冗余的屬性和方法，引入的一種繼承方式。說在前面：為了使代碼更為簡潔方便理解，本文中的代碼均將非核心實現部分的代碼移出。一、原型鏈方式關于原型鏈，可點擊《深入淺出，JS原型鏈的工作原理》，本文不再重復敘述。思路：讓子構造函數的原型等于父構造函數的實例...

rottengeek 2019-08-26 13:27 評論0 收藏0