淺談JavaScript對(duì)象的創(chuàng)建方式
通過(guò)Object構(gòu)造函數(shù)或?qū)ο笞置媪縿?chuàng)建對(duì)象時(shí)，使用同一個(gè)接口創(chuàng)建很多對(duì)象時(shí)，會(huì)產(chǎn)生大量的重復(fù)代碼。為了簡(jiǎn)化，引入了工廠模式。
工廠模式
function createPerson(name, age, job) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.job = job;
obj.sayHello(){
alert(this.name);
};
return obj;
}
var p1 = createPerson("xxyh", 19, "programmer");
var p2 = createPerson("zhangsan", 18, "student");
這種創(chuàng)建對(duì)象的方式大大簡(jiǎn)化了代碼，然而也存在不足，那就是無(wú)法確定對(duì)象的類型。為了解決這個(gè)問(wèn)題，出現(xiàn)下面這種模式。
構(gòu)造函數(shù)模式
創(chuàng)建自定義的構(gòu)造函數(shù)，從而定義自定義對(duì)象類型的屬性和方法。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
alert(this.name);
};
}
var p1 = new Person("xxyh", 19, "programmer");
var p2 = new Person("Jack", 18, "student");
上例中，Person()取代了createPerson()，除此之外，還有幾點(diǎn)不同：
•沒(méi)有顯示地創(chuàng)建對(duì)象；
•直接將屬性和方法賦值給了this對(duì)象
•沒(méi)有return語(yǔ)句
創(chuàng)建Person對(duì)象，必須使用new操作符。分為4個(gè)步驟：
•創(chuàng)建一個(gè)新對(duì)象
•將構(gòu)造函數(shù)的作用域賦給新對(duì)象
•執(zhí)行構(gòu)造函數(shù)中的代碼
•返回新對(duì)象
p1和p2分別保存著Person的一個(gè)實(shí)例。
alert(p1.constructor == Person); // true alert(p2.constructor == Person); // true
檢測(cè)類型時(shí)最好使用instanceof：
alert(p1 instanceof Object); // true alert(p1 instanceof Person); // true alert(p2 instanceof Object); // true alert(p2 instanceof Person); // true
p1和p2都是Object的實(shí)例，因?yàn)樗袑?duì)象均繼承自O(shè)bject。
2.1將構(gòu)造函數(shù)當(dāng)作函數(shù)
// 當(dāng)作構(gòu)造函數(shù)使用
var person = new Person("xxyh", 19, "programmer");
person.sayName(); // "xxyh"
// 當(dāng)作普通函數(shù)
Person("zhangsan", 18, "student"); // 添加到window
window.sayName(); // "zhangsan"
// 在另一個(gè)對(duì)象的作用域中調(diào)用
var obj = new Object();
Person.call(obj, "Jack", 29, "manager");
obj.sayName(); // "Jack"，obj擁有了所有屬性和方法
2.2構(gòu)造函數(shù)的問(wèn)題
使用構(gòu)造函數(shù)的問(wèn)題，就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍。p1和p2都有一個(gè)sayName()方法，但是他們不是一個(gè)Function的實(shí)例。在JavaScript中，函數(shù)時(shí)對(duì)象，因此每定義一個(gè)函數(shù)，就實(shí)例化了一個(gè)對(duì)象。
構(gòu)造函數(shù)也可以這樣定義：
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = new Function("alert(this.name)");
}
因此，不同實(shí)例上的同名函數(shù)時(shí)不相等的：
alert(p1.sayName == p2.sayName); // false
然而，創(chuàng)建兩個(gè)同樣功能的Function是多余的，根本不需要在執(zhí)行代碼前就把函數(shù)綁定到特定對(duì)象上面。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {
alert(this.name);
}
var p1 = new Person("xxyh", 19, "programmer");
var p2 = new Person("Jack", 18, "student");
上面將sayName()的定義移到構(gòu)造函數(shù)外部，然后在構(gòu)造函數(shù)內(nèi)部將屬性sayName設(shè)置為全局的sayName函數(shù)。這樣，sayName包含了指向函數(shù)的指針，p1和p2共享了全局作用域中定義的同一個(gè)sayName()函數(shù)。
但是，這樣做又出現(xiàn)了新問(wèn)題：在全局作用域中定義的函數(shù)只能被某個(gè)對(duì)象調(diào)用。而且如果對(duì)象定義了很多方法，那么引用類型就失去了封裝性。
原型鏈模式
每個(gè)函數(shù)都有一個(gè)prototype(原型)屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象。這個(gè)對(duì)象的用途是：包含可以由特定類型的所有實(shí)例共享的屬性和方法。prototype是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。使用原型對(duì)象的好處是可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。這就是說(shuō)不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息，而是將這些信息添加到原型對(duì)象中。
function Person() {
}
Person.prototype.name = "xxyh";
Person.prototype.age = 19;
Person.prototype.job = "programmer";
Person.prototype.sayName = function () {
alert(this.name);
};
var person1 = new Person();
person1.sayName(); // "xxyh"
var person2 = new Person();
person2.sayName(); // "xxyh"
alert(person1.sayName == person2.sayName); // true
3.1理解原型對(duì)象
只要?jiǎng)?chuàng)建一個(gè)新函數(shù)，就會(huì)為該函數(shù)創(chuàng)建一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。在默認(rèn)情況下，所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor屬性。這個(gè)屬性包含一個(gè)指向prototype屬性所在函數(shù)的指針。Person.prototype.constructor指向Person。
當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例，實(shí)例的內(nèi)部將包含指向構(gòu)造函數(shù)的原型對(duì)象的指針(內(nèi)部屬性)，稱為[[Prototype]]。在Firefox、Safari和Chrome通過(guò)_proto_訪問(wèn)。這個(gè)連接存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間，而不是存在于實(shí)例與構(gòu)造函數(shù)之間。
下圖展示了各個(gè)對(duì)象之間的關(guān)系：
Person.prototype指向了原型對(duì)象，而Person.prototype.constructor又指回了Person。原型中除了constructor屬性，還有其他添加的屬性。Person實(shí)例中都包含一個(gè)內(nèi)部屬性，該屬性僅僅指向了Person.prototype,它們和構(gòu)造函數(shù)沒(méi)有直接關(guān)系。
雖然無(wú)法訪問(wèn)[[Prototype]]，但是可以通過(guò)isPrototypeOf()方法來(lái)確定對(duì)象之間是否存在這種關(guān)系。
alert(Person.prototype.isPrototypeOf(person1)); // true alert(Person.prototype.isPrototypeOf(person2)); // true
在讀取某個(gè)對(duì)象的屬性時(shí)，都會(huì)執(zhí)行一次搜索，目標(biāo)是具有給定名字的屬性。搜索首先從對(duì)象實(shí)例本身開始。搜索首先從對(duì)象實(shí)例本身出發(fā)開始，如果在實(shí)例中找到了具有給定名字的屬性，則返回該屬性的值；如果沒(méi)有找到，則繼續(xù)搜索指針指向的原型對(duì)象，在原型對(duì)象中查找給定名字的屬性。如果在原型對(duì)象中找到了這個(gè)屬性，則返回屬性的值。
可以通過(guò)對(duì)象實(shí)例訪問(wèn)保存在原型中的值，但卻不能通過(guò)對(duì)象實(shí)例重寫原型中的值。如果在實(shí)例中添加一個(gè)與實(shí)例原型中的一個(gè)屬性同名的屬性，該屬性將會(huì)屏蔽原型中的屬性。
function Person() {
}
Person.prototype.name = "xxyh";
Person.prototype.age = "20";
Person.prototype.job = "programmer";
Person.prototype.sayName = function () {
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "oooo";
alert(person1.name); // "oooo"
alert(person2.name); // "xxyh"
上例中，person1中的name屬性屏蔽了原型中的name屬性。
當(dāng)對(duì)象實(shí)例添加一個(gè)屬性時(shí)，這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性。這也就是說(shuō)，這個(gè)屬性的存在會(huì)阻止對(duì)原型中那個(gè)屬性的訪問(wèn)。使用delete可以完成刪除實(shí)例屬性。
function Person() {
}
Person.prototype.name = "xxyh";
Person.prototype.age = "20";
Person.prototype.job = "programmer";
Person.prototype.sayName = function () {
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "oooo";
alert(person1.name); // "oooo"
alert(person2.name); // "xxyh"
delete person1.name;
alert(person1.name); // "xxyh"
hasOwnProperty()可以檢測(cè)一個(gè)屬性是存在于實(shí)例中，還是存在于原型中。
function Person() {
}
Person.prototype.name = "xxyh";
Person.prototype.age = "20";
Person.prototype.job = "programmer";
Person.prototype.sayName = function () {
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); // false
person1.name = "oooo";
alert(person1.hasOwnProperty("name")); // true
下圖展示了不同情況的實(shí)現(xiàn)與原型的關(guān)系：
3.2原型與in操作符
使用in操作符的方式：?jiǎn)为?dú)使用、在for-in循環(huán)中使用。在單獨(dú)使用時(shí)，in操作符會(huì)在通過(guò)對(duì)象能夠訪問(wèn)給定屬性時(shí)返回true，無(wú)論該屬性存在于實(shí)例中還是原型中。
function Person() {
}
Person.prototype.name = "xxyh";
Person.prototype.age = "20";
Person.prototype.job = "programmer";
Person.prototype.sayName = function () {
alert(this.name);
};
var person1 = new Person();
alert("name" in person1); // true
person1.name = "oooo";
alert("name" in person1); // true
結(jié)合前面的hasOwnProperty()特點(diǎn)，可以確定某個(gè)屬性是原型中的屬性還是實(shí)例中的屬性。如果in操作符返回true而hasOwnProperty返回false，則屬性是原型中的屬性。
function hasPrototypeProperty(object, name) {
return !object.hasOwnProperty(name)&& (name in object);
}
接下來(lái)，看看hasPrototypeProperty()的用法：
function Person() {
}
Person.prototype.name = "xxyh";
Person.prototype.age = "20";
Person.prototype.job = "programmer";
Person.prototype.sayName = function () {
alert(this.name);
};
var person = new Person();
alert(hasPrototypeProperty(person, "name")); // true
person.name = "oooo";
alert(hasPrototypeProperty(person, "name")); // false
在使用for-in循環(huán)時(shí)返回的是所有能夠通過(guò)對(duì)象訪問(wèn)的、可枚舉的屬性，包括實(shí)例中的屬性和原型中的屬性。屏蔽了原型中不可枚舉數(shù)據(jù)(即[[Enumerable]]標(biāo)記為false的屬性)的實(shí)例屬性也會(huì)在for-in中返回，因?yàn)楦鶕?jù)規(guī)定，開發(fā)人員定義的屬性都是可枚舉的。
要取得對(duì)象上所有可枚舉的實(shí)例屬性，可以使用Object.keys()方法。
function Person() {
}
Person.prototype.name = "xxyh";
Person.prototype.age = "20";
Person.prototype.job = "programmer";
Person.prototype.sayName = function () {
alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys); // name, age, job, sayName
var p1 = new Person();
p1.name = "oooo";
p1.age = 15;
var p1_keys = Object.keys(p1);
alert(p1_keys); // name, age
如果需要得到所有實(shí)例屬性，可以使用Object.getOwnPropertyNames()方法
var keys = Object.getOwnPropertyNames(Person.prototype); alert(keys); // "constructor,name,age,job,sayName"
3.3更簡(jiǎn)單的原型語(yǔ)法
為了精簡(jiǎn)輸入，用一個(gè)包含所有屬性和方法的對(duì)象字面量來(lái)重寫整合原型對(duì)象。
function Person() {
}
Person.prototype = {
name : "xxyh",
age : 18,
job : "programmer",
sayName : function () {
alert(this.name);
}
};
上面將Person.prototype設(shè)置為等于一個(gè)以對(duì)象字面量形式創(chuàng)建的新對(duì)象。結(jié)果相同，但是constructor屬性不在指向Person了。
通過(guò)instanceof能返回正確結(jié)果，但是constructor無(wú)法確定對(duì)象的類型：
var boy = new Person(); alert(boy instanceof Object); // true alert(boy instanceof Person); // true alert(boy.constructor == Person); // false alert(boy.constructor == Object); // true
可以通過(guò)下面的方式設(shè)置constructor的值：
function Person() {
}
Person.prototype = {
constructor : Person,
name : "xxyh",
age : 18,
job : "programmer",
sayName : function () {
alert(this.name);
}
};
3.4原型鏈的動(dòng)態(tài)性
由于在原型中查找值的過(guò)程是一次搜索，因此對(duì)原型對(duì)象所做的任何修改都會(huì)反映到實(shí)例上。但是如果重寫整個(gè)原型對(duì)象，結(jié)果就不同了。調(diào)用構(gòu)造函數(shù)時(shí)會(huì)為實(shí)例添加一個(gè)指向最初原型的[[prototype]]指針，而把原型修改為另一個(gè)對(duì)象就等于切斷了構(gòu)造函數(shù)與最初原型的聯(lián)系。實(shí)例中的指針僅指向原型，而不指向構(gòu)造函數(shù)。
function Person() {
}
var boy = new Person();
Person.prototype = {
constructor : Person,
name : "xxyh",
age : 29,
job : "programmer",
sayName : function () {
alert(this.name);
}
};
boy.sayName(); // 錯(cuò)誤
具體過(guò)程如下：
從上面可以看出，重寫原型對(duì)象切斷了現(xiàn)有原型與任何之前已經(jīng)存在的對(duì)象實(shí)例之間的聯(lián)系；它們引用的是最初的原型。
3.5原生對(duì)象的原型
所有原生引用類型都是在構(gòu)造函數(shù)的原型上定義了方法。通過(guò)原生對(duì)象的原型，不僅可以取得默認(rèn)方法，而且可以定義新方法。
String.prototype.startsWith = function (text) {
return this.indexOf(text) == 0;
};
var msg = "good morning";
alert(msg.startsWith("good")); // true
3.6原型對(duì)象的問(wèn)題
原型模式存在兩個(gè)問(wèn)題：
•在默認(rèn)情況下都取得相同的屬性值。
•原型中的所有屬性是實(shí)例共享的
下面看一個(gè)例子：
function Person() {
}
Person.prototype = {
constructor: Person,
name: "xxyh",
age : 18,
job : "programmer",
friends:["張三", "李四"],
sayName: function () {
alert(this.name);
}
};
var p1 = new Person();
var p2 = new Person();
p1.friends.push("王五");
alert(p1.friends); // 張三，李四，王五
alert(p2.friends); // 張三，李四，王五
alert(p1.friends == p2.friends); // true
上面通過(guò)p1.friends添加了一項(xiàng)，由于friends數(shù)組存在于Person.prototype中，所以在p2.friends也反映出來(lái)了?？墒牵瑢?shí)例一般都是要有屬于自己的全部屬性的。
組合使用構(gòu)造函數(shù)模式和原型模式
構(gòu)造函數(shù)模式用于定義實(shí)例屬性，原型模式用于定義方法和共享的屬性。這樣，每個(gè)實(shí)例都會(huì)有自己的一份實(shí)例屬性的副本，但是同時(shí)又共享著對(duì)方法的引用。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["張三", "李四"];
}
Person.prototype = {
constructor: Person,
sayName: function () {
alert(this.name);
}
}
var p1 = new Person("蕭蕭弈寒", 18, "programmer");
var p2 = new Person("魁拔", 10, "捉妖");
p1.friends.push("王五");
alert(p1.friends); // 張三，李四，王五
alert(p2.friends); // 張三，李四
alert(p1.friends == p2.friends); // false
alert(p1.sayName == p2.sayName); // true
上例中，實(shí)例屬性都是在構(gòu)造函數(shù)中定義的，共享屬性constructor和方法sayName()則是在原型中定義的。p1.friends的修改并不會(huì)影響到p2.friends的結(jié)果。
動(dòng)態(tài)原型模式
動(dòng)態(tài)原型模式把所有信息都封裝在了構(gòu)造函數(shù)中，而通過(guò)在構(gòu)造函數(shù)中初始化原型，又保持了同時(shí)使用構(gòu)造函數(shù)和原型的優(yōu)點(diǎn)。這就是說(shuō)，可以通過(guò)檢查某個(gè)應(yīng)該存在的方法是否有效，來(lái)決定是否需要初始化原型。
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);
}
}
}
這里只在sayName()方法不存在時(shí)，才會(huì)將它添加到原型中，只會(huì)在初次調(diào)用構(gòu)造函數(shù)時(shí)執(zhí)行。
寄生構(gòu)造函數(shù)模式
這種模式的思想是創(chuàng)建一個(gè)函數(shù)，該函數(shù)的作用是封裝創(chuàng)建對(duì)象的代碼，然后再返回新創(chuàng)建的對(duì)象。
function Person(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayName = function () {
alert(this.name);
}
return obj;
}
var boy = new Person("xxyh", 19, "programmer");
boy.sayName();
需要說(shuō)明：首先，返回的對(duì)象與構(gòu)造函數(shù)或者與構(gòu)造函數(shù)的原型屬性之間沒(méi)有關(guān)系；構(gòu)造函數(shù)返回的對(duì)象與在構(gòu)造函數(shù)外部創(chuàng)建的對(duì)象沒(méi)有不同。不能依賴instanceof操作符來(lái)確定對(duì)象類型。
穩(wěn)妥構(gòu)造函數(shù)模式
穩(wěn)妥對(duì)象指的是沒(méi)有公共屬性，而且其方法也不引用this的對(duì)象。穩(wěn)妥構(gòu)造函數(shù)遵循與寄生構(gòu)造函數(shù)類似的模式，但是有兩點(diǎn)不同：
•新創(chuàng)建對(duì)象的實(shí)例方法不引用this；
•不使用new操作符調(diào)用構(gòu)造函數(shù)
重寫Person構(gòu)造函數(shù)如下：
function Person(name, age, job) {
var obj = new Object();
obj.sayName = function () {
alert(name);
};
return obj;
}
function Person(name, age, job) {
var obj = new Object();
obj.sayName = function () {
alert(name);
};
return obj;
}
以上這篇淺談JavaScript對(duì)象的創(chuàng)建方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS中事件冒泡和事件捕獲的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
整體思路是這樣的：判斷div內(nèi)部是否為空，如果為空，給出無(wú)數(shù)據(jù)提示；否則顯示正常頁(yè)面，下面給大家分享js判斷div內(nèi)容是否為空的方法，對(duì)判斷div內(nèi)容是否為空的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
再談querySelector和querySelectorAll的區(qū)別與聯(lián)系
先按W3C的規(guī)范來(lái)說(shuō)這兩個(gè)方法應(yīng)該返回的內(nèi)容吧，大家先看下官方的解釋，然后根據(jù)需要選擇使用2012-04-04
JavaScript實(shí)現(xiàn)的in_array函數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的in_array函數(shù),用于判斷一個(gè)值是否在數(shù)組中,類似PHP的in_array函數(shù),需要的朋友可以參考下2014-08-08
這篇文章主要介紹了小程序?qū)崿F(xiàn)橫向滑動(dòng)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
單擊事件，將Td內(nèi)容更新為一個(gè)Div，其中裝載了一個(gè)Text，用于用戶輸入新的Td的值，一個(gè)確定按鈕，一個(gè)取消按鈕，用于保存或取消用戶的輸入內(nèi)容2013-01-01
javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法
這篇文章主要介紹了javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)圖片輪播切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
下面小編就為大家?guī)?lái)一篇js中數(shù)組插入、刪除元素操作的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
在學(xué)習(xí)javaScript, 學(xué)到regular expression的時(shí)候見知識(shí)點(diǎn)有些雜亂，于是將其整理了一些在本文與大家分享2014-05-05