關(guān)于JS的new

通常我們創(chuàng)建一個(gè)自定義對(duì)象可以使用以下兩種方法

  1. 使用對(duì)象字面量
var obj = {name: 'nany',  sex: 'female', run: function(){ /* do something  */ }}
  1. 使用構(gòu)造函數(shù)
var obj = new Object()
obj.name = 'nany'
obj.sex = 'female'

以第一種方法為例(為啥不選第二種?就不選第二種?。?dāng)我們需要?jiǎng)?chuàng)建100個(gè)有run方法的對(duì)象時(shí),那么我們需要這樣寫(xiě):

var person1 = {
  name: 'nany',
  sex: 'female', 
  run: function(){ 
    // do something  
  }
}
var person2 = {
  name: 'lily',
  sex: 'female', 
  run: function(){ 
    // do something  
  }
}
......
var person100 = {
  name: 'jack',
  sex: 'male', 
  run: function(){ 
    // do something  
  }
}

是不是感覺(jué)沒(méi)有愛(ài)了?我只有一個(gè)run方法想和你一樣竟然要寫(xiě)這么多代碼,不能忍,為了解決這個(gè)寫(xiě)很多遍重復(fù)代碼的問(wèn)題,機(jī)智的程序員提出了一種設(shè)計(jì)模式:工廠(chǎng)模式

function createPerson(name, sex){
  var person = new Object()
  person.name = name
  person.sex = sex
  person.run = function(){
     // do something  
  }
  return person
}
var person1 = createPerson('nany', 'female')
var person2 = createPerson('jack', 'male')

現(xiàn)在你總不會(huì)說(shuō)代碼多又重復(fù)了吧?每個(gè)有不同的屬性值又都有run方法,JS之父看我們又是寫(xiě)var 又是return的,為了讓我們?cè)偕傩仔写a,給我們提供了new這個(gè)關(guān)鍵字,同時(shí)我們使用了this

function Person(name, sex){
  this.name = name
  this.sex = sex
  this.run = function(){
     // do something  
  }
}
var person1 = new Person('nany', 'female')
var person2 = new Person('jack', 'male')

在這里new幫我們做了如下的事情:

  1. 不用顯示的創(chuàng)建對(duì)象,因?yàn)?new 會(huì)幫你做(使用「this」就可以訪(fǎng)問(wèn)到臨時(shí)對(duì)象);
  2. 直接將屬性和方法賦給了this對(duì)象
  3. 不用 return 對(duì)象,因?yàn)?new 會(huì)幫你做;

這個(gè)模式被稱(chēng)為構(gòu)造函數(shù)模式,按照慣例,構(gòu)造函數(shù)始終都應(yīng)該以一個(gè)大寫(xiě)字母開(kāi)頭,并且使用new操作符來(lái)創(chuàng)建構(gòu)造函數(shù)的實(shí)例。

那么問(wèn)題又來(lái)了,我們不需要每次創(chuàng)建對(duì)象的時(shí)候再重寫(xiě)run方法,因?yàn)槲覀儼l(fā)現(xiàn)
person1.run === person2.run // false,我們想要person1的run和person2的run是一樣的,這樣就沒(méi)必要每次創(chuàng)建person的時(shí)候重復(fù)創(chuàng)建run方法了,而用原型鏈可以解決這個(gè)問(wèn)題

Person.prototype = {       
  run: function(){
    // do something
  }
}

注意:如果重新給Person.prototype賦值,那么你的 constructor 屬性就沒(méi)了,所以需要這么寫(xiě)

Person.prototype = {
  constructor: Person
  run: function(){
    // do something
  }
}

或者這么寫(xiě)

Person.prototype.run = function(){
  // do something
}

至此,整個(gè)代碼是這樣的

function Person(name, sex){
  this.name = name
  this.sex = sex
}
Person.prototype.run = function(){
  // do something
}
var person1 = new Person('nany', 'female')
var person2 = new Person('jack', 'male')

這個(gè)模式被稱(chēng)為原型模式,在這里new 總共幫我們做了如下的事情:

  1. 不用顯示的創(chuàng)建對(duì)象,因?yàn)?new 會(huì)幫你做(使用「this」就可以訪(fǎng)問(wèn)到臨時(shí)對(duì)象);
  2. 直接將屬性和方法賦給了this對(duì)象;
  3. 不用 return 對(duì)象,因?yàn)?new 會(huì)幫你做;
  4. 不用綁定原型,new指定原型的名字為 prototype;

參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,551評(píng)論 19 139
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法,類(lèi)相關(guān)的語(yǔ)法,內(nèi)部類(lèi)的語(yǔ)法,繼承相關(guān)的語(yǔ)法,異常的語(yǔ)法,線(xiàn)程的語(yǔ)...
    子非魚(yú)_t_閱讀 34,677評(píng)論 18 399
  • 工廠(chǎng)模式類(lèi)似于現(xiàn)實(shí)生活中的工廠(chǎng)可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠(chǎng)模式。簡(jiǎn)單...
    舟漁行舟閱讀 8,127評(píng)論 2 17
  • 套路深深深幾許,十面埋伏,教訓(xùn)無(wú)從數(shù)。城漂蝸居拼搏處,霾重不見(jiàn)搬磚路。 年少輕狂三年度,淚對(duì)空樽,無(wú)奈留村住。...
    魯盾閱讀 889評(píng)論 0 4
  • 1.什么是變量:指代在內(nèi)存開(kāi)辟的存儲(chǔ)空間,用來(lái)存放數(shù)據(jù)。栗子:int a = 5(a 為變量) 2.一條語(yǔ)句聲明多...
    Bruin_熊先森閱讀 740評(píng)論 0 0

友情鏈接更多精彩內(nèi)容