JavaScript對象的深入理解（二）

tommego 發布于2019-08-21 17:24 / 392人閱讀

摘要：原型的概念不同于構造函數模式創建對象只能單級即成，得益于原型鏈的概念，原型模式可實現類似其他語言的多級繼承。組合使用構造函數與原型模式單一使用原型對象的問題在于所有屬性皆共享，若不想共享某屬性，則可放入構造函數中。

之前提到，構造函數方法創建對象存在著方法不共享的問題，因此引申出了原型模式創建對象

原型模式

原型模式旨在創建一個模版對象，該對象的所有屬性和方法被其實例所共享。

原型的概念

不同于構造函數模式創建對象只能單級即成，得益于原型鏈的概念，原型模式可實現類似其他OOP語言的多級繼承。

原型鏈：一系列有繼承關系的函數（對象）中[[prototype]]屬性自底向上的指向

先給一個例子：

function Person() {
    
}

Person.prototype = {
      constructor: Person,
    name: "Jonathan",
    age: 23,
      job: developer,
      sayName: function() {
        console.log(this.name);
    }
}

person1 = new Person();
person2 = new Person();

該例子中各對象的關系如下

每一個函數（對象）都可以視為一個模版，向上看，該對象的[[prototype]]

創建原型對象

function Person() {
}

Person.prototype = {
      constructor: Person,
    name: "Jonathan",
    age: 23,
      job: developer,
      sayName: function() {
        console.log(this.name);
    }
}

var person1 = new Person();
person1.sayName(); //"Jonathan"

var person2 = new Person();
person2.sayName(); //"Jonathan"

console.log(person1.sayName == person2.sayName); //true

要點

先命名一個空函數

用對象字面量方式，為該函數的.prototype屬性添加原型屬性及方法

為了constructor屬性的正確指向，應先把constructor指向該對象

原型對象的問題

由于眾多實例共享原型的屬性，因此改變其中某個實例的屬性會影響到全局，造成屬性污染，例子如下：

function Person(){
}

Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    friends : ["Shelby", "Court"],
    sayName : function () {
        alert(this.name);
    }
};

var person1 = new Person();
var person2 = new Person();

person1.friends.push("Van");

alert(person1.friends);    //"Shelby,Court,Van"
alert(person2.friends);    //"Shelby,Court,Van"
alert(person1.friends === person2.friends);  //true

可見，person1的friends屬性污染了person2的friends屬性。為避免這種情況，引入組合構造函數與原型模式。

組合使用構造函數與原型模式

單一使用原型對象的問題在于所有屬性皆共享，若不想共享某屬性，則可放入構造函數中。

function Person(name, age, job){
   this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Boy next door", "Deep dark fantasy"];
}

Person.prototype = {
    constructor: Person,
    sayName : function () {
        alert(this.name);
    }
};

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");

alert(person1.friends);    //"Shelby,Court,Van"
alert(person2.friends);    //"Shelby,Court"
alert(person1.friends === person2.friends);  //false
alert(person1.sayName === person2.sayName);  //true

云服務器 GPU云服務器深入理解javascript 深入理解系列深入理解linux 深入理解webrtc

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

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

深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
由ES規范學JavaScript(二)：深入理解“連等賦值”問題

摘要：有這樣一個熱門問題其實這個問題很好理解，關鍵要弄清下面兩個知識點引擎對賦值表達式的處理過程賦值運算的右結合性一賦值表達式形如的表達式稱為賦值表達式。賦值表達式是右結合的。有這樣一個熱門問題： var a = {n: 1}; var b = a; a.x = a = {n: 2}; alert(a.x); // --> undefined alert(b.x); // --> {n: ...

JasonZhang 2019-08-19 17:18 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規范并可配合使用的寫一個符合規范并可配合使用的理解的工作原理采用回調函數來處理異步編程。 JavaScript怎么使用循環代替(異步)遞歸問題描述在開發過程中，遇到一個需求：在系統初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
深入理解JavaScript執行上下文和執行棧

摘要：執行上下文和執行棧是中關鍵概念之一，是難點之一。理解執行上下文和執行棧同樣有助于理解其他的概念如提升機制作用域和閉包等。函數執行完成，函數的執行上下文出棧，并且被銷毀。前言如果你是一名 JavaScript 開發者，或者想要成為一名 JavaScript 開發者，那么你必須知道 JavaScript 程序內部的執行機制。執行上下文和執行棧是JavaScript中關鍵概念之一，是Ja...

silenceboy 2019-08-23 16:00 評論0 收藏0
深入理解JavaScript執行上下文和執行棧

摘要：執行上下文和執行棧是中關鍵概念之一，是難點之一。理解執行上下文和執行棧同樣有助于理解其他的概念如提升機制作用域和閉包等。函數執行完成，函數的執行上下文出棧，并且被銷毀。前言如果你是一名 JavaScript 開發者，或者想要成為一名 JavaScript 開發者，那么你必須知道 JavaScript 程序內部的執行機制。執行上下文和執行棧是JavaScript中關鍵概念之一，是Ja...

leiyi 2019-08-02 14:34 評論0 收藏0