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

Shimmer 發(fā)布于2019-08-19 17:57 / 491人閱讀

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

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

構(gòu)造函數(shù)模式用于定義實(shí)例屬性，原型模式用于定義方法和共享的屬性。

創(chuàng)建自定義類型的最常見方式，就是組合使用構(gòu)造函數(shù)模式和原型模式。

1.創(chuàng)建對(duì)象

// 組合使用構(gòu)造函數(shù)模式和原型模式
function Person(name, age, job){
     this.name = name;
     this.age = age;
     this.job = job;
     this.friend = ["Jenny", "Court"];
}

Person.prototype = {
     constructor: Person,       //constructor指向Object構(gòu)造函數(shù)，這里要將其constructor恢復(fù)為指向Person構(gòu)造函數(shù)。
     Country: "China",
     showName: function(){
          console.log("name = " + this.name);
     }
}

var p1 = new Person("Mike", 20, "student");
var p2 = new Person("Tom", 23, "Teacher");

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

結(jié)果，每個(gè)實(shí)例都會(huì)有自己的一份實(shí)例屬性的副本，但同時(shí)又共享著對(duì)方法的引用，最大限度地節(jié)省了內(nèi)存。

另外，這種混合模式，還支持向構(gòu)造函數(shù)傳遞參數(shù)。

2.不同之處

看上面的代碼，你會(huì)發(fā)現(xiàn)有個(gè)不同之處：Person.prototype的constructor屬性默認(rèn)是指向Object構(gòu)造函數(shù)。

從何而知？我們來測試一番。

// 組合使用構(gòu)造函數(shù)模式和原型模式
function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friend = ["Jenny", "Court"];
}
// 未使用原型模式前，Person構(gòu)造函數(shù)的原型對(duì)象的constructor指向Person構(gòu)造函數(shù)本身
console.log("Person.prototype.constructor === Person:");
console.log(Person.prototype.constructor === Person);
console.log("-----分割線-----");

Person.prototype = {
    // constructor: Person,        //一般要認(rèn)為設(shè)置，將其constructor恢復(fù)為指向Person構(gòu)造函數(shù)，這里為了演示，就沒設(shè)置。
    Country: "China",
    showName: function(){
        console.log("name = " + this.name);
    }
}

// 使用原型模式，我們將Person.prototype設(shè)置為等于一個(gè)以對(duì)象字面量形式創(chuàng)建的新對(duì)象
// 因此，這里constructor屬性也就變成了新對(duì)象的constructor屬性，指向Object構(gòu)造函數(shù)。
// Person構(gòu)造函數(shù)的原型對(duì)象的constructor指向Object構(gòu)造函數(shù)
console.log("Person.prototype =");
console.log(Person.prototype);
console.log("-----分割線-----");

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

console.log("Person.prototype.__proto__ === Object.prototype:");
console.log(Person.prototype.__proto__ === Object.prototype);

var p1 = new Person("Mike", 20, "student");
var p2 = new Person("Tom", 23, "Teacher");

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

未使用原型模式前，Person構(gòu)造函數(shù)的原型對(duì)象的constructor指向Person構(gòu)造函數(shù)本身。
使用原型模式，我們將Person.prototype設(shè)置為等于一個(gè)以對(duì)象字面量形式創(chuàng)建的新對(duì)象。
因此，這里constructor屬性也就變成了新對(duì)象的constructor屬性，指向Object構(gòu)造函數(shù)。
所以，Person構(gòu)造函數(shù)的原型對(duì)象的constructor指向Object構(gòu)造函數(shù)。

3.觀察Person構(gòu)造函數(shù)涉及到的原型鏈

console.log("Person.prototype=");
console.log(Person.prototype);
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實(shí)例對(duì)象涉及到的原型鏈

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

console.log("p1.__proto__=");
console.log(p1.__proto__);
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("-----分割線-----");

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("-----分割線-----");

原型鏈圖

云服務(wù)器 GPU云服務(wù)器 js 創(chuàng)建對(duì)象安全模式原型模式構(gòu)造函數(shù)模式對(duì)象模式

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

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

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

登陸后可評(píng)論

0條評(píng)論

Shimmer

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

java Activiti 工作流引擎 SSM 框架模塊設(shè)計(jì)方案

閱讀 1438·2021-11-22 15:24
超云（FTLCLOUD）：香港美國高配物理機(jī)首月200元，續(xù)費(fèi)500元/月起

閱讀 2533·2021-10-11 11:06
HostMem：年付$12.99的VPS補(bǔ)貨，洛杉磯CN2 GT線路，適合做站

閱讀 2339·2021-10-09 09:45
針對(duì)工控領(lǐng)域的電子元器件國產(chǎn)化的討論內(nèi)容記錄及國產(chǎn)FPGA廠家介紹

閱讀 2538·2021-09-09 09:33
前端面經(jīng)知識(shí)點(diǎn)總結(jié)1

閱讀 645·2019-08-30 15:53
CSS哲學(xué)偽命題

閱讀 1449·2019-08-30 12:48
【翻譯】Designing Websites for iPhone X

閱讀 689·2019-08-29 13:47
前端面試題及答案 - JS篇

閱讀 512·2019-08-26 18:27

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

相關(guān)文章

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

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

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

js知識(shí)梳理4.繼承的模式探究

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

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

0條評(píng)論

Shimmer

男|高級(jí)講師

TA的文章

java Activiti 工作流引擎 SSM 框架模塊設(shè)計(jì)方案

超云（FTLCLOUD）：香港美國高配物理機(jī)首月200元，續(xù)費(fèi)500元/月起

HostMem：年付$12.99的VPS補(bǔ)貨，洛杉磯CN2 GT線路，適合做站

針對(duì)工控領(lǐng)域的電子元器件國產(chǎn)化的討論內(nèi)容記錄及國產(chǎn)FPGA廠家介紹

前端面經(jīng)知識(shí)點(diǎn)總結(jié)1

CSS哲學(xué)偽命題

【翻譯】Designing Websites for iPhone X

前端面試題及答案 - JS篇

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！