JavaScript高級程序設(shè)計創(chuàng)建對象方法總結(jié)

dreambei 發(fā)布于2019-08-26 10:41 / 2095人閱讀

摘要：缺點(diǎn)無法通過識別對象，以為都是來自，無法得知來自每次通過創(chuàng)建對象的時候，所有的方法都是一樣的，但是卻存儲了多次，浪費(fèi)資源。所有的方法都是共享的，沒有辦法創(chuàng)建實(shí)例自己的屬性和方法，也沒有辦法像構(gòu)造函數(shù)那樣傳遞參數(shù)。

工廠模式

function Person() {
  var o = new Object();
  o.name = "hanmeimei";
  o.say = function() {
    alert(this.name);
  }
  return o;
}
var person1 = Person();

優(yōu)點(diǎn)：

簡單易懂。

缺點(diǎn)：

無法通過constructor識別對象，以為都是來自O(shè)bject，無法得知來自Person

每次通過Person創(chuàng)建對象的時候，所有的say方法都是一樣的，但是卻存儲了多次，浪費(fèi)資源。

構(gòu)造函數(shù)模式

function Person() {
  this.name = "hanmeimei";
  this.say = function() {
    alert(this.name)
  }
}
var person1 = new Person();

優(yōu)點(diǎn)：

通過constructor或者instanceof可以識別對象實(shí)例的類別

可以通過new 關(guān)鍵字來創(chuàng)建對象實(shí)例，更像OO語言中創(chuàng)建對象實(shí)例

缺點(diǎn)：

多個實(shí)例的say方法都是實(shí)現(xiàn)一樣的效果，但是卻存儲了很多次（兩個對象實(shí)例的say方法是不同的，因?yàn)榇娣诺牡刂凡煌?/p>

注意：

構(gòu)造函數(shù)模式隱試的在最后返回return this 所以在缺少new的情況下，會將屬性和方法添加給全局對象，瀏覽器端就會添給window對象。

也可以根據(jù)return this 的特性調(diào)用call或者apply指定this。這一點(diǎn)在后面的繼承有很大幫助。

原型模式

function Person() {}
Person.prototype.name = "hanmeimei";
Person.prototype.say = function() {
  alert(this.name);
}
Person.prototype.friends = ["lilei"];
var person1 = new Person();

優(yōu)點(diǎn)：

say方法是共享的了，所有的實(shí)例的say方法都指向同一個。

可以動態(tài)的添加原型對象的方法和屬性，并直接反映在對象實(shí)例上。

var person1 = new Person()
Person.prototype.showFriends = function() {
  console.log(this.friends)
}
person1.showFriends()  //["lilei"]

缺點(diǎn)：

1.出現(xiàn)引用的情況下會出現(xiàn)問題具體見下面代碼：

var person1 = new Person();
var person2 = new Person();
person1.friends.push("xiaoming");
console.log(person2.friends)  //["lilei", "xiaoming"]

因?yàn)閖s對引用類型的賦值都是將地址存儲在變量中，所以person1和person2的friends屬性指向的是同一塊存儲區(qū)域。

2.第一次調(diào)用say方法或者name屬性的時候會搜索兩次，第一次是在實(shí)例上尋找say方法，沒有找到就去原型對象(Person.prototype)上找say方法，找到后就會在實(shí)力上添加這些方法or屬性。
3.所有的方法都是共享的，沒有辦法創(chuàng)建實(shí)例自己的屬性和方法，也沒有辦法像構(gòu)造函數(shù)那樣傳遞參數(shù)。

注意：

優(yōu)點(diǎn)②中存在一個問題就是直接通過對象字面量給Person.prototype進(jìn)行賦值的時候會導(dǎo)致constructor改變，所以需要手動設(shè)置，其次就是通過對象字面量給Person.prototype進(jìn)行賦值，會無法作用在之前創(chuàng)建的對象實(shí)例上

    var person1 = new Person()
    Person.prototype = {
        name: "hanmeimei2",
          setName: function(name){
          this.name = name
          }
    }
    person1.setName()   //Uncaught TypeError: person1.set is not a function(…)

這是因?yàn)閷ο髮?shí)例和對象原型直接是通過一個指針鏈接的，這個指針是一個內(nèi)部屬性[[Prototype]]，可以通過__proto__訪問。我們通過對象字面量修改了Person.prototype指向的地址，然而對象實(shí)例的__proto__，并沒有跟著一起更新，所以這就導(dǎo)致，實(shí)例還訪問著原來的Person.prototype，所以建議不要通過這種方式去改變Person.prototype屬性

動態(tài)原型模式

function Person(name) {
  this.name = name
  if(typeof this.say != "function") {
    Person.prototype.say = function(
    alert(this.name)
  }
}
var friend = new Person("jjc")
friend.say()

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

function Person(name) {
  this.name = name
  this.friends = ["lilei"]
}
Person.prototype.say = function() {
  console.log(this.name)
}
var person1 = new Person("hanmeimei")
person1.say() //hanmeimei

優(yōu)點(diǎn)：

解決了原型模式對于引用對象的缺點(diǎn)

解決了原型模式?jīng)]有辦法傳遞參數(shù)的缺點(diǎn)

解決了構(gòu)造函數(shù)模式不能共享方法的缺點(diǎn)

缺點(diǎn)：

沒寫到一起，封裝性不強(qiáng)

寄生構(gòu)造函數(shù)模式

function Person(name) {
  var o = new Object()
  o.name = name
  o.say = function() {
    alert(this.name)
  }
  return o
}
var peron1 = new Person("hanmeimei")

穩(wěn)妥構(gòu)造模式

function Person(name) {
  var o = new Object()
  o.say = function() {
    alert(name)
  }
}
var person1 = new Person("hanmeimei");
person1.name  // undefined
person1.say() //hanmeimei

優(yōu)點(diǎn)：

安全，那么好像成為了私有變量，只能通過say方法去訪問

GPU云服務(wù)器云服務(wù)器高級javascript程序設(shè)計 javascript高級程序設(shè)計 javascript高級程序 javascript對象方法

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

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

發(fā)表評論

登陸后可評論

0條評論

dreambei

男|高級講師

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

TA的文章

hostwinks：印度vps云主機(jī)5折優(yōu)惠,月付$2.99起;印度獨(dú)立服務(wù)器9折優(yōu)惠,月付$36起

閱讀 1670·2021-11-23 10:07
隱藏火狐和谷歌瀏覽器滾動條

閱讀 2667·2019-08-30 11:10
2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫

閱讀 2850·2019-08-29 17:08
【VUE入門】父組件給子組件傳值

閱讀 1792·2019-08-29 15:42
設(shè)計師的春天：中文WebFont解決方案Font-Spider(字蛛)

閱讀 3188·2019-08-29 12:57
一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的CSS

閱讀 2406·2019-08-28 18:06
齒輪數(shù)據(jù)接口標(biāo)準(zhǔn)及應(yīng)用前景

閱讀 3555·2019-08-27 10:56
JavaScript設(shè)計模式

閱讀 394·2019-08-26 11:33

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

資訊專欄INFORMATION COLUMN

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

JavaScript高級程序設(shè)計創(chuàng)建對象方法總結(jié)

相關(guān)文章

JavaScript高級程序設(shè)計——原型和原型鏈

**《javascript高級程序設(shè)計》筆記：內(nèi)存與執(zhí)行環(huán)境**

JavaScript高級程序設(shè)計學(xué)習(xí)筆記三（基本語法)

**如何閱讀《JavaScript高級程序設(shè)計》（一）**

**如何閱讀《JavaScript高級程序設(shè)計》（一）**

發(fā)表評論

0條評論

dreambei

男|高級講師

TA的文章

hostwinks：印度vps云主機(jī)5折優(yōu)惠,月付$2.99起;印度獨(dú)立服務(wù)器9折優(yōu)惠,月付$36起

隱藏火狐和谷歌瀏覽器滾動條

2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫

【VUE入門】父組件給子組件傳值

設(shè)計師的春天：中文WebFont解決方案Font-Spider(字蛛)

一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的CSS

齒輪數(shù)據(jù)接口標(biāo)準(zhǔn)及應(yīng)用前景

JavaScript設(shè)計模式

最新活動

資訊專欄INFORMATION COLUMN

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

JavaScript高級程序設(shè)計創(chuàng)建對象方法總結(jié)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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