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