麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

JavaScript對象創建模式實例匯總

2019-11-20 08:49:44
字體:
來源:轉載
供稿:網友

本文實例總結了JavaScript對象創建模式。分享給大家供大家參考,具體如下:

在JavaScript中創建對象是很容易的,可以使用對象字面量或者構造函數。常用的創建對象的模式有以下幾種:

一. 工廠模式

工廠模式抽象了具體對象的過程,用函數來封裝以特ing接口創建對象的細節。
如下:

function createAnimal(name, age) {  var o = new Object();  o.name = name;  o.age = age;  o.sayName = function() {    alert(this.name);  }  return o;}var cat = createAnimal("cat", 12);var dog = createAnimal("dog", 3);

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

二. 構造函數模式

構造函數模式可以創建特定類型的對象。

function Animal(name, age) {  this.name = name;  this.age = age;  this.sayName = function() {    alert(this.name);  }}var cat = new Animal("cat", 12);var dog = new Animal("dog", 3);

可以使用對象的constructor屬性或instanceof操作符來標識對象類型。

cat.constructor == Animal // truecat instanceof Animal // true

三. 原型模式

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

使用原型對象的好處是,可以讓所有對象實例共享它所包含的屬性和方法。

function Animal() {}Animal.prototype.name = "animal";Animal.prototype.age = 1;Animal.prototype.sayName = function() {  alert(this.name);}var test1 = new Animal();test1.sayName(); // "animal"var test2 = new Animal();test2.sayName(); // "animal"alert(test1.sayName === test2.sayName); // true

或者:

function Animal() {}Animal.prototype = {  constructor: Animal,  name: "animal",  age: 1,  sayName: function() {    alert(this.name);  }};

原型中所有屬性是被很多實例共享的,通過在實例上添加一個同名屬性,可以隱藏原型中的對應屬性。但是,對于包含引用類型值的屬性來說,問題就比較明顯了,如下:

function Animal() {}Animal.prototype = {  constructor: Animal,  name: "animal",  age: 1,  hobbies: ["dance", "sing", "play"],  sayName: function() {    alert(this.name);  }};var cat = new Animal();var dog = new Animal();cat.hobbies.push("sleep");alert(cat.hobbies); // "dance", "sing", "play", "sleep"alert(dog.hobbies); // "dance", "sing", "play", "sleep"alert(cat.hobbies === dog.hobbies); // true

四. 組合使用構造函數模式和原型模式

function Animal(name, age) {  this.name = "animal";  this.age = 1;  this.hobbies = ["dance", "sing", "play"];}Animal.prototype = {  constructor: Animal,  sayName: function() {    alert(this.name);  }};var cat = new Animal("cat", 2);var dog = new Animal("dog", 3);cat.hobbies.push("sleep");alert(cat.hobbies); // "dance", "sing", "play", "sleep"alert(dog.hobbies); // "dance", "sing", "play"alert(cat.hobbies === dog.hobbies); // falsealert(cat.sayName === dog.sayName); // true

五. 動態原型模式

function Animal(name, age) {  this.name = name;  this.age = age;  if(typeof this.sayName != "function") {    Animal.prototype.sayName = function() {      alert(this.name);    }  }}var cat = new Animal("cat", 12);cat.sayName(); // "cat"

使用動態原型模式時,不能使用對象字面量重寫原型。如果在已經創建了實例的情況下重寫原型,那么就會切斷現有實例與新原型之間的聯系。

六. 寄生構造函數模式

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

從表面上看,這個函數很像典型的構造函數。除了使用new操作符之外,這個模式跟工廠模式長得一模一樣。構造函數在不返回值的情況下,默認會返回新對象實例。而通過在構造函數的末尾添加一個return語句,可以重寫調用構造函數時返回的值。

function Animal(name, age) {  var o = new Object();  o.name = name;  o.age = age;  o.sayName = function() {    alert(this.name);  }  return o;}var cat = new Animal("cat", 12);cat.sayName(); // "cat"

由于返回的對象與構造函數或構造函數的原型之間沒有什么關系,因此不能依賴instanceof操作符來確定對象類型。

建議在可以使用其他模式的情況下,不能使用這種模式。

七. 穩妥構造函數模式

穩妥構造函數模式與寄生構造函數模式類似,但有兩點不同:

一是新創建對象的實例方法不引用this;

二是不適用new操作符調用構造函數。

function Animal(name, age) {  var o = new Object();  o.name = name;  o.age = age;  var msg = "Hello, I'm ";  o.sayName = function() {    alert(msg + this.name);  }  return o;}var cat = new Animal("cat", 12);cat.sayName(); // "Hello, I'm cat"

穩妥構造函數模式適合在某些安全執行環境。

更多關于JavaScript相關內容可查看本站專題:《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結

希望本文所述對大家JavaScript程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 国产高潮国产高潮久久久91 | 婷婷久久综合九色综合色多多蜜臀 | 黄色av一区二区三区 | 久久亚洲网 | 三级国产三级在线 | 成年免费在线视频 | 亚州精品在线视频 | 国产美女一区二区在线观看 | 夏目友人帐第七季第一集 | 色人阁五月天 | 一区二区三区视频在线观看 | 西川av在线一区二区三区 | 美女羞羞视频网站 | 99精美视频 | 亚洲日本韩国精品 | 精品一区二区三区欧美 | 久久影院一区二区三区 | 免费看综艺策驰影院 | 亚洲综合精品 | 欧美激情图区 | 大片毛片 | 日日操夜夜透 | 欧美巨根 | av影片在线观看 | 羞羞视频免费观看入口 | 亚洲午夜在线视频 | 亚洲综合一区二区三区 | 青青草成人影视 | 日本在线播放一区 | 久草最新| 欧美成人免费 | 免费一级在线观看 | 毛片在线视频免费观看 | 在线成人看片 | 久久av免费 | 精品一区二区三区毛片 | 毛片免费一区二区三区 | 13一14毛片免费看 | 最新av网址在线观看 | 男男羞羞视频网站国产 | v天堂在线视频 |