JavaScript中幾個(gè)重要的屬性(this、constructor、prototype)介紹
更新時(shí)間：2013年05月19日 15:32:05 作者：
this表示當(dāng)前對(duì)象，如果在全局作用范圍內(nèi)使用this，則指代當(dāng)前頁面對(duì)象window，prototype本質(zhì)上還是一個(gè)JavaScript對(duì)象，constructor始終指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)
this
this表示當(dāng)前對(duì)象，如果在全局作用范圍內(nèi)使用this，則指代當(dāng)前頁面對(duì)象window； 如果在函數(shù)中使用this，則this指代什么是根據(jù)運(yùn)行時(shí)此函數(shù)在什么對(duì)象上被調(diào)用。 我們還可以使用apply和call兩個(gè)全局方法來改變函數(shù)中this的具體指向。
先看一個(gè)在全局作用范圍內(nèi)使用this的例子：
<script type=>
console.log( === window);
console.log(window.alert === .alert);
console.log(.parseInt(, 10));
</script>
函數(shù)中的this是在運(yùn)行時(shí)決定的，而不是函數(shù)定義時(shí)，如下：
foo() {
console.log(.fruit);
}
fruit = ;
foo();
pack = {
fruit: ,
foo: foo
};
pack.foo();
全局函數(shù)apply和call可以用來改變函數(shù)中this的指向，如下：
foo() {
console.log(.fruit);
}
fruit = ;
pack = {
fruit:
};
foo.apply(window);
foo.apply(pack);
注：apply和call兩個(gè)函數(shù)的作用相同，唯一的區(qū)別是兩個(gè)函數(shù)的參數(shù)定義不同。
因?yàn)樵贘avaScript中函數(shù)也是對(duì)象，所以我們可以看到如下有趣的例子：
foo() {
( === window) {
console.log();
}
}
foo.boo = () {
( === foo) {
console.log();
} ( === window) {
console.log();
}
};
foo();
foo.boo();
foo.boo.apply(window);
prototype
prototype本質(zhì)上還是一個(gè)JavaScript對(duì)象。 并且每個(gè)函數(shù)都有一個(gè)默認(rèn)的prototype屬性。
如果這個(gè)函數(shù)被用在創(chuàng)建自定義對(duì)象的場(chǎng)景中，我們稱這個(gè)函數(shù)為構(gòu)造函數(shù)。 比如下面一個(gè)簡單的場(chǎng)景：
Person(name) {
.name = name;
}
Person.prototype = {
getName: () {
.name;
}
}
zhang = Person();
console.log(zhang.getName());
作為類比，我們考慮下JavaScript中的數(shù)據(jù)類型 - 字符串（String）、數(shù)字（Number）、數(shù)組（Array）、對(duì)象（Object）、日期（Date）等。 我們有理由相信，在JavaScript內(nèi)部這些類型都是作為構(gòu)造函數(shù)來實(shí)現(xiàn)的，比如：
Array() {
}
arr1 = Array(1, 56, 34, 12);
arr2 = [1, 56, 34, 12];
同時(shí)對(duì)數(shù)組操作的很多方法（比如concat、join、push）應(yīng)該也是在prototype屬性中定義的。
實(shí)際上，JavaScript所有的固有數(shù)據(jù)類型都具有只讀的prototype屬性（這是可以理解的：因?yàn)槿绻薷牧诉@些類型的prototype屬性，則哪些預(yù)定義的方法就消失了）， 但是我們可以向其中添加自己的擴(kuò)展方法。
Array.prototype.min = () {
min = [0];
( i = 1; i < .length; i++) {
([i] < min) {
min = [i];
}
}
min;
};
console.log([1, 56, 34, 12].min());
注意：這里有一個(gè)陷阱，向Array的原型中添加擴(kuò)展方法后，當(dāng)使用for-in循環(huán)數(shù)組時(shí)，這個(gè)擴(kuò)展方法也會(huì)被循環(huán)出來。
下面的代碼說明這一點(diǎn)（假設(shè)已經(jīng)向Array的原型中擴(kuò)展了min方法）：
arr = [1, 56, 34, 12];
total = 0;
( i arr) {
total += parseInt(arr[i], 10);
}
console.log(total);
解決方法也很簡單：
arr = [1, 56, 34, 12];
total = 0;
( i arr) {
(arr.hasOwnProperty(i)) {
total += parseInt(arr[i], 10);
}
}
console.log(total);
constructor
constructor始終指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)。比如下面例子：
arr = [1, 56, 34, 12];
console.log(arr.constructor === Array);
Foo = () { };
console.log(Foo.constructor === Function);
obj = Foo();
console.log(obj.constructor === Foo);
console.log(obj.constructor.constructor === Function);
但是當(dāng)constructor遇到prototype時(shí)，有趣的事情就發(fā)生了。
我們知道每個(gè)函數(shù)都有一個(gè)默認(rèn)的屬性prototype，而這個(gè)prototype的constructor默認(rèn)指向這個(gè)函數(shù)。如下例所示：
Person(name) {
.name = name;
};
Person.prototype.getName = () {
.name;
};
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);
當(dāng)時(shí)當(dāng)我們重新定義函數(shù)的prototype時(shí)（注意：和上例的區(qū)別，這里不是修改而是覆蓋）， constructor的行為就有點(diǎn)奇怪了，如下示例：
Person(name) {
.name = name;
};
Person.prototype = {
getName: () {
.name;
}
};
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);
為什么呢？
原來是因?yàn)楦采wPerson.prototype時(shí)，等價(jià)于進(jìn)行如下代碼操作：
Person.prototype = Object({
getName: () {
.name;
}
});
而constructor始終指向創(chuàng)建自身的構(gòu)造函數(shù)，所以此時(shí)Person.prototype.constructor === Object，即是：
Person(name) {
.name = name;
};
Person.prototype = {
getName: () {
.name;
}
};
p = Person();
console.log(p.constructor === Object);
console.log(Person.prototype.constructor === Object);
console.log(p.constructor.prototype.constructor === Object);
怎么修正這種問題呢？方法也很簡單，重新覆蓋Person.prototype.constructor即可：
Person(name) {
.name = name;
};
Person.prototype = Object({
getName: () {
.name;
}
});
Person.prototype.constructor = Person;
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);
this表示當(dāng)前對(duì)象，如果在全局作用范圍內(nèi)使用this，則指代當(dāng)前頁面對(duì)象window； 如果在函數(shù)中使用this，則this指代什么是根據(jù)運(yùn)行時(shí)此函數(shù)在什么對(duì)象上被調(diào)用。 我們還可以使用apply和call兩個(gè)全局方法來改變函數(shù)中this的具體指向。
先看一個(gè)在全局作用范圍內(nèi)使用this的例子：
復(fù)制代碼 代碼如下:
<script type=>
console.log( === window);
console.log(window.alert === .alert);
console.log(.parseInt(, 10));
</script>
函數(shù)中的this是在運(yùn)行時(shí)決定的，而不是函數(shù)定義時(shí)，如下：
復(fù)制代碼 代碼如下:
foo() {
console.log(.fruit);
}
fruit = ;
foo();
pack = {
fruit: ,
foo: foo
};
pack.foo();
全局函數(shù)apply和call可以用來改變函數(shù)中this的指向，如下：
復(fù)制代碼 代碼如下:
foo() {
console.log(.fruit);
}
fruit = ;
pack = {
fruit:
};
foo.apply(window);
foo.apply(pack);
注：apply和call兩個(gè)函數(shù)的作用相同，唯一的區(qū)別是兩個(gè)函數(shù)的參數(shù)定義不同。
因?yàn)樵贘avaScript中函數(shù)也是對(duì)象，所以我們可以看到如下有趣的例子：
復(fù)制代碼 代碼如下:
foo() {
( === window) {
console.log();
}
}
foo.boo = () {
( === foo) {
console.log();
} ( === window) {
console.log();
}
};
foo();
foo.boo();
foo.boo.apply(window);
prototype
prototype本質(zhì)上還是一個(gè)JavaScript對(duì)象。 并且每個(gè)函數(shù)都有一個(gè)默認(rèn)的prototype屬性。
如果這個(gè)函數(shù)被用在創(chuàng)建自定義對(duì)象的場(chǎng)景中，我們稱這個(gè)函數(shù)為構(gòu)造函數(shù)。 比如下面一個(gè)簡單的場(chǎng)景：
復(fù)制代碼 代碼如下:
Person(name) {
.name = name;
}
Person.prototype = {
getName: () {
.name;
}
}
zhang = Person();
console.log(zhang.getName());
作為類比，我們考慮下JavaScript中的數(shù)據(jù)類型 - 字符串（String）、數(shù)字（Number）、數(shù)組（Array）、對(duì)象（Object）、日期（Date）等。 我們有理由相信，在JavaScript內(nèi)部這些類型都是作為構(gòu)造函數(shù)來實(shí)現(xiàn)的，比如：
Array() {
}
arr1 = Array(1, 56, 34, 12);
arr2 = [1, 56, 34, 12];
同時(shí)對(duì)數(shù)組操作的很多方法（比如concat、join、push）應(yīng)該也是在prototype屬性中定義的。
實(shí)際上，JavaScript所有的固有數(shù)據(jù)類型都具有只讀的prototype屬性（這是可以理解的：因?yàn)槿绻薷牧诉@些類型的prototype屬性，則哪些預(yù)定義的方法就消失了）， 但是我們可以向其中添加自己的擴(kuò)展方法。
Array.prototype.min = () {
min = [0];
( i = 1; i < .length; i++) {
([i] < min) {
min = [i];
}
}
min;
};
console.log([1, 56, 34, 12].min());
注意：這里有一個(gè)陷阱，向Array的原型中添加擴(kuò)展方法后，當(dāng)使用for-in循環(huán)數(shù)組時(shí)，這個(gè)擴(kuò)展方法也會(huì)被循環(huán)出來。
下面的代碼說明這一點(diǎn)（假設(shè)已經(jīng)向Array的原型中擴(kuò)展了min方法）：
arr = [1, 56, 34, 12];
total = 0;
( i arr) {
total += parseInt(arr[i], 10);
}
console.log(total);
解決方法也很簡單：
arr = [1, 56, 34, 12];
total = 0;
( i arr) {
(arr.hasOwnProperty(i)) {
total += parseInt(arr[i], 10);
}
}
console.log(total);
constructor
constructor始終指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)。比如下面例子：
復(fù)制代碼 代碼如下:
arr = [1, 56, 34, 12];
console.log(arr.constructor === Array);
Foo = () { };
console.log(Foo.constructor === Function);
obj = Foo();
console.log(obj.constructor === Foo);
console.log(obj.constructor.constructor === Function);
但是當(dāng)constructor遇到prototype時(shí)，有趣的事情就發(fā)生了。
我們知道每個(gè)函數(shù)都有一個(gè)默認(rèn)的屬性prototype，而這個(gè)prototype的constructor默認(rèn)指向這個(gè)函數(shù)。如下例所示：
復(fù)制代碼 代碼如下:
Person(name) {
.name = name;
};
Person.prototype.getName = () {
.name;
};
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);
當(dāng)時(shí)當(dāng)我們重新定義函數(shù)的prototype時(shí)（注意：和上例的區(qū)別，這里不是修改而是覆蓋）， constructor的行為就有點(diǎn)奇怪了，如下示例：
復(fù)制代碼 代碼如下:
Person(name) {
.name = name;
};
Person.prototype = {
getName: () {
.name;
}
};
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);
為什么呢？
原來是因?yàn)楦采wPerson.prototype時(shí)，等價(jià)于進(jìn)行如下代碼操作：
復(fù)制代碼 代碼如下:
Person.prototype = Object({
getName: () {
.name;
}
});
而constructor始終指向創(chuàng)建自身的構(gòu)造函數(shù)，所以此時(shí)Person.prototype.constructor === Object，即是：
復(fù)制代碼 代碼如下:
Person(name) {
.name = name;
};
Person.prototype = {
getName: () {
.name;
}
};
p = Person();
console.log(p.constructor === Object);
console.log(Person.prototype.constructor === Object);
console.log(p.constructor.prototype.constructor === Object);
怎么修正這種問題呢？方法也很簡單，重新覆蓋Person.prototype.constructor即可：
復(fù)制代碼 代碼如下:
Person(name) {
.name = name;
};
Person.prototype = Object({
getName: () {
.name;
}
});
Person.prototype.constructor = Person;
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);
相關(guān)文章
這篇文章主要介紹了JavaScript中的cacheStorage使用詳解,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07
Zero Clipboard js+swf實(shí)現(xiàn)的復(fù)制功能使用方法
如何使用 Zero Clipboard ,其實(shí)注意測(cè)試環(huán)境要在 web環(huán)境中。2010-03-03
JavaScript 學(xué)習(xí)筆記（十二） dom
新的一章的學(xué)習(xí)----Dom，重點(diǎn)啊2010-01-01
JavaScript高級(jí)程序設(shè)計(jì)（第3版）學(xué)習(xí)筆記8 js函數(shù)（中）
接著看函數(shù)——這個(gè)具有魔幻色彩的對(duì)象。在上篇文章中說函數(shù)內(nèi)部屬性時(shí)，還遺留了一個(gè)this內(nèi)部屬性沒有解釋，不過在說this之前，我想先說一說執(zhí)行環(huán)境和作用域的概念2012-10-10
JavaScript創(chuàng)建對(duì)象的七種方式全面總結(jié)
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象的七種方式,工廠模式,構(gòu)造函數(shù)模式,原型模式等分別在本文中做出了講解，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
javascript學(xué)習(xí)筆記整理（概述、變量、數(shù)據(jù)類型簡介）
這篇文章主要介紹了javascript學(xué)習(xí)筆記整理（概述-變量-數(shù)據(jù)類型）,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了DOM基礎(chǔ)教程之使用DOM控制表單的相關(guān)資料,需要的朋友可以參考下2015-01-01
詳解JavaScript中雙等號(hào)引起的隱性類型轉(zhuǎn)換
JavaScript中由==判斷所引起的轉(zhuǎn)換會(huì)引發(fā)解釋器的一些列執(zhí)行步驟,接下來我們就來詳解JavaScript中雙等號(hào)引起的隱性類型轉(zhuǎn)換,需要的朋友可以參考下2016-05-05
本文譯自 Github 上的一篇文章，目的是對(duì)還不太熟悉 ES6語法的同學(xué)做一個(gè)簡單的掃盲。下面一起來學(xué)習(xí)。2016-07-07
JavaScript多線程運(yùn)行庫Nexus.js詳解
這篇文章主要介紹了JavaScript多線程運(yùn)行庫Nexus.js的學(xué)習(xí)心得以及代碼分享，有需要的朋友一起參考學(xué)習(xí)下吧。2017-12-12