JavaScript類和繼承 this屬性使用說明
更新時(shí)間：2010年09月03日 22:02:33 作者：
本文介紹了JavaScript里面的this屬性。這個(gè)屬性是理解JavaScript類和繼承的重要基礎(chǔ)。
this屬性表示當(dāng)前對(duì)象，如果在全局作用范圍內(nèi)使用this，則指代當(dāng)前頁(yè)面對(duì)象window； 如果在函數(shù)中使用this，則this指代什么是根據(jù)運(yùn)行時(shí)此函數(shù)在什么對(duì)象上被調(diào)用。 我們還可以使用apply和call兩個(gè)全局方法來改變函數(shù)中this的具體指向。
先看一個(gè)在全局作用范圍內(nèi)使用this的例子：
<script type="text/javascript">
console.log(this === window); // true
console.log(window.alert === this.alert); // true
console.log(this.parseInt("021", 10)); // 10
</script>
函數(shù)中的this屬性是在運(yùn)行時(shí)決定的，而不是函數(shù)定義時(shí)，如下：
// 定義一個(gè)全局函數(shù)
function foo() {
console.log(this.fruit);
}
// 定義一個(gè)全局變量，等價(jià)于window.fruit = "apple";
var fruit = "apple";
// 此時(shí)函數(shù)foo中this指向window對(duì)象
// 這種調(diào)用方式和window.foo();是完全等價(jià)的
foo(); // "apple"
// 自定義一個(gè)對(duì)象，并將此對(duì)象的屬性foo指向全局函數(shù)foo
var pack = {
fruit: "orange",
foo: foo
};
// 此時(shí)函數(shù)foo中this指向window.pack對(duì)象
pack.foo(); // "orange"
全局函數(shù)apply和call可以用來改變函數(shù)中this屬性的指向，如下：
// 定義一個(gè)全局函數(shù)
function foo() {
console.log(this.fruit);
}
// 定義一個(gè)全局變量
var fruit = "apple";
// 自定義一個(gè)對(duì)象
var pack = {
fruit: "orange"
};
// 等價(jià)于window.foo();
foo.apply(window); // "apple"
// 此時(shí)foo中的this === pack
foo.apply(pack); // "orange"
注：apply和call兩個(gè)函數(shù)的作用相同，唯一的區(qū)別是兩個(gè)函數(shù)的參數(shù)定義不同。
因?yàn)樵贘avaScript中函數(shù)也是對(duì)象，所以我們可以看到如下有趣的例子：
// 定義一個(gè)全局函數(shù)
function foo() {
if (this === window) {
console.log("this is window.");
}
}
// 函數(shù)foo也是對(duì)象，所以可以定義foo的屬性boo為一個(gè)函數(shù)
foo.boo = function() {
if (this === foo) {
console.log("this is foo.");
} else if (this === window) {
console.log("this is window.");
}
};
// 等價(jià)于window.foo();
foo(); // this is window.
// 可以看到函數(shù)中this的指向調(diào)用函數(shù)的對(duì)象
foo.boo(); // this is foo.
// 使用apply改變函數(shù)中this的指向
foo.boo.apply(window); // this is window.
先看一個(gè)在全局作用范圍內(nèi)使用this的例子：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
console.log(this === window); // true
console.log(window.alert === this.alert); // true
console.log(this.parseInt("021", 10)); // 10
</script>
函數(shù)中的this屬性是在運(yùn)行時(shí)決定的，而不是函數(shù)定義時(shí)，如下：
復(fù)制代碼 代碼如下:
// 定義一個(gè)全局函數(shù)
function foo() {
console.log(this.fruit);
}
// 定義一個(gè)全局變量，等價(jià)于window.fruit = "apple";
var fruit = "apple";
// 此時(shí)函數(shù)foo中this指向window對(duì)象
// 這種調(diào)用方式和window.foo();是完全等價(jià)的
foo(); // "apple"
// 自定義一個(gè)對(duì)象，并將此對(duì)象的屬性foo指向全局函數(shù)foo
var pack = {
fruit: "orange",
foo: foo
};
// 此時(shí)函數(shù)foo中this指向window.pack對(duì)象
pack.foo(); // "orange"
全局函數(shù)apply和call可以用來改變函數(shù)中this屬性的指向，如下：
復(fù)制代碼 代碼如下:
// 定義一個(gè)全局函數(shù)
function foo() {
console.log(this.fruit);
}
// 定義一個(gè)全局變量
var fruit = "apple";
// 自定義一個(gè)對(duì)象
var pack = {
fruit: "orange"
};
// 等價(jià)于window.foo();
foo.apply(window); // "apple"
// 此時(shí)foo中的this === pack
foo.apply(pack); // "orange"
注：apply和call兩個(gè)函數(shù)的作用相同，唯一的區(qū)別是兩個(gè)函數(shù)的參數(shù)定義不同。
因?yàn)樵贘avaScript中函數(shù)也是對(duì)象，所以我們可以看到如下有趣的例子：
復(fù)制代碼 代碼如下:
// 定義一個(gè)全局函數(shù)
function foo() {
if (this === window) {
console.log("this is window.");
}
}
// 函數(shù)foo也是對(duì)象，所以可以定義foo的屬性boo為一個(gè)函數(shù)
foo.boo = function() {
if (this === foo) {
console.log("this is foo.");
} else if (this === window) {
console.log("this is window.");
}
};
// 等價(jià)于window.foo();
foo(); // this is window.
// 可以看到函數(shù)中this的指向調(diào)用函數(shù)的對(duì)象
foo.boo(); // this is foo.
// 使用apply改變函數(shù)中this的指向
foo.boo.apply(window); // this is window.
相關(guān)文章
javascript 模式設(shè)計(jì)之工廠模式學(xué)習(xí)心得
接口的實(shí)現(xiàn)，從而使不同子類可以被同等的對(duì)待,恰當(dāng)?shù)氖褂霉S模式,但不要拘泥與形式,理解本質(zhì)。2010-04-04
面向?qū)ο蟮腏avascript之一(初識(shí)Javascript)
Javascript是一門極富表現(xiàn)力的語言，在當(dāng)今大行其道的Web浪潮中扮演著非常關(guān)鍵的作用。合理、高效地利用這門技術(shù)，可以讓我們的Web世界多姿多彩。首先，我們認(rèn)識(shí)一下這門技術(shù)的幾個(gè)獨(dú)特的特性2012-01-01
Javascript 面向?qū)ο缶幊?coolshell)
Javascript是一個(gè)類C的語言，他的面向?qū)ο蟮臇|西相對(duì)于C++/Java比較奇怪，但是其的確相當(dāng)?shù)膹?qiáng)大，在 Todd 同學(xué)的“對(duì)象的消息模型”一文中我們已經(jīng)可以看到一些端倪了2012-03-03
javascript面向?qū)ο蟮姆绞綄?shí)現(xiàn)的彈出層效果代碼
由于本人以前是.net程序員，所以即使現(xiàn)在在做前端，也習(xí)慣于用面向?qū)ο蟮姆绞骄帉慾s腳本，我想如果你以前也是或者現(xiàn)在還是名第三代程序員的話，應(yīng)該對(duì)此并不陌生。2010-01-01
Javascript 類與靜態(tài)類的實(shí)現(xiàn)
在Javascript里，對(duì)面向?qū)ο蟛]有一個(gè)直接的實(shí)現(xiàn)，對(duì)于代碼方面也是非常的靈活。2010-04-04
這里引入的是YUI 2.7.0版，只需引入yahoo.js。YUI引入了命名空間，類似于java的包。以下yahoo的工具函數(shù)包2009-07-07
js類中獲取外部函數(shù)名的方法與代碼...2007-09-09
DOMAssitant最新版 DOMAssistant 2.5發(fā)布
google code上的project ,值得大家學(xué)習(xí)它的類庫(kù)2007-12-12
在"初識(shí)Javascript"章節(jié)中，提到通過作用域和閉包來隱藏內(nèi)部細(xì)節(jié)，并給外部提供訪問接口，就初次接觸到了信息隱藏的概念了2012-01-01
學(xué)習(xí)JS面向?qū)ο蟪晒?借國(guó)慶發(fā)布個(gè)最新作品與大家交流
學(xué)習(xí)JS面向?qū)ο蟪晒?，借?guó)慶發(fā)布個(gè)最新作品與大家交流，大家可以看下。2009-10-10