建站
咨詢
售后
建站咨詢
新聞中心
JavaScript創(chuàng)建對象的方式有很多，通過Object構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個對象，顯然這兩種方式會產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。接下來介紹七種非常經(jīng)典的創(chuàng)建對象的方式，他們也各有優(yōu)缺點(diǎn)。
10年的海湖新網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整海湖新建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“海湖新網(wǎng)站設(shè)計(jì)”,“海湖新網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
工廠模式
- function createPerson(name, job) {
- var o = new Object()
- o.name = name
- o.job = job
- o.sayName = function() {
- console.log(this.name)
- }
- return o
- }
- var person1 = createPerson('Jiang', 'student')
- var person2 = createPerson('X', 'Doctor')
可以無數(shù)次調(diào)用這個工廠函數(shù)，每次都會返回一個包含兩個屬性和一個方法的對象
工廠模式雖然解決了創(chuàng)建多個相似對象的問題，但是沒有解決對象識別問題，即不能知道一個對象的類型
構(gòu)造函數(shù)模式
- function Person(name, job) {
- this.name = name
- this.job = job
- this.sayName = function() {
- console.log(this.name)
- }
- }
- var person1 = new Person('Jiang', 'student')
- var person2 = new Person('X', 'Doctor')
沒有顯示的創(chuàng)建對象，使用new來調(diào)用這個構(gòu)造函數(shù)，使用new后會自動執(zhí)行如下操作
- 創(chuàng)建一個新對象
- 這個新對象會被執(zhí)行[[prototype]]鏈接
- 這個新對象會綁定到函數(shù)調(diào)用的this
- 返回這個對象
使用這個方式創(chuàng)建對象可以檢測對象類型
- person1 instanceof Object // true
- person1 instanceof Person //true
但是使用構(gòu)造函數(shù)創(chuàng)建對象，每個方法都要在每個實(shí)例上重新創(chuàng)建一次
原型模式
- function Person() {
- }
- Person.prototype.name = 'Jiang'
- Person.prototype.job = 'student'
- Person.prototype.sayName = function() {
- console.log(this.name)
- }
- var person1 = new Person()
將信息直接添加到原型對象上。使用原型的好處是可以讓所有的實(shí)例對象共享它所包含的屬性和方法，不必在構(gòu)造函數(shù)中定義對象實(shí)例信息。
更簡單的寫法
- function Person() {
- }
- Person.prototype = {
- name: 'jiang',
- job: 'student',
- sayName: function() {
- console.log(this.name)
- }
- }
- var person1 = new Person()
將Person.prototype設(shè)置為等于一個以對象字面量形式創(chuàng)建的對象，但是會導(dǎo)致.constructor不在指向Person了。
使用這種方式，完全重寫了默認(rèn)的Person.prototype對象，因此 .constructor也不會存在這里
- Person.prototype.constructor === Person // false
如果需要這個屬性的話，可以手動添加
- function Person() {
- }
- Person.prototype = {
- constructor：Person
- name: 'jiang',
- job: 'student',
- sayName: function() {
- console.log(this.name)
- }
- }
不過這種方式還是不夠好，應(yīng)為constructor屬性默認(rèn)是不可枚舉的，這樣直接設(shè)置，它將是可枚舉的。所以可以時(shí)候，Object.defineProperty方法
- Object.defineProperty(Person.prototype, 'constructor', {
- enumerable: false,
- value: Person
- })
缺點(diǎn)
使用原型，所有的屬性都將被共享，這是個很大的優(yōu)點(diǎn)，同樣會帶來一些缺點(diǎn)
原型中所有屬性實(shí)例是被很多實(shí)例共享的，這種共享對于函數(shù)非常合適。對于那些包含基本值的屬性也勉強(qiáng)可以，畢竟實(shí)例屬性可以屏蔽原型屬性。但是引用類型值，就會出現(xiàn)問題了
- function Person() {
- }
- Person.prototype = {
- name: 'jiang',
- friends: ['Shelby', 'Court']
- }
- var person1 = new Person()
- var person2 = new Person()
- 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指向同一個原型，person1修改了引用的數(shù)組，也會反應(yīng)到實(shí)例person2中
組合使用構(gòu)造函數(shù)模式和原型模式
這是使用最為廣泛、認(rèn)同度***的一種創(chuàng)建自定義類型的方法。它可以解決上面那些模式的缺點(diǎn)
使用此模式可以讓每個實(shí)例都會有自己的一份實(shí)例屬性副本，但同時(shí)又共享著對方法的引用
這樣的話，即使實(shí)例屬性修改引用類型的值，也不會影響其他實(shí)例的屬性值了
- function Person(name) {
- this.name = name
- this.friends = ['Shelby', 'Court']
- }
- Person.prototype.sayName = function() {
- console.log(this.name)
- }
- var person1 = new Person()
- var person2 = new Person()
- person1.friends.push('Van')
- console.log(person1.friends) //["Shelby", "Court", "Van"]
- console.log(person2.friends) // ["Shelby", "Court"]
- console.log(person1.friends === person2.friends) //false
動態(tài)原型模式
動態(tài)原型模式將所有信息都封裝在了構(gòu)造函數(shù)中，初始化的時(shí)候，通過檢測某個應(yīng)該存在的方法時(shí)候有效，來決定是否需要初始化原型
- function Person(name, job) {
- // 屬性
- this.name = name
- this.job = job
- // 方法
- if(typeof this.sayName !== 'function') {
- Person.prototype.sayName = function() {
- console.log(this.name)
- }
- }
- }
- var person1 = new Person('Jiang', 'Student')
- person1.sayName()
只有在sayName方法不存在的時(shí)候，才會將它添加到原型中。這段代碼只會初次調(diào)用構(gòu)造函數(shù)的時(shí)候才會執(zhí)行。
此后原型已經(jīng)完成初始化，不需要在做什么修改了
這里對原型所做的修改，能夠立即在所有實(shí)例中得到反映
其次，if語句檢查的可以是初始化之后應(yīng)該存在的任何屬性或方法，所以不必用一大堆的if語句檢查每一個屬性和方法，只要檢查一個就行
寄生構(gòu)造函數(shù)模式
這種模式的基本思想就是創(chuàng)建一個函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼，然后再返回新建的對象
- function Person(name, job) {
- var o = new Object()
- o.name = name
- o.job = job
- o.sayName = function() {
- console.log(this.name)
- }
- return o
- }
- var person1 = new Person('Jiang', 'student')
- person1.sayName()
這個模式，除了使用new操作符并把使用的包裝函數(shù)叫做構(gòu)造函數(shù)之外，和工廠模式幾乎一樣
構(gòu)造函數(shù)如果不返回對象，默認(rèn)也會返回一個新的對象，通過在構(gòu)造函數(shù)的末尾添加一個return語句，可以重寫調(diào)用構(gòu)造函數(shù)時(shí)返回的值
穩(wěn)妥構(gòu)造函數(shù)模式
首先明白穩(wěn)妥對象指的是沒有公共屬性，而且其方法也不引用this。
穩(wěn)妥對象最適合在一些安全環(huán)境中(這些環(huán)境會禁止使用this和new)，或防止數(shù)據(jù)被其他應(yīng)用程序改動時(shí)使用
穩(wěn)妥構(gòu)造函數(shù)模式和寄生模式類似，有兩點(diǎn)不同:一是創(chuàng)建對象的實(shí)例方法不引用this，而是不使用new操作符調(diào)用構(gòu)造函數(shù)
- function Person(name, job) {
- var o = new Object()
- o.name = name
- o.job = job
- o.sayName = function() {
- console.log(name)
- }
- return o
- }
- var person1 = Person('Jiang', 'student')
- person1.sayName()
和寄生構(gòu)造函數(shù)模式一樣，這樣創(chuàng)建出來的對象與構(gòu)造函數(shù)之間沒有什么關(guān)系，instanceof操作符對他們沒有意義
網(wǎng)頁名稱：JavaScript創(chuàng)建對象的七種方式
標(biāo)題網(wǎng)址：http://m.5511xx.com/article/djohpsc.html
