【JavaScript】【對象】創建對象、對象繼承的實用方式及理解

scola666 發布于2019-08-19 17:47 / 2210人閱讀

摘要：創建對象對象繼承實際上是一回事我們所需要的實例對象通過構造函數獲得私有屬性通過原型鏈獲得共享的屬性。原型式繼承和寄生式繼承用于創建與已有對象類似的實例對象。

本文約定：不特殊聲明的情況下，屬性代指屬性或方法。

創建對象、對象繼承實際上是一回事：我們所需要的實例對象通過構造函數獲得私有屬性、通過原型鏈獲得共享的屬性。什么是好的方式？私有屬性通過構造函數的方式獲得（不考慮實例中自定義私有屬性）且不需要重寫，共享屬性通過原型鏈找到且不需要重復創建。

普適的方式 組合使用構造函數模式和原型模式創建對象

function HNU_student(name) {
    this.name = name;
    this.sayName = function() {
        return this.name;
    };
}
HNU_student.prototype = {
    school: "HNU",
    saySchool: function() {
        return this.school;
    }
};
Object.defineProperty(HNU_student, "constructor", {value: HNU_student});

var hiyohoo = new HNU_student("xujian");

通過字面量的方式會重寫prototype，且原型的constructor指向了Object，必要的情況下需要重新定義constructor，使用Object.defineProperty()方法可以將constructor的enumerable等特性變為初始默認的false。

寄生組合式繼承

function object(o) {
    function F() {};
    F.prototype = o;
    return new F();
}
function inheritPrototype(child, parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

function HNU_student(name) {
    this.name = name;
    this.sayName = function() {
        return this.name;
    };
}
HNU_student.prototype.school = "HNU";
HNU_student.prototype.saySchool = function() {
    return this.school;
};

function Student_2011(name, number) {
    HNU_student.call(this, name);
    this.number = number;
    this.sayNumber = function() {
        return this.number;
    }
}
inheritPrototype(Student_2011, HNU_student);
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
    return this.graduationTime;
};

var hiyohoo = new Student_2011("xujian", 20110803203);

object()的作用：將作為參數傳入的對象變成實例的原型，該對象的屬性被所有實例共享。

共享屬性：inheritPrototype(Student_2011, HNU_student);，子構造函數原型成為超構造函數原型的一個實例，超構造函數原型中的屬性共享給子構造函數。
私有屬性：HNU_student.call(this, name);，通過子構造函數創建實例時調用超構造函數創建私有屬性。

創建對象的其他方式 動態原型模式

function HNU_student(name) {
    this.name = name;
    this.sayName = function() {
        return this.name;
    };

    if (!HNU_student.prototype.school) {
        HNU_student.prototype.school = "HNU";
        HNU_student.prototype.saySchool = function() {
            return this.school;
        };
    }
}

var hiyohoo = new HNU_student("xujian");

將定義在原型中的共享屬性放入構造函數中，使用判斷語句，在第一次調用構造函數創建實例時，初始化原型共享屬性。

寄生構造函數模式

function SpecialArray() {
    var values = new Array();
    values.push.apply(values, arguments);
    values.toPipedString = function() {
        return this.join("|");
    };

    return values;
}

var colors = new SpecialArray("red", "black", "white");

用于為原生構造函數添加特殊的屬性。

對象繼承的其他方式 組合繼承

function HNU_student(name) {
    this.name = name;
    this.sayName = function() {
        return this.name;
    };
}
HNU_student.prototype.school = "HNU";
HNU_student.prototype.saySchool = function() {
    return this.school;
};

function Student_2011(name, number) {
    HNU_student.call(this, name);
    this.number = number;
    this.sayNumber = function() {
        return this.number;
    };
}
Student_2011.prototype = new HNU_student();    //重寫原型一定要放在所有原型屬性定義之前
Student_2011.prototype.constructor = Student_2011;
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
    return this.graduationTime;
}

var hiyohoo = new Student_2011("xujian", 20110803203);

共享屬性：Student_2011.prototype = new HNU_student();，子構造函數的原型就指向了超構造函數的原型，實例通過原型鏈找到所有共享的屬性。
私有屬性：HNU_student.call(this, name);，通過子構造函數創建實例時調用超構造函數創建私有屬性。

缺陷：超構造函數被調用了兩遍。Student_2011.prototype = new HNU_student();的同時，在子構造函數原型中創建了超構造函數定義的私有屬性，這些原型中的私有屬性被實例中的同名屬性覆蓋屏蔽。

原型式繼承、寄生式繼承

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

var student1 = {
    school: "HNU",
    saySchool: function() {
        return this.school;
    }
};

var student2 = object(student1);

Object.creat()是ECMAScript 5新增的方法，接受兩個參數：一是作為原型的原對象，二是重寫或新增屬性的對象，作用與自定義的object()相同。

var student1 = {
    name: "xujian",
    school: "HNU"
};
var student2 = Object.create(student1, {
    name: {
        value: "huangjing"
    }
});

寄生式繼承在原型式繼承的基礎上添加了額外的屬性用來增強對象。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
function creatAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
        alert("Hi!");
    };
    return clone;
}

var student1 = {
    school: "HNU",
    saySchool: function() {
        return this.school;
    }
};

var student2 = creatAnother(student1);

原型式繼承和寄生式繼承用于創建與已有對象類似的實例對象。

轉載請注明出處：https://segmentfault.com/a/1190000004559437

文章不定期更新完善，如果能對你有一點點啟發，我將不勝榮幸。

GPU云服務器云服務器 java創建對象的幾種方式 js創建對象方式理解對象 javascript的dom對象

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

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

學Java編程需要注意的地方

摘要：學編程真的不是一件容易的事不管你多喜歡或是多會編程，在學習和解決問題上總會碰到障礙。熟練掌握核心內容，特別是和多線程初步具備面向對象設計和編程的能力掌握基本的優化策略。　　學Java編程真的不是一件容易的事,不管你多喜歡或是多會Java編程，在學習和解決問題上總會碰到障礙。工作的時間越久就越能明白這個道理。不過這倒是一個讓人進步的機會，因為你要一直不斷的學習才能很好的解決你面前的難題...

leanxi 2019-08-14 17:48 評論0 收藏0
全面理解JavaScript中的this

摘要：與方法這兩個方法的第一個參數是一個對象，是給準備的，接著在調用函數時將其綁定到。作為事件處理函數當函數被用作事件處理函數時，它的會指向觸發事件的元素?？偨Y在任何函數體外部，無論是否在嚴格模式，都指代全局對象。 this在JavaScript中似乎可以視而不見，但不去正視它學到的就只是殘缺的JS。拋開這些形而上的意義不說，從實用性及代碼簡潔展示this的不可或缺的地位，舉例子： func...

Pines_Cheng 2019-08-21 17:52 評論0 收藏0
JavaScript原型、原型鏈、繼承的理解

摘要：構造函數實例和原型的概念和關系每個函數都屬于對象，都會有一個屬性叫。這也是繼承的依據。這樣一來，原型找不到構造函數，這是非常蛋疼的事情，違反了原型鏈的定義啊。所以現在子對象原型和父對象原型是就建立關系了。構造函數、實例和原型的概念和關系每個函數都屬于對象，都會有一個屬性叫prototype。這個屬性指向一個對象，我們把他叫做當前函數的原型對象。原型對象下面有個屬性叫construc...

Aceyclee 2019-08-22 10:50 評論0 收藏0
【譯】每個JavaScript 開發者應該了解的10個面試題

摘要：避免脆弱的基類問題。紅牌警告沒有提到上述任何問題。單向數據流意味著模型是單一的事實來源。單向數據流是確定性的，而雙向綁定可能導致更難以遵循和理解的副作用。原文地址 1. 你能說出兩種對 JavaScript 應用開發者而言的編程范式嗎？希望聽到： 2. 什么是函數編程？希望聽到： 3. 類繼承和原型繼承的不同？希望聽到 4. 函數式編程和面向對象編程的優缺點？ ...

mykurisu 2019-05-22 18:24 評論0 收藏0
復習Javascript專題（三）：面向對象（對象的創建與繼承，原型及原型鏈）

摘要：在創建子類實例時，不能向超類型的構造函數中傳遞參數。構造函數繼承子類傳進的值是基本思想是在子類構造函數的內部調用超類或父類型構造函數。繼承保證構造函數指針指向如果想同時繼承多個，還可使用添加屬性的方式類繼承， OOP：Object Oriented Programming 面向對象編程。題外話：面向對象的范圍實在太大，先把這些大的東西理解理解。 1.什么是對象？根據高程和權威指南上...

testHs 2019-08-23 13:39 評論0 收藏0