国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS創(chuàng)建對象模式及其對象原型鏈探究（四）：原型模式

ruicbAndroid / 3416人閱讀

摘要：原型模式定義構(gòu)造函數(shù)，在構(gòu)造函數(shù)的原型對象中定義對象的屬性和方法，并通過構(gòu)造函數(shù)創(chuàng)建對象。，屬性存在于實例對象中，屬性不存在于實例對象中分割線操作符會在通過對象能夠訪問給定屬性時返回，無論該屬性是存在于實例中還是原型中。

原型模式 
定義構(gòu)造函數(shù)，在構(gòu)造函數(shù)的原型對象中定義對象的屬性和方法，并通過構(gòu)造函數(shù)創(chuàng)建對象。
1.創(chuàng)建對象 
function Person(){};

Person.prototype.name = "Mike";
Person.prototype.age = 20;
Person.prototype.job = "student";

Person.prototype.showName = function(){
    console.log("name = " + this.name);
};

var p1 = new Person();
var p2 = new Person();

console.log(p1);
console.log(p2);

2.探究原型對象

使用原型對象的好處是可以讓所有對象實例共享它包含的屬性和方法，即p1和p2訪問的都是同一組屬性和同一個showName()函數(shù)。

但改變原型對象上的屬性時，所有實例對象上對應(yīng)的屬性也同時改變。

Person.prototype.job = "teacher";
Person.prototype.showJob = function(){
    console.log("job = " + this.job);
};

p1.showJob();
p2.showJob();

console.log("p1.showJob === p2.showJob:");
console.log(p1.showJob === p2.showJob);
console.log("-----分割線-----");

當(dāng)代碼讀取對象的某個屬性時，都會執(zhí)行至少一次搜索。搜索首先從實例對象開始，若在實例對象中搜索到了匹配的屬性，則返回該屬性的值；若無，在搜索該實例對象的__proto__指針指向的原型對象，若在原型對象中搜索到了匹配的屬性，則返回該屬性的值；若無，則輸出undefined。

p1.country = "China";
console.log("p1.country=");    
console.log(p1.country);    //China
console.log("p2.country=");    
console.log(p2.country);    //Undefined
console.log("-----分割線-----");

Person.prototype.country = "USA";
console.log("p1.country=");    
console.log(p1.country);    //搜索先匹配到了實例對象p1上的country屬性，返回值為"China"
console.log("p2.country=");    
console.log(p2.country);    //第一次搜索匹配不到實例對象p2上的country屬性，執(zhí)行第二次搜索，匹配到原型對象上的country屬性，返回值為"USA"
console.log("-----分割線-----");

所以，我們無法通過修改實例對象來重寫原型中的屬性。

當(dāng)為實例對象添加一個屬性時，這個屬性就會屏蔽原型對象中保存的同名屬性，即便我們將其設(shè)置為null，也只會在實例中設(shè)置這個屬性，而不會恢復(fù)其指向原型的連接。不過，使用delete操作符可以完全刪除實例對象的屬性。

p1.country = null;
console.log("p1.country=");    
console.log(p1.country);    //null
console.log("p2.country=");    
console.log(p2.country);    //USA
console.log("-----分割線-----");

// delete操作符可以完全刪除實例屬性，從而讓我們能夠重新訪問原型中的屬性
delete p1.country;
console.log("p1.country=");
console.log(p1.country);
console.log("p2.country=");
console.log(p2.country);
console.log("-----分割線-----");

我們可以通過hasOwnProperty()方法檢測一個屬性是存在于實例中，還是原型中。這個方法只在給定屬性存在于實例對象中，才會返回true。

另外，in操作符會在通過對象能夠訪問給定屬性時返回true，無論這個屬性是存在于實例中還是原型中。

// 先給p1實例對象定義country屬性
p1.country = "China";

// hasOwnProperty()方法可以檢測一個屬性是存在于實例中，還是存在于原型中。
// 只在給定屬性存在于對象實例中時，才會返回true。
// 此方法繼承自O(shè)bject。
console.log("p1.hasOwnProperty(country):");    
console.log(p1.hasOwnProperty("country"));    //true，country屬性存在于實例對象p1中
console.log("p2.hasOwnProperty(country):");    
console.log(p2.hasOwnProperty("country"));    //false，country屬性不存在于實例對象p2中
console.log("-----分割線-----");

// in操作符會在通過對象能夠訪問給定屬性時返回true，無論該屬性是存在于實例中還是原型中。
console.log("country in p1:");
console.log("country" in p1);    //true
console.log("country in p2:");
console.log("country" in p2);    //true
console.log("-----分割線-----");

3.觀察Person構(gòu)造函數(shù)涉及到的原型鏈** 
console.log("Person.prototype=");
console.log(Person.prototype);
console.log("Person.prototype === Function.prototype;");    
console.log(Person.prototype === Function.prototype);    //false
console.log("-----分割線-----");

console.log("Person.prototype.constructor === Person:");    //true
console.log(Person.prototype.constructor === Person);    //true
console.log("-----分割線-----");

console.log("Person.prototype.__proto__ === Object.prototype:");    //true
console.log(Person.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");

console.log("Person.__proto__=");
console.log(Person.__proto__);
console.log("Person.__proto__ === Function.prototype:");
console.log(Person.__proto__ === Function.prototype);    //true
console.log("-----分割線-----");

4.觀察p1實例對象涉及到的原型鏈 
console.log("p1.prototype=");
console.log(p1.prototype);
console.log("-----分割線-----");

console.log("p1.__proto__=");
console.log(p1.__proto__);
console.log("p1.__proto__ === Person:");
console.log(p1.__proto__ === Person);        //false
console.log("p1.__proto__ === Person.prototype:");
console.log(p1.__proto__ === Person.prototype);        //true
console.log("-----分割線-----");

console.log("p1.__proto__.constructor === Person:");
console.log(p1.__proto__.constructor === Person);
console.log("-----分割線-----");

console.log("p1.__proto__.__proto__=");
console.log(p1.__proto__.__proto__);
console.log("p1.__proto__.__proto__ === Object.prototype:");
console.log(p1.__proto__.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");

5.觀察下p1.showName屬性引用的函數(shù) 
console.log("p1.showName.prototype=");
console.log(p1.showName.prototype);

console.log("p1.showName.prototype  === Function.prototype:");    
console.log(p1.showName.prototype  === Function.prototype);    //false
console.log("-----分割線-----");

console.log("p1.showName.prototype.constructor=");
console.log(p1.showName.prototype.constructor);
console.log("-----分割線-----");

console.log("p1.showName.prototype.__proto__=");
console.log(p1.showName.prototype.__proto__);

console.log("p1.showName.prototype.__proto__ === Object.prototype:");    
console.log(p1.showName.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");

console.log("p1.showName.__proto__=");
console.log(p1.showName.__proto__);
console.log("p1.showName.__proto__ === Function.prototype：");    
console.log(p1.showName.__proto__ === Function.prototype);    //true
console.log("-----分割線-----");

原型鏈圖

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79012.html

相關(guān)文章

  • JS創(chuàng)建對象模式及其對象原型鏈探究（一）：Object模式

    摘要：對象是由構(gòu)造函數(shù)創(chuàng)建而成的，所以它的指向原型鏈圖對象的原型鏈圖對象屬性引用的匿名函數(shù)的原型鏈圖 Object模式 創(chuàng)建一個Object實例，再為其添加屬性和方法。 這是創(chuàng)建自定義對象最簡單的方式。 1.創(chuàng)建對象 // 創(chuàng)建person對象 var person = new Object(); person.name = Mike; person.age = 20; person.jo...

    李義 評論0 收藏0

  • JS創(chuàng)建對象模式及其對象原型鏈探究（五）：組合使用構(gòu)造函數(shù)模式和原型模式

    摘要：組合使用構(gòu)造函數(shù)模式和原型模式構(gòu)造函數(shù)模式用于定義實例屬性，原型模式用于定義方法和共享的屬性。創(chuàng)建對象組合使用構(gòu)造函數(shù)模式和原型模式指向構(gòu)造函數(shù)，這里要將其恢復(fù)為指向構(gòu)造函數(shù)。另外，這種混合模式，還支持向構(gòu)造函數(shù)傳遞參數(shù)。 組合使用構(gòu)造函數(shù)模式和原型模式 構(gòu)造函數(shù)模式用于定義實例屬性，原型模式用于定義方法和共享的屬性。 創(chuàng)建自定義類型的最常見方式，就是組合使用構(gòu)造函數(shù)模式和原型模式。 ...

    Shimmer 評論0 收藏0

  • JS創(chuàng)建對象模式及其對象原型鏈探究（二）：工廠模式

    摘要：工廠模式用函數(shù)來封裝，以特定接口創(chuàng)建對象的細(xì)節(jié)。缺點不能知道對象識別的問題對象的類型不知道。復(fù)雜的工廠模式定義是將其成員對象的實列化推遲到子類中，子類可以重寫父類接口方法以便創(chuàng)建的時候指定自己的對象類型。 工廠模式 用函數(shù)來封裝，以特定接口創(chuàng)建對象的細(xì)節(jié)。 1.創(chuàng)建對象 function createPerson(name, age, job){ var o = new Obj...

    smartlion 評論0 收藏0

  • JS創(chuàng)建對象模式及其對象原型鏈探究（三）：構(gòu)造函數(shù)模式

    摘要：創(chuàng)建對象與工廠模式的區(qū)別沒有顯示地創(chuàng)建對象直接將方法和屬性付給了對象沒有語句構(gòu)造函數(shù)應(yīng)該始終以一個大寫字母開頭。創(chuàng)建構(gòu)造函數(shù)的實例，必須使用操作符。 構(gòu)造函數(shù)模式 ECMAScript中的構(gòu)造函數(shù)可用來創(chuàng)建特定類型的對象，像Object和Array這樣的原生構(gòu)造函數(shù)。也可以創(chuàng)建自定義的構(gòu)造函數(shù)，從而定義自定義對象類型的屬性和方法。 1.創(chuàng)建對象 function Person(name...

    Martin91 評論0 收藏0

  • js知識梳理4.繼承的模式探究

    摘要：而且在超類型的原型中定義的方法，對子類型而言也是不可見的，結(jié)果所有類型都只能使用構(gòu)造函數(shù)模式。在主要考慮對象而不是自定義類型和構(gòu)造函數(shù)的情況下，這個模式也不錯。 寫在前面 注：這個系列是本人對js知識的一些梳理，其中不少內(nèi)容來自書籍:Javascript高級程序設(shè)計第三版和JavaScript權(quán)威指南第六版，感謝它們的作者和譯者。有發(fā)現(xiàn)什么問題的，歡迎留言指出。 1.原型鏈 將原型鏈作...

    wenshi11019 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<