成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁技術文章
文章詳情頁

詳解 javascript對象創建模式

瀏覽:161日期:2023-10-09 16:08:09

創建模式

在javascript中,主要有以下幾種創建模式:

工廠模式構造函數模式原型模式組合模式動態原型模式寄生構造函數模式穩妥構造模式

工廠模式

工廠模式是軟件工程領域一種廣為人知的設計模式。javascript實現方式:

function createPerson(name, obj, job) { var o = new Object(); o.name = name; o.obj = obj; o.job = job; o.sayName = function() { alert(this.name); } return o; } var person1 = createPerson('Nicholas', 29, 'software Enginner'); var person2 = createPerson('Greg', 27, 'Doctor');

工廠模式雖然解決了創建多個相似對象的問題,但卻沒有解決對象識別問題

構造函數模式

function Person(name, age, job) { this.name = name; this.age = name; this.job = name; this.sayName = function () { alert(this.name); } } var person1 = new Person('Nicholas', 29, 'Software Engineer'); var person2 = new Person('Greg', 27, 'Doctor'); person1 instanceof Person; // true person1 instanceof Object; // true person2 instanceof Person; // true person2 instanceof Object; // true

new操作符實現原理請查看文章附錄

不同于工廠模式,構造函數模式

沒有顯示創建對象

直接將屬性和方法賦值給了this對象

沒有return語句

解決了對象識別問題

但是構造函數模式同樣存在問題,就是每個方法都要在每個實例上重新申明一遍。person1和person2都有一個名為 sayName() 的方法,但那兩個方法不是同一個Function實例。(在javascript中,函數實質上也是對象,因此每定義一個函數,也就是實例化一個對象。)

通過吧函數定義轉移到構造函數外部可以解決這個問題:

function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName; } function sayName() { alert(this.name); } var person1 = new Person('Nicholas', 29, 'Software Engineer'); var person2 = new Person('Greg', 27, 'Doctor');

但這種方式又帶來了一個新的問題,我們在全局創建了一個全局函數。

需要注意一點,按照慣例,構造函數始終應該以一個大寫字母開頭,而非構造函數應該以一個小寫字母開頭。這主要用于區別構造函數和非構造函數,因為構造函數本身也是函數。

原型模式

我們創建的每個函數都有一個 prototype (原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途可以由特定類型的所有實例共享的屬性和方法。

函數原型對象請查看附錄

通過原型模式創建對象,我們不必在構造函數中定義對象實例的信息,同時實例化多個對象,每個對象不會再申明一個新的函數。

可以看到, person1.sayName 和 person2.sayName 都指向了同一個函數。

但是原型模式的缺點也是顯而易見的。

首先原型模式省略了構造函數模式傳遞參數這一環節,結果導致所有實例的初始值在默認情況下都是相同的屬性值。

更重要的是,因為將屬性和方法都放置在原型對象上,實質上原型上的屬性是 被所有實例所共享的 。對于包含基本值的屬性還表現正常,改變屬性值,只是在實例上添加一個同名屬性。但對于引用類型值的屬性來說,這可能是個災難。

function Person() {} Person.prototype = { constructor: Person, name: 'Nicholas', age: 29, job: 'Software Engineer', friends: ['shelby', 'Court'], sayName: function() { alert(this.name); } }; var person1 = new Person(); var person2 = new Person(); person1.friends.push('Van'); person1.friends; // ['shelby', 'Court', 'Van'] person2.friends; // ['shelby', 'Court', 'Van']

組合模式

創建自定義類型最常見的方式,就是組合使用構造函數模式和原型模式。構造模式用于定義實例屬性,而原型模式用于定義方法和共享屬性。

這樣,每個實例都會有自己的一份實例屬性副本,但同時又共享方法的引用。

function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.friends = ['Shelby', 'Court']; } Person.prototype.sayName = function() { alert(this.name); } var person1 = new Person('Nicholas', 29, 'Software Enginner'); var person2 = new Person('Greg', 27, 'Doctor'); person1.friends.push('Van'); person1.firends; // ['Shelby', 'Court', 'Van']; person2.firends; // ['Shelby', 'Court'] person1.firends === person2.firends; // false person1.sayName === person2.sayName; // true

動態原型模式

function Person(name, age, job) { this.name = name; this.age = age; this.job = job;if (typeof this.sayName != 'function') { Person.prototype.sayName = function() {alert(this.name); } } }

寄生構造函數模式

寄生模式的基本概念就是創建一個函數,該函數的作用僅僅是封裝創建對象的代碼,然后再返回新創建的對象。

function Person(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job.o.sayName = function() { alert(this.name); } } var person1 = new Person('Nicholas', 29, 'Software Engineer'); person1.sayName(); // 'Nicholas'

看起來,除了使用new操作符之外,這個模式和工廠模式其實是一模一樣的。這個模式可以在特殊的情況下用來作為對象創建構造函數。假設我們需要一個具有額外方法的特殊數組類型。由于不能直接修改Array構造函數,因此可以使用這個模式。

function SpecialArray() { var values = [];values.push.push(values, arguments); values.toPipedString = function() { return this.join('|'); }return values; } var colors = new SpecialArray('red', 'blue', 'green'); colors.toPipedString(); // 'red|blue|green'

該模式主要缺點:返回的對象和構造函數或構造函數的原型屬性間沒有關系,不·能依賴instanceof來確定對象類型。在其他模式能夠使用的情況下,盡量不要使用這種模式。

穩妥構造函數模式

function Person(name, age, job) { var o = new Object(); var name = name; var age = age; var job = jbo;o.sayName = function() { alert(name); } } var person1 = Person('Nicholas', 29, 'Software Enginner'); firend.sayName(); // 'Nicholas' 附錄 new 操作符

new操作符實際上會經歷4個步驟:

創建一個空的簡單JavaScript對象(即**{}**); 鏈接該對象(設置該對象的constructor)到另一個對象 ; 將步驟1新創建的對象作為**this**的上下文 ; 如果該函數沒有返回對象,則返回**this**。

function new(func) { var o = {}; o.__proto__ = func.prototype; var result = func.apply(o, arguments); return typeof result === 'object' ? object : o; }

函數原型對象

理解原型對象

無論什么時候,只要創建一個新函數,就會根據一組特定的規則為該函數創建一個prototype屬性,這個屬性指向函數的原型對象。在默認情況下,所有原型對象都會自動獲得一個construtor(構造函數)屬性,這個屬性包含一個指向prototype屬性所在函數的指針。

在創建了一個自定義的構造函數之后,其原型對象只會取得construtoe屬性,至于其他屬性,則都是從Object繼承而來。當調用構造函數創建一個新實例時,該實例的內部將包含一個指針(內部屬性),指向構造函數的原型對象,這個指針叫[[Prototype]]。在多數瀏覽器中,每個對象都支持一個屬性__proto__來調用[[Prototype]]。

詳解 javascript對象創建模式

雖然所有實現都無法直接訪問[[Prototype]],但可以通過isPrototype方法來確定對象之間是否存在關系。

我們測試了person1和person2,都返回了true。因為他們內部都有一個指向Person.prototype的指針。

Object.getPrototype()可以返回對象的原型對象。

每當代碼讀取某個對象的屬性時,都會執行一次搜索,目標是具有給定名字的屬性。搜索首先會從對象本身開始,如果在實例中找到了對應的屬性,則返回該屬性的值。如果沒找到,則繼續搜索指針指向的原型對象。這也是為什么我們在person1和person2兩個實例中,并沒有定義sayName這個屬性,但仍能夠正常使用。我們在調用person1.sayName()是,會執行兩次搜索。首先,解析器會問:“實例person1有sayName屬性嗎?”,答:“沒有”。然后他繼續搜索,再問:“person1的原型有sayName屬性嗎?”,答:“有”。于是,它就讀取保存在原型中的函數。

雖然我們能夠通過實例訪問原型的屬性,但卻不能重新原型的屬性。如果我們在實例上添加屬性名,而這個屬性名又與原型中的屬性名相同,即我們希望在實例中重寫屬性。

function Person() {} Person.prototype.name = ’Nicholas’; var person1 = new Person(); var person2 = new Person(); person1.name === person2.name; // true person1.name = ’Greg’; person1.name === person2.name; // false person1.name; // ’Greg’ person2.name; // ’Nicholas’ person1.__proto__.name; // ’Nicholas’

事實上,當我們重寫原型屬性時,只是在實例上添加了一個新屬性。當我們把實例上的屬性刪除后,又會暴露出原型屬性。

delete person1.name; person1.name; // ’Nicholas’

使用hasOwnProperty()函數能判斷屬性是否在實例上。

person1.hasOwnProperty(’name’); // false person1.name = ’Greg’; person1.hasOwnProperty(’name’); // true

以上就是詳解 javascript對象創建模式的詳細內容,更多關于Java 創建模式的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久
精品二区久久| 日本韩国一区二区| 日本道色综合久久| 亚洲影院久久精品| 亚洲午夜精品国产| 欧美激情综合在线| 欧美成人在线免费观看| 欧美刺激午夜性久久久久久久| 美腿丝袜亚洲综合| 色一情一乱一乱一91av| 亚洲www啪成人一区二区麻豆| 亚洲精品视频一区二区三区 | 成人亚洲一区二区一| 制服丝袜亚洲网站| 狠狠久久亚洲欧美| 精品视频在线看| 另类专区欧美蜜桃臀第一页| 欧美影院午夜播放| 久久国产精品免费| 欧美三级三级三级爽爽爽| 日本人妖一区二区| 欧美在线免费播放| 美女脱光内衣内裤视频久久影院| 欧洲一区在线电影| 久久99久久久欧美国产| 欧美日韩国产一级二级| 激情五月婷婷综合网| 欧美精品一卡二卡| 国产精品亚洲专一区二区三区 | 91精品福利视频| 蜜臀av性久久久久蜜臀aⅴ流畅| 色94色欧美sute亚洲线路一ni | 久久久久国产精品麻豆| 欧美精品一级| 中文字幕一区二区不卡| 亚洲精品一二| 亚洲福利视频导航| 香蕉成人久久| 免费日韩伦理电影| 91.com视频| caoporn国产精品| 中文字幕va一区二区三区| 亚洲精选久久| 日韩精品电影在线观看| 欧美日韩三级视频| 成人久久久精品乱码一区二区三区| 国产日韩一级二级三级| 亚洲视频狠狠| 亚洲成在线观看| 欧美日韩aaa| 色综合久久综合| 亚洲色图欧洲色图婷婷| 国产毛片一区| 久久国产剧场电影| 26uuuu精品一区二区| 亚洲国产婷婷| 日本午夜一区二区| 欧美一区二区三区婷婷月色| 97国产一区二区| 亚洲女与黑人做爰| 久久综合福利| 国产成人综合在线| 国产精品国产精品国产专区不片| 午夜亚洲精品| 国产精品一品二品| 国产精品国产三级国产普通话三级| 香蕉久久夜色精品国产| 国产一区二区三区高清播放| 久久精品亚洲国产奇米99| 一区二区冒白浆视频| 日本视频一区二区三区| 欧美成人乱码一区二区三区| 欧美日韩国产亚洲一区| 图片区小说区区亚洲影院| 欧美日韩中文一区| 欧美粗暴jizz性欧美20| 婷婷六月综合亚洲| 欧美mv和日韩mv的网站| 亚洲国产电影| 国产一区欧美日韩| 国产精品理伦片| 色欧美88888久久久久久影院| 国产成人综合在线| 亚洲桃色在线一区| 欧美性生活影院| 欧美在线影院| 日韩和的一区二区| 26uuu久久天堂性欧美| 在线一区日本视频| 国产激情一区二区三区四区| 国产精品视频在线看| 在线看国产日韩| 91视频观看视频| 亚洲成人av一区二区三区| 日韩精品一区国产麻豆| 99日韩精品| 丁香婷婷综合网| 亚洲综合色婷婷| 欧美成人三级在线| 亚欧美中日韩视频| av电影在线观看一区| 日韩精品成人一区二区在线| 久久综合九色综合欧美98| 麻豆精品91| 色综合久久综合| 精东粉嫩av免费一区二区三区| 专区另类欧美日韩| 91精品国产综合久久蜜臀| 国产三区精品| 99国产精品久久久| 日韩高清不卡在线| 亚洲国产电影在线观看| 欧美性受xxxx| 亚洲精品在线视频观看| 粉嫩av亚洲一区二区图片| 亚洲一区视频在线观看视频| 精品免费视频.| 欧美在线免费播放| 亚洲精品一区二区三| 成人免费看视频| 青青草97国产精品免费观看| 中文字幕乱码久久午夜不卡| 欧美日韩一级黄| 欧美高清日韩| 国产美女视频一区| 婷婷六月综合亚洲| 综合欧美一区二区三区| 91精品国产综合久久婷婷香蕉| 亚洲一区中文| 国色天香一区二区| 成人午夜av影视| 久久爱www久久做| 亚洲成人免费在线| 国产精品久久久久久久久果冻传媒| 日韩一级视频免费观看在线| 国产亚洲精品v| 欧美黄色aaaa| 国产福利一区二区三区视频在线| 亚瑟在线精品视频| 中文字幕在线不卡一区| 精品久久一区二区| 欧美精品久久一区| 久久激情网站| 亚洲欧洲三级| 欧美成人午夜| 国产 欧美在线| 毛片av中文字幕一区二区| 亚洲一区二区视频在线观看| 久久久久久久久久久99999| 欧美片网站yy| 欧洲亚洲精品在线| 国产精品一区亚洲| 亚洲黑丝一区二区| 欧美在线资源| 99精品桃花视频在线观看| 国产伦精品一区二区三区免费迷 | 欧美激情一区二区三区| 日韩午夜在线观看| 欧美亚洲免费在线一区| 欧美一级播放| 国产精品视频免费观看| 亚洲午夜精品国产| 欧美不卡三区| 99精品桃花视频在线观看| 国产福利一区在线| 国产在线一区二区| 国产精品二三区| 中文字幕第一区二区| 国产日韩精品一区二区三区 | 91成人看片片| 久久国产精品免费一区| 99在线热播精品免费99热| 亚洲高清123| 亚洲一级特黄| 在线观看欧美亚洲| 国产精品a级| 国产一区在线免费观看| 国产二区国产一区在线观看| 国内久久精品视频| 久久er99精品| 精品一区二区在线观看| 蜜桃视频一区二区三区在线观看 | 亚洲成人7777| 天天射综合影视| 日韩激情视频网站| 日韩二区三区在线观看| 天天综合日日夜夜精品| 午夜不卡在线视频| 石原莉奈在线亚洲二区| 日本伊人精品一区二区三区观看方式| 婷婷成人综合网| 美女免费视频一区二区| 国产一区二区美女| 国产精品18久久久久久久久久久久 | 99久久久国产精品| 91理论电影在线观看| 国产精品v日韩精品v欧美精品网站 | 日韩亚洲欧美高清| 久久精品水蜜桃av综合天堂| 亚洲欧洲精品一区二区精品久久久|