Web前端工程師應(yīng)該知道的JavaScript創(chuàng)建對(duì)象的方式

今天小編要跟大家分享的文章是關(guān)于Web前端工程師應(yīng)該知道的JavaScript

創(chuàng)新互聯(lián)長(zhǎng)期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為宜賓企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)，宜賓網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

1、工廠模式

functioncreatePerson(name,job){varo=newObject()

o.name=name

o.job=job

o.sayName=function(){console.log(this.name)

}returno

}varperson1=createPerson('Jiang','student')varperson2=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ì)象的類(lèi)型

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

functionPerson(name,job){this.name=namethis.job=jobthis.sayName=function(){console.log(this.name)

}

}varperson1=newPerson('Jiang','student')varperson2=newPerson('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ì)象類(lèi)型

person1instanceofObject//trueperson1instanceofPerson//true

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

3、原型模式

functionPerson(){

}

Person.prototype.name='Jiang'Person.prototype.job='student'Person.prototype.sayName=function(){console.log(this.name)

}varperson1=newPerson()

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

原型是一個(gè)非常重要的概念，在一篇文章看懂proto和prototype的關(guān)系及區(qū)別中講的非常詳細(xì)

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

functionPerson(){

}

Person.prototype={

ame:'jiang',

job:'student',

sayName:function(){console.log(this.name)

}

}varperson1=newPerson()

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

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

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

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

functionPerson(){

}

Person.prototype={

constructor：Person

ame:'jiang',

job:'student',

sayName:function(){

console.log(this.name)

}

}

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

Object.defineProperty(Person.prototype,'constructor',{

enumerable:false,

value:Person

})

缺點(diǎn)

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

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

functionPerson(){

}

Person.prototype={

ame:'jiang',

friends:['Shelby','Court']

}varperson1=newPerson()varperson2=newPerson()

person1.friends.push('Van')console.log(person1.friends)//["Shelby","Court","Van"]console.log(person2.friends)//["Shelby","Court","Van"]console.log(person1.friends===person2.friends)//true

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

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

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

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

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

functionPerson(name){this.name=namethis.friends=['Shelby','Court']

}

Person.prototype.sayName=function(){console.log(this.name)

}varperson1=newPerson()varperson2=newPerson()

person1.friends.push('Van')console.log(person1.friends)//["Shelby","Court","Van"]console.log(person2.friends)//["Shelby","Court"]console.log(person1.friends===person2.friends)//false

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

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

functionPerson(name,job){//屬性

this.name=namethis.job=job//方法

if(typeofthis.sayName!=='function'){

Person.prototype.sayName=function(){console.log(this.name)

}

}

}varperson1=newPerson('Jiang','Student')

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è)就行

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

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

functionPerson(name,job){varo=newObject()

o.name=name

o.job=job

o.sayName=function(){console.log(this.name)

}returno

}varperson1=newPerson('Jiang','student')

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í)返回的值

7、穩(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ù)模式和寄生模式類(lèi)似，有兩點(diǎn)不同:一是創(chuàng)建對(duì)象的實(shí)例方法不引用this，而是不使用new操作符調(diào)用構(gòu)造函數(shù)

functionPerson(name,job){varo=newObject()

o.name=name

o.job=job

o.sayName=function(){console.log(name)

}returno

}varperson1=Person('Jiang','student')

person1.sayName()

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

以上就是小編跟大家分享的關(guān)于JavaScript

創(chuàng)建對(duì)象的方式的文章，希望本篇文章能夠?qū)φ趶氖聎eb相關(guān)工作的小伙伴們有所幫助。想要了解更多web相關(guān)知識(shí)記得關(guān)注北大青鳥(niǎo)web培訓(xùn)官網(wǎng)。最后祝愿小伙伴們工作順利!

*聲明：內(nèi)容與圖片均來(lái)源于網(wǎng)絡(luò)(部分內(nèi)容有修改)，版權(quán)歸原作者所有，如來(lái)源信息有誤或侵犯權(quán)益，請(qǐng)聯(lián)系我們刪除或授權(quán)事宜。

JS創(chuàng)建數(shù)組及數(shù)組元素

1、字面量的方式創(chuàng)建數(shù)組 ：

? ? ?let arr = ['張三','李四','王五'];

? ? let num = [11,22,33,44]；

? ? console.log(arr);?

? ? ?數(shù)組的下標(biāo)從0開(kāi)始?

2、構(gòu)造函數(shù)的方式創(chuàng)建數(shù)組?

? ? new Array(size);

? ? 表示數(shù)組中可存放的元素總數(shù)

? ? 規(guī)定了總數(shù) 但是添加一個(gè)數(shù) 總數(shù)也會(huì)增

? ? new Array()實(shí)例化一個(gè)數(shù)組對(duì)象?

? ? ?let arr = new Array(3)

? ? ?arr = [1,2,3,4]?

? ? 聲明時(shí)賦值 ：

? ? ?let arr = new Array(1,2,3,4,5,6)?

? ? 分別賦值 ：

? ? ?let arr = new Array(3);

? ? arr[0] = 'zhangsan';

? ? arr[1] = 'lisi';

? ? arr[2] = 'wangwu' ；

3、通過(guò)數(shù)組的名稱和下標(biāo)直接訪問(wèn)數(shù)組的元素?

? ? ?console.log(arr[1]);?

? ? for(var i in arr){

? ? ? ? console.log(arr[i]); }?

4、屬性 ? length ?設(shè)置或返回?cái)?shù)組中元素的數(shù)目?

? ? let arr = [1,2,3,4,5]

? ? ?console.log(arr.length);?

5、 join( ) ?把數(shù)組的所有元素放入一個(gè)字符串，通過(guò)一個(gè)分隔符進(jìn)行分隔?

? ? 把數(shù)組轉(zhuǎn)成字符串?

? ? let newstr = arr.join();?

? ? ?join()里面沒(méi)有傳任何參數(shù) 默認(rèn)以逗號(hào)連接?

? ? ?join('') 數(shù)字中間沒(méi)有任何字符拼接

? ? let newstr = arr.join('+');

? ? ?console.log( typeof(newstr) );?

? ?console.log(newstr);

6、 sort() ? 對(duì)數(shù)組排序?

? ? ?隱式數(shù)據(jù)類(lèi)型轉(zhuǎn)換 會(huì)字符串類(lèi)型的轉(zhuǎn)成數(shù)字類(lèi)型進(jìn)行排序?

? ? let arr = ['2', '3', '1', '5', '0'];

? ? let newarr = arr.sort();?

? ? ?sort方法 會(huì)把老數(shù)組和新產(chǎn)生的數(shù)組都進(jìn)行排序?

? ? console.log(arr, newarr);?

? ?sort()對(duì)應(yīng)多位數(shù)排序會(huì)出現(xiàn)問(wèn)題

? ? let arr = [2,22,3,32,1,12,100];

? ?sort 給我們提供的解決方法?

? ? ?arr.sort(function(a,b){

? ? ?從小到大的順序?

? ? ? return a-b;?

? ? 從大到小的順序?

? ? ? return b-a; })

? ? ?console.log(arr);

7、 push() ? 向數(shù)組末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度?

? ? ?在外面定義的叫全局變量?

? ? let stu = ['小張','小王','小李'];

? console.log(stu);?

方法里面的叫局部區(qū)域?

? ? function fn(){

因?yàn)閟tu 是全局的 所以在方法里面 可以獲取到

數(shù)組可以添加重復(fù)的數(shù)據(jù)?

push也可以添加多個(gè)數(shù)據(jù)?

? ? ? ?let a = stu.push('麗麗','倩倩','雯雯')

? ? ? ? console.log(a);

? ? ? console.log(stu);}

? ? ?定義一個(gè)空數(shù)組 點(diǎn)擊添加按鈕 可以在空數(shù)組里面添加

? ? 姓名 點(diǎn)擊一個(gè)添加 可以把數(shù)組使用 dw 顯示在頁(yè)面上?

? ? ?let arr = []

? ? ?function fn(){

? ? ? ? ?arr.push('xiaoa')

? ? document.write有個(gè)缺陷，用按鈕點(diǎn)擊的時(shí)候

? ? ? ? 會(huì)把整個(gè)頁(yè)面進(jìn)行重新繪制，導(dǎo)致頁(yè)面原來(lái)的內(nèi)容丟失??

? ? ? ?document.write(arr)} }

8、 concat() 合并兩個(gè)數(shù)組?

? ? 對(duì)原來(lái)的兩個(gè)數(shù)組 沒(méi)有任何改變，會(huì)生成一個(gè)拼接好的新數(shù)組?

? ? ?let arr1 = [1,2,3];

? ? ?let arr2 = [4,5,6];

? ? ?let arr3 = [7,8,9]

?拼接多個(gè)數(shù)組?

? ?let newarr = arr1.concat(arr2).concat(arr3);

? console.log('arr1',arr1);

? ? ?console.log('arr2',arr2);?

? console.log('newarr',newarr);

? ? es6合并數(shù)組 要是用擴(kuò)展運(yùn)算符 ...?

? ? ?等同于 [1,2,3] 把a(bǔ)rr1的括號(hào)去掉，

? ? 把里面的內(nèi)容拿出來(lái)了?

? ? let newarr = [...arr1];?

? ? ?let newarr = [...arr1,...arr2,...arr3];

? ? ?console.log(newarr);

? ? eg1：定義 ?三個(gè)數(shù)組 ?分別是 三組學(xué)生的信息 第一組 姓名 年紀(jì) ?性別?

? ? 把三個(gè)數(shù)組 拼接起來(lái) 使用兩種方式?

? ? 數(shù)組中的splice方法 可以對(duì)數(shù)組進(jìn)行增刪改?

? ? splice()里面有三個(gè)參數(shù)，

? ? 第一個(gè)參數(shù)表示 你要操作的數(shù)組元素的索引

? ? 第二個(gè)參數(shù)表示 你要從你選擇的索引開(kāi)始要?jiǎng)h除的個(gè)數(shù)

? ? 第三個(gè)參數(shù)表示 你要添加的數(shù)組元素

? ? let arr = ['張三','李四','王五'];?

? ? ?刪除李四?

? ? arr.splice(1,1)?

? ? 把王五修改成麗麗?

? ? ?arr.splice(2,1,'麗麗')?

? ? 添加 你想在哪里添加就在哪里添加?

? ? 把倩倩放在數(shù)組索引為2的位置 因?yàn)榈诙€(gè)參數(shù)是0 所以王五不會(huì)被刪除?

? ? ?arr.splice(2,0,'倩倩')?

? ? 使用splice在數(shù)組的末尾添加?

? ? arr.splice(3,0,'倩倩')?

? ? 在任意數(shù)組末尾的位置進(jìn)行添加?

? ? arr.splice(arr.length,0,'倩倩')

? ? console.log(arr);?

? ? ?eg2：寫(xiě)一個(gè)數(shù)組 里面有姓名 年紀(jì) 性別 展示在頁(yè)面上

? ? ?再寫(xiě)三個(gè)按鈕 點(diǎn)擊 可以實(shí)現(xiàn)

? ? 數(shù)組的末尾添加一個(gè)信息 刪除年紀(jì) ?修改性別 ?點(diǎn)擊完成之后

? ? 數(shù)組的最終結(jié)果使用alert打印出來(lái)?

? ? ?let arr = ['張三',20,'男'];

? ? document.write(arr);

? ? ?function fn(str){

? ? ? ? if(str=='add'){

? ? ? ? ? ? ?arr.splice(arr.length,0,'奔馳')

? ? ? ? ? ? alert(arr)? ? }

? ? ? ? if(str=='del'){

? ? ? ? ? ? ?arr.splice(1,1)

? ? ? ? ? alert(arr)? ?}

? ? ? ?if(str=='update'){

? ? ? ? ? ?arr.splice(1,1,'女')

? ? ? ? ? alert(arr） } }

? ? ?let arr = ['張三','李四','王五']?

? ? ?push在數(shù)組的末尾添加一個(gè)元素?

? ? ?pop 刪除數(shù)組的最后一個(gè)元素

? ? ?arr.pop();

? ? console.log(arr);?

? ? shift 刪除數(shù)組的最前面的一個(gè)元素?

? ? arr.shift();

? ? console.log(arr);?

? ? unshift 在數(shù)組的最前面添加一個(gè)數(shù)組?

? ? arr.unshift('麗麗')

? ? console.log(arr);

js創(chuàng)建對(duì)象的幾種方法

推薦有一下幾種方式：

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

var

obj

=

{

a:1,b:2

};

注意：對(duì)象字面量是一個(gè)表達(dá)式，這種表達(dá)式每次運(yùn)算都會(huì)創(chuàng)建并初始化一個(gè)新對(duì)象，并計(jì)算這個(gè)新對(duì)象的每個(gè)屬性值。所以如果在循環(huán)體內(nèi)使用對(duì)象字面量，每次循環(huán)時(shí)都會(huì)創(chuàng)建新對(duì)象。

2.通過(guò)new運(yùn)算符創(chuàng)建對(duì)象

var

obj

=

new

object();

//創(chuàng)建空對(duì)象

var

ary

=

new

array();

//創(chuàng)建空的數(shù)組對(duì)象

注意：new運(yùn)算符后面跟的是一個(gè)函數(shù)調(diào)用，這個(gè)函數(shù)被稱為構(gòu)造函數(shù)。js中原始類(lèi)型都包含內(nèi)置的構(gòu)造函數(shù)，也可以自己定義構(gòu)造函數(shù)。

3.通過(guò)立即執(zhí)行函數(shù)創(chuàng)建對(duì)象

var

obj

=

(function(){

return

{x:1,y:2};}());

注意：在立即執(zhí)行函數(shù)內(nèi)部一定要有return語(yǔ)句，return出的內(nèi)容就是待創(chuàng)建的對(duì)象。

javascript中創(chuàng)建對(duì)象的幾種方式

1.對(duì)象的字面量的形式var obj = {}

2.new 的方式來(lái)調(diào)用構(gòu)造函數(shù)的形式

Object是個(gè)構(gòu)造函數(shù)var obj = new Object(); obj.name = '黃忠'

3.工廠方法

function?fn?(name)?{

//?1.?創(chuàng)建一個(gè)空對(duì)象

var?obj?=?new?Object()

//?2.?給對(duì)象添加屬性和方法

obj.name?=?name

//?3.?返回一個(gè)obj對(duì)象

return?obj

}

4.構(gòu)造函數(shù)

帕斯卡命名 第一個(gè)單詞的第一個(gè)字母大寫(xiě)，后續(xù)的每一個(gè)單詞的第一個(gè)字母都大寫(xiě)

通過(guò)this動(dòng)態(tài)的給構(gòu)造函數(shù)添加屬性和方法

function?Hero(name,?weapon,?equipment,?blood)?{

//?this?動(dòng)態(tài)的給對(duì)象增加成員

//?this?指向了當(dāng)前對(duì)象

this.name?=?name;

this.weapon?=?weapon;

this.equipment?=?equipment;

this.blood?=?blood;

this.attack?=?function?()?{

console.log(this.name?+?'：攻擊');

}

this.run?=?function?()?{

console.log(this.name?+?':?加速跑');

}

}

var?hero1?=?new?Hero('黃忠',?'弓箭',?['頭盔',?'靴子'],?100);

當(dāng)前標(biāo)題：javascript創(chuàng)建,javascript創(chuàng)建空數(shù)組
轉(zhuǎn)載來(lái)源：http://chinadenli.net/article38/dsshssp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站改版、小程序開(kāi)發(fā)、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)