詳解javascript基本數據類型「javascript創建對象的幾種方式」

工廠模式

考慮到ECMAScript無法創建類,開發人員就發明了一種函數,用函數來封裝以特定接口創建對象的細節,如下例子所示:

function createPerson(name, age, job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function() {
 console.log(this.name)
 }
 return o;
}
var person1 = createPerson('feng', 25, 'enginner');
var person2 = createPerson('yun', 52, 'doctor');

可以無數次調用createPerson(), 每次都會返回一個包含三個屬性一個方法的對象。工廠模式雖然解決了創建多個相似對象的問題,但是無法解決對象識別的問題(類型都是Object,我們希望能返回類型為function並且具有特徵name的對象),於是就有了下面的構造函數模式。

JavaScript 創建對象的四種常見模式

構造函數模式

構造函數可以用來創建特定類型的對象

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() {
 console.log(this.name)
 }
}
var person1 = new Person('feng', 25, 'enginner');
var person2 = new Person('yun', 52, 'doctor');

在本方法中我們使用到了new操作符來達到目的。以這種方式調用構造函數實際上會經歷一下四個步驟

  • 創建一個新對象(讓空對象的’_proto’屬性指向Person.prototype,詳見下文)
  • 將構造函數的作用域賦值給新對象(因此this指向了這個新對象)
  • 執行構造函數中的代碼(為這個新對象添加屬性)
  • 返回新對象

創建自定義的構造函數意味着將來可以將它的實例標誌為一個特定的類型;而這正是構造函數模式勝過工廠模式的地方。

console.log(person1.constructor === Person);//true
console.log(person2.constructor === Person);//true
console.log(person1 instanceof Object);//true
console.log(person1 instanceof Person);//true
console.log(person2 instanceof Object);//true
console.log(person2 instanceof Person);//true

何為構造函數

構造函數與其他函數唯一的區別,就在於調用他們的方式不同。不過,構造函數畢竟也是函數,不存在定義構造函數的特殊語法。任何函數,只要通過new操作符來調用,那他就可以當做構造函數;不通過new來調用,則就是普通函數。上面構造器模式中的Person()函數可以通過下面任何一種方式來調用:

var person = new Person('feng', 25, 'enginner');
console.log(person.sayName());//feng
Person('duang', 101, 'god');//函數直接調用,this綁定到window
window.sayName();//duang

構造函數的問題

每個方法都要在每個實例上重新創建一遍。在前面的例子中,person1和person2都有一個名為sayName()的方法,但那兩個方法不是同一個Function的實例(ECMAScript中,函數就是對象,因此每定義一個函數,也就實例化了一個對象)。從邏輯上講,此時的構造函數也可以這樣定義:

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = new Function("console.log(this.name)")
}

因此不同實例上的同名函數實不相等的

console.log(person1.sayName == person2.sayName);//false

這樣做浪費內存,我們希望得到一種能把共享的屬性和方法放到同一個容器的模式,於是就有了下文的原型模式。

原型模式

原型模式初步

我們創建的每個函數在生成的一瞬間,都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可由特定類型的所有實例共享的實例和方法,這個對象一般稱為這個函數的 原型對象(prototype)。所有原型對象都會自動獲得一個constructor(構造函數)屬性,這個屬性包含一個指回構造函數。

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

function Person(){}
Person.prototype.name = 'Nicholas';
Person.prototype.age = '29';
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function(){
 console.log(this.name);
}
var person1 = new Person();
person1.sayName();//feng
var person2 = new Person();
person.sayName();//feng
console.log(person1.sayName == person2.sayName);//true

與構造函數模式不同的是,新對象的屬性和方法是有所有實例所共享的。

理解原型

默認情況下,具體的關係如下所示

JavaScript 創建對象的四種常見模式

原型鏈示意圖

註:

(2)中,如果手動分配了原型指針(重寫了原型對象,比如將原型對象重新聲明為一個字面量對象),則需要手動為原型添加constructor屬性,重新建立構造函數和原型對象之間的關係

(5)中,Chrome 中可以通過_proto_訪問到該屬性,而在IE中是不可見的。

上面那段代碼參考上圖的關係如下:

JavaScript 創建對象的四種常見模式

從上圖可見,構造函數和實例對象沒有直接關係!當解釋器讀取某個對象的某個屬性的時候,都會按照上圖中的實現執行一遍搜索,目標是具有給定名字的屬性。搜索首先從對象實例開始,如果在實例中找到該屬性則返回,如果沒有則繼續搜索指針指向的原型對象(prototype),如果還是沒有找到則繼續遞歸prototype的prototype對象,直到找到為止,如果遞歸到object(原型鏈最頂端)仍然沒有則返回錯誤。

可以通過對象事例訪問保存在原型中的值,但卻不能通過對象事例重寫原型中的值。如果在實例中定義和原型中同名的屬性或函數,則會事例中的屬性會覆蓋原型中的同名屬性。

重寫原型

上面例子中,每添加一個屬性和方法都要敲一遍Person.prototype。為了減少不必要的輸入,更常見的寫法是用一個包含所有屬性和方法的字面量對象來從斜原型對象,代碼如下:

function Person(){}
Person.prototype = {
 name: 'Nicholas',
 age: '29',
 job: 'Software Engineer',
 sayName: function(){
 console.log(this.name);
 }
}

但是這麼寫有一個例外:constructor屬性不再指向Person了。因為這樣寫,本質上重寫了prototype對象,因此constructor屬性也就變成了新的對象的constructor(指向Object構造函數),不再指向Person函數。此時儘管instanceOf操作符還能返回正確結果,但是通過constructor已經無法確定對象的類型了。

var friend = new Person();
console.log(friend instanceof Object);//true
console.log(friend.instanceof Person);//true
console.log(friend.constructor == Person);//false
console.log(friend.constructor == Object);//true

所以如果constructor屬性真的很重要的話,可以向下面的方式特意將它設置為適當的值:

function Person(){}
Person.prototype = {
 constructor: Person,
 name: 'Nicholas',
 age: '29',
 job: 'Software Engineer',
 sayName: function(){
 console.log(this.name);
 }
} 

in && hasOwnProperty

如何確認屬性是保存在原型中還是保存在實例對象中呢?組合使用in和hasOwnProperty

  • in操作符,如果value in object 返回true則表示這個value屬性要麼能在實例中訪問,要麼保存在原型中,反正能通過原型鏈訪問到
  • hasOwnProperty只在屬性存在於實例中時才返回true
  • function hasPrototypeProperty(object, name) {
  • return !object.hasOwnProperty && (name in object)
  • }

上面這段代碼返回true則表示,屬性在原型中而不在實例對象中

原型模式的問題

首先,他省略了為構造函數傳遞參數這個環節,結果所有屬性默認情況下都獲得了相同的屬性值。還有最重要的問題是由其共享的本質導致的。

原型中所有屬性被很多實力共享,這種共享對函數很適合,對那些事基本值的屬性也還說得過去,然而,對那些包含引用值得屬性來說,問題就比較大了:

function Person(){}
Person.prototype = {
 constructor: Person,
 name: 'Nicholas',
 age: '29',
 job: 'Software Engineer',
 friends:['aa', 'bb', 'cc'],
 sayName: function(){
 console.log(this.name);
 }
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push('dd');
console.log(person1.friends);//aa,bb,cc,dd
console.log(person2.friends);//aa,bb,cc,dd
console.log(person1.friends === person2.friends);//true

可見,一個事例修改原型中的某個引用類型屬性,其他事例都會受到影響。正是這個原因導致了很少有人單獨使用原型模式,於是就有了下文的混合模式。

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

組合使用原型模式和構造函數模式是最常見,應用最廣泛的創建自定義類型的方式:構造函數模式用來定義實力屬性,原型模式用來定義方法和共享的屬性。結果,每個實例都會有自己的一份實例屬性的副本,同時共享着對方法的引用。另外這種混合模式,還支持想構造函數傳遞參數。

function Person(name, age, job){ 
 this.name = name;
 this.age = age;
 this.job = job;
 this.friends =['aa', 'bb'];
}
Person.prototype = {
 constructor: Person,
 sayName: function(){
 console.log(this.name);
 }
}
var person1 = new Person("Nicholas","29","Software Engineer");
var person2 = new Person("Grep","27","Doctoer");
person1.friends.push('cc');
console.log(person1.friends);//aa,bb,cc
console.log(person2.friends);//aa,bb
console.log(person1.friends === person2.friends);//false
console.log(person1.sayName === person2.sayName);//true

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/273263.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-17 14:05
下一篇 2024-12-17 14:05

相關推薦

發表回復

登錄後才能評論