自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript創(chuàng)建對(duì)象的七種方式

開(kāi)發(fā) 后端
JavaScript創(chuàng)建對(duì)象的方式有很多,通過(guò)Object構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個(gè)對(duì)象,顯然這兩種方式會(huì)產(chǎn)生大量的重復(fù)代碼,并不適合量產(chǎn)。接下來(lái)介紹七種非常經(jīng)典的創(chuàng)建對(duì)象的方式,他們也各有優(yōu)缺點(diǎn)。

JavaScript創(chuàng)建對(duì)象的方式有很多,通過(guò)Object構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個(gè)對(duì)象,顯然這兩種方式會(huì)產(chǎn)生大量的重復(fù)代碼,并不適合量產(chǎn)。接下來(lái)介紹七種非常經(jīng)典的創(chuàng)建對(duì)象的方式,他們也各有優(yōu)缺點(diǎn)。

[[194020]]

工廠模式

 

  1. function createPerson(name, job) { 
  2.   var o = new Object() 
  3.   o.name = name 
  4.   o.job = job 
  5.   o.sayName = function() { 
  6.     console.log(this.name
  7.   } 
  8.   return o 
  9. var person1 = createPerson('Jiang''student'
  10. var person2 = createPerson('X''Doctor'

可以無(wú)數(shù)次調(diào)用這個(gè)工廠函數(shù),每次都會(huì)返回一個(gè)包含兩個(gè)屬性和一個(gè)方法的對(duì)象

工廠模式雖然解決了創(chuàng)建多個(gè)相似對(duì)象的問(wèn)題,但是沒(méi)有解決對(duì)象識(shí)別問(wèn)題,即不能知道一個(gè)對(duì)象的類型

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

 

  1. function Person(name, job) { 
  2.   this.name = name 
  3.   this.job = job 
  4.   this.sayName = function() { 
  5.     console.log(this.name
  6.   } 
  7. var person1 = new Person('Jiang''student'
  8. var person2 = new Person('X''Doctor'

沒(méi)有顯示的創(chuàng)建對(duì)象,使用new來(lái)調(diào)用這個(gè)構(gòu)造函數(shù),使用new后會(huì)自動(dòng)執(zhí)行如下操作

  • 創(chuàng)建一個(gè)新對(duì)象
  • 這個(gè)新對(duì)象會(huì)被執(zhí)行[[prototype]]鏈接
  • 這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的this
  • 返回這個(gè)對(duì)象

使用這個(gè)方式創(chuàng)建對(duì)象可以檢測(cè)對(duì)象類型

 

  1. person1 instanceof Object // true 
  2. person1 instanceof Person //true 

但是使用構(gòu)造函數(shù)創(chuàng)建對(duì)象,每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一次

原型模式

 

  1. function Person() { 
  2. Person.prototype.name = 'Jiang' 
  3. Person.prototype.job = 'student' 
  4. Person.prototype.sayName = function() { 
  5.   console.log(this.name
  6. var person1 = new Person() 

將信息直接添加到原型對(duì)象上。使用原型的好處是可以讓所有的實(shí)例對(duì)象共享它所包含的屬性和方法,不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例信息。

更簡(jiǎn)單的寫(xiě)法

 

  1. function Person() { 
  2. Person.prototype = { 
  3.   name'jiang'
  4.   job: 'student'
  5.   sayName: function() { 
  6.     console.log(this.name
  7.   } 
  8. var person1 = new Person() 

將Person.prototype設(shè)置為等于一個(gè)以對(duì)象字面量形式創(chuàng)建的對(duì)象,但是會(huì)導(dǎo)致.constructor不在指向Person了。

使用這種方式,完全重寫(xiě)了默認(rèn)的Person.prototype對(duì)象,因此 .constructor也不會(huì)存在這里

  1. Person.prototype.constructor === Person // false 

如果需要這個(gè)屬性的話,可以手動(dòng)添加

 

  1. function Person() { 
  2. Person.prototype = { 
  3.   constructor:Person 
  4.   name'jiang'
  5.   job: 'student'
  6.   sayName: function() { 
  7.     console.log(this.name
  8.   } 

不過(guò)這種方式還是不夠好,應(yīng)為constructor屬性默認(rèn)是不可枚舉的,這樣直接設(shè)置,它將是可枚舉的。所以可以時(shí)候,Object.defineProperty方法

 

  1. Object.defineProperty(Person.prototype, 'constructor', { 
  2.   enumerable: false
  3.   value: Person 
  4. }) 

缺點(diǎn)

使用原型,所有的屬性都將被共享,這是個(gè)很大的優(yōu)點(diǎn),同樣會(huì)帶來(lái)一些缺點(diǎn)

原型中所有屬性實(shí)例是被很多實(shí)例共享的,這種共享對(duì)于函數(shù)非常合適。對(duì)于那些包含基本值的屬性也勉強(qiáng)可以,畢竟實(shí)例屬性可以屏蔽原型屬性。但是引用類型值,就會(huì)出現(xiàn)問(wèn)題了

 

  1. function Person() { 
  2. Person.prototype = { 
  3.   name'jiang'
  4.   friends: ['Shelby''Court'
  5. var person1 = new Person() 
  6. var person2 = new Person() 
  7. person1.friends.push('Van'
  8. console.log(person1.friends) //["Shelby""Court""Van"
  9. console.log(person2.friends) //["Shelby""Court""Van"
  10. console.log(person1.friends === person2.friends) // true 

friends存在與原型中,實(shí)例person1和person2指向同一個(gè)原型,person1修改了引用的數(shù)組,也會(huì)反應(yīng)到實(shí)例person2中

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

這是使用最為廣泛、認(rèn)同度***的一種創(chuàng)建自定義類型的方法。它可以解決上面那些模式的缺點(diǎn)

使用此模式可以讓每個(gè)實(shí)例都會(huì)有自己的一份實(shí)例屬性副本,但同時(shí)又共享著對(duì)方法的引用

這樣的話,即使實(shí)例屬性修改引用類型的值,也不會(huì)影響其他實(shí)例的屬性值了

 

  1. function Person(name) { 
  2.   this.name = name 
  3.   this.friends = ['Shelby''Court'
  4. Person.prototype.sayName = function() { 
  5.   console.log(this.name
  6. var person1 = new Person() 
  7. var person2 = new Person() 
  8. person1.friends.push('Van'
  9. console.log(person1.friends)  //["Shelby""Court""Van"
  10. console.log(person2.friends) // ["Shelby""Court"
  11. console.log(person1.friends === person2.friends) //false 

動(dòng)態(tài)原型模式

動(dòng)態(tài)原型模式將所有信息都封裝在了構(gòu)造函數(shù)中,初始化的時(shí)候,通過(guò)檢測(cè)某個(gè)應(yīng)該存在的方法時(shí)候有效,來(lái)決定是否需要初始化原型

 

  1. function Person(name, job) { 
  2.   // 屬性 
  3.   this.name = name 
  4.   this.job = job 
  5.  
  6.   // 方法 
  7.   if(typeof this.sayName !== 'function') { 
  8.     Person.prototype.sayName = function() { 
  9.        console.log(this.name
  10.     } 
  11.   } 
  12.  
  13. var person1 = new Person('Jiang''Student'
  14. person1.sayName() 

只有在sayName方法不存在的時(shí)候,才會(huì)將它添加到原型中。這段代碼只會(huì)初次調(diào)用構(gòu)造函數(shù)的時(shí)候才會(huì)執(zhí)行。

此后原型已經(jīng)完成初始化,不需要在做什么修改了

這里對(duì)原型所做的修改,能夠立即在所有實(shí)例中得到反映

其次,if語(yǔ)句檢查的可以是初始化之后應(yīng)該存在的任何屬性或方法,所以不必用一大堆的if語(yǔ)句檢查每一個(gè)屬性和方法,只要檢查一個(gè)就行

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

這種模式的基本思想就是創(chuàng)建一個(gè)函數(shù),該函數(shù)的作用僅僅是封裝創(chuàng)建對(duì)象的代碼,然后再返回新建的對(duì)象

 

  1. function Person(name, job) { 
  2.   var o = new Object() 
  3.   o.name = name 
  4.   o.job = job 
  5.   o.sayName = function() { 
  6.     console.log(this.name
  7.   } 
  8.   return o 
  9. var person1 = new Person('Jiang''student'
  10. person1.sayName() 

這個(gè)模式,除了使用new操作符并把使用的包裝函數(shù)叫做構(gòu)造函數(shù)之外,和工廠模式幾乎一樣

構(gòu)造函數(shù)如果不返回對(duì)象,默認(rèn)也會(huì)返回一個(gè)新的對(duì)象,通過(guò)在構(gòu)造函數(shù)的末尾添加一個(gè)return語(yǔ)句,可以重寫(xiě)調(diào)用構(gòu)造函數(shù)時(shí)返回的值

穩(wěn)妥構(gòu)造函數(shù)模式

首先明白穩(wěn)妥對(duì)象指的是沒(méi)有公共屬性,而且其方法也不引用this。

穩(wěn)妥對(duì)象最適合在一些安全環(huán)境中(這些環(huán)境會(huì)禁止使用this和new),或防止數(shù)據(jù)被其他應(yīng)用程序改動(dòng)時(shí)使用

穩(wěn)妥構(gòu)造函數(shù)模式和寄生模式類似,有兩點(diǎn)不同:一是創(chuàng)建對(duì)象的實(shí)例方法不引用this,而是不使用new操作符調(diào)用構(gòu)造函數(shù)

 

  1. function Person(name, job) { 
  2.   var o = new Object() 
  3.   o.name = name 
  4.   o.job = job 
  5.   o.sayName = function() { 
  6.     console.log(name
  7.   } 
  8.   return o 
  9. var person1 = Person('Jiang''student'
  10. person1.sayName() 

和寄生構(gòu)造函數(shù)模式一樣,這樣創(chuàng)建出來(lái)的對(duì)象與構(gòu)造函數(shù)之間沒(méi)有什么關(guān)系,instanceof操作符對(duì)他們沒(méi)有意義

責(zé)任編輯:未麗燕 來(lái)源: Xuthus Blog
相關(guān)推薦

2025-01-21 08:00:00

限流微服務(wù)算法

2025-01-15 10:46:23

開(kāi)發(fā)JavaScript集合

2018-06-10 16:31:12

2022-07-01 08:00:44

異步編程FutureTask

2022-12-23 10:55:09

CIO方式團(tuán)隊(duì)

2022-05-18 09:01:31

JavaScriptEvalErrorURIError

2020-01-16 12:20:03

人工智能AI稅收

2021-07-23 17:15:12

物聯(lián)網(wǎng)IOT

2022-03-18 14:33:22

限流算法微服務(wù)

2023-01-03 13:43:55

團(tuán)隊(duì)首席信息官

2023-09-11 14:26:44

智能技術(shù)人工智能

2023-07-06 10:36:51

人工智能

2023-09-07 10:39:25

AI供應(yīng)鏈

2022-05-10 08:08:01

find命令Linux

2020-01-14 08:00:00

.NET緩存編程語(yǔ)言

2022-06-09 18:09:59

農(nóng)業(yè)物聯(lián)網(wǎng)IOT

2023-10-19 17:30:50

2024-06-11 14:57:00

2010-06-08 09:39:40

UML圖

2010-10-15 10:02:01

Mysql表類型
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)