本文的目的是讓大家理解什么情況下把函數(shù)的方法寫在JavaScript的構(gòu)造函數(shù)上,什么時(shí)候把方法寫在函數(shù)的
prototype屬性上;以及這樣做的好處.
為了閱讀方便,我們約定一下:把方法寫在構(gòu)造函數(shù)內(nèi)的情況我們簡(jiǎn)稱為函數(shù)內(nèi)方法,把方法寫在prototype屬性上的情況我們簡(jiǎn)稱為prototype上的方法
首先我們先了解一下這篇文章的重點(diǎn):
-
函數(shù)內(nèi)的方法: 使用函數(shù)內(nèi)的方法我們可以訪問到函數(shù)內(nèi)部的私有變量,如果我們通過構(gòu)造函數(shù)
new出來的對(duì)象需要我們操作構(gòu)造函數(shù)內(nèi)部的私有變量的話,
我們這個(gè)時(shí)候就要考慮使用函數(shù)內(nèi)的方法. -
prototype上的方法: 當(dāng)我們需要通過一個(gè)函數(shù)創(chuàng)建大量的對(duì)象,并且這些對(duì)象還都有許多的方法的時(shí)候;這時(shí)我們就要考慮在函數(shù)的
prototype上添加這些方法.
這種情況下我們代碼的內(nèi)存占用就比較小. - 在實(shí)際的應(yīng)用中,這兩種方法往往是結(jié)合使用的;所以我們要首先了解我們需要的是什么,然后再去選擇如何使用.
我們還是根據(jù)下面的代碼來說明一下這些要點(diǎn)吧,下面是代碼部分:
// 構(gòu)造函數(shù)A
function A(name) {
this.name = name || 'a';
this.sayHello = function() {
console.log('Hello, my name is: ' + this.name);
}
}
// 構(gòu)造函數(shù)B
function B(name) {
this.name = name || 'b';
}
B.prototype.sayHello = function() {
console.log('Hello, my name is: ' + this.name);
};
var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello();
a2.sayHello();
var b1 = new B('b1');
var b2 = new B('b2');
b1.sayHello();
b2.sayHello();
我們首先寫了兩個(gè)構(gòu)造函數(shù),第一個(gè)是A,這個(gè)構(gòu)造函數(shù)里面包含了一個(gè)方法sayHello;第二個(gè)是構(gòu)造函數(shù)B,
我們把那個(gè)方法sayHello寫在了構(gòu)造函數(shù)B的prototype屬性上面.
需要指出的是,通過這兩個(gè)構(gòu)造函數(shù)new出來的對(duì)象具有一樣的屬性和方法,但是它們的區(qū)別我們可以通過下面的一個(gè)圖來說明:
我們通過使用構(gòu)造函數(shù)A創(chuàng)建了兩個(gè)對(duì)象,分別是a1,a2;通過構(gòu)造函數(shù)B創(chuàng)建了兩個(gè)對(duì)象b1,b2;我們可以發(fā)現(xiàn)b1,b2這兩個(gè)對(duì)象的那個(gè)sayHello方法
都是指向了它們的構(gòu)造函數(shù)的prototype屬性的sayHello方法.而a1,a2都是在自己內(nèi)部定義了這個(gè)方法.
定義在構(gòu)造函數(shù)內(nèi)部的方法,會(huì)在它的每一個(gè)實(shí)例上都克隆這個(gè)方法;定義在構(gòu)造函數(shù)的prototype屬性上的方法會(huì)讓它的所有示例都共享這個(gè)方法,但是不會(huì)在每個(gè)實(shí)例的內(nèi)部重新定義這個(gè)方法.
如果我們的應(yīng)用需要?jiǎng)?chuàng)建很多新的對(duì)象,并且這些對(duì)象還有許多的方法,為了節(jié)省內(nèi)存,我們建議把這些方法都定義在構(gòu)造函數(shù)的prototype屬性上
當(dāng)然,在某些情況下,我們需要將某些方法定義在構(gòu)造函數(shù)中,這種情況一般是因?yàn)槲覀冃枰?strong>訪問構(gòu)造函數(shù)內(nèi)部的私有變量.
下面我們舉一個(gè)兩者結(jié)合的例子,代碼如下:
function Person(name, family) {
this.name = name;
this.family = family;
var records = [{type: "in", amount: 0}];
this.addTransaction = function(trans) {
if(trans.hasOwnProperty("type") && trans.hasOwnProperty("amount")) {
records.push(trans);
}
}
this.balance = function() {
var total = 0;
records.forEach(function(record) {
if(record.type === "in") {
total += record.amount;
}
else {
total -= record.amount;
}
});
return total;
};
};
Person.prototype.getFull = function() {
return this.name + " " + this.family;
};
Person.prototype.getProfile = function() {
return this.getFull() + ", total balance: " + this.balance();
};
在上面的代碼中,我們定義了一個(gè)Person構(gòu)造函數(shù);這個(gè)函數(shù)有一個(gè)內(nèi)部的私有變量records,這個(gè)變量我們是不希望通過函數(shù)內(nèi)部以外的方法
去操作這個(gè)變量,所以我們把操作這個(gè)變量的方法都寫在了函數(shù)的內(nèi)部.而把一些可以公開的方法寫在了Person的prototype屬性上,比如方法getFull和getProfile.
把方法寫在構(gòu)造函數(shù)的內(nèi)部,增加了通過構(gòu)造函數(shù)初始化一個(gè)對(duì)象的成本,把方法寫在prototype屬性上就有效的減少了這種成本.
你也許會(huì)覺得,調(diào)用對(duì)象上的方法要比調(diào)用它的原型鏈上的方法快得多,其實(shí)并不是這樣的,如果你的那個(gè)對(duì)象上面不是有很多的原型的話,它們的速度其實(shí)是差不多的
另外,需要注意的一些地方:
- 首先如果是在函數(shù)的
prototype屬性上定義方法的話,要牢記一點(diǎn),如果你改變某個(gè)方法,那么由這個(gè)構(gòu)造函數(shù)產(chǎn)生的所有對(duì)象的那個(gè)方法都會(huì)被改變. - 還有一點(diǎn)就是變量提升的問題,我們可以稍微的看一下下面的代碼:
func1(); // 這里會(huì)報(bào)錯(cuò),因?yàn)樵诤瘮?shù)執(zhí)行的時(shí)候,func1還沒有被賦值. error: func1 is not a function var func1 = function() { console.log('func1'); }; func2(); // 這個(gè)會(huì)被正確執(zhí)行,因?yàn)楹瘮?shù)的聲明會(huì)被提升. function func2() { console.log('func2'); } - 關(guān)于對(duì)象序列化的問題.定義在函數(shù)的
prototype上的屬性不會(huì)被序列化,可以看下面的代碼:
我們可以看到輸出結(jié)果是function A(name) { this.name = name; } A.prototype.sayWhat = 'say what...'; var a = new A('dreamapple'); console.log(JSON.stringify(a));{"name":"dreamapple"}
參考的文章或者問答:
