成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript對(duì)象的深入理解（二）

tommego / 399人閱讀

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

之前提到，構(gòu)造函數(shù)方法創(chuàng)建對(duì)象存在著方法不共享的問題，因此引申出了原型模式創(chuàng)建對(duì)象

原型模式 
原型模式旨在創(chuàng)建一個(gè)模版對(duì)象，該對(duì)象的所有屬性和方法被其實(shí)例所共享。
原型的概念

不同于構(gòu)造函數(shù)模式創(chuàng)建對(duì)象只能單級(jí)即成，得益于原型鏈的概念，原型模式可實(shí)現(xiàn)類似其他OOP語言的多級(jí)繼承。

原型鏈：一系列有繼承關(guān)系的函數(shù)（對(duì)象）中[[prototype]]屬性自底向上的指向

先給一個(gè)例子：

function Person() {
    
}

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

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

該例子中各對(duì)象的關(guān)系如下

//

每一個(gè)函數(shù)（對(duì)象）都可以視為一個(gè)模版，向上看，該對(duì)象的[[prototype]]

創(chuàng)建原型對(duì)象 
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

要點(diǎn)

先命名一個(gè)空函數(shù)

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

為了constructor屬性的正確指向，應(yīng)先把constructor指向該對(duì)象

原型對(duì)象的問題

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

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屬性。為避免這種情況，引入組合構(gòu)造函數(shù)與原型模式。

組合使用構(gòu)造函數(shù)與原型模式

單一使用原型對(duì)象的問題在于所有屬性皆共享，若不想共享某屬性，則可放入構(gòu)造函數(shù)中。

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

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

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

相關(guān)文章

  • 深入理解JavaScript

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

    myeveryheart 評(píng)論0 收藏0

  • 由ES規(guī)范學(xué)JavaScript(二)：深入理解“連等賦值”問題

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

    JasonZhang 評(píng)論0 收藏0

  • JavaScript 異步

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

    tuniutech 評(píng)論0 收藏0

  • 深入理解JavaScript執(zhí)行上下文和執(zhí)行棧

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

    silenceboy 評(píng)論0 收藏0

  • 深入理解JavaScript執(zhí)行上下文和執(zhí)行棧

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

    leiyi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

tommego

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<