DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中的this引用(推薦)
JavaScript中的this引用(推薦)
編輯:關於JavaScript     

this

this是javascript的一個關鍵字,隨著函數使用場合不同,this的值會發生變化。但是總有一個原則,那就是this指的是調用函數的那個對象。

一、定義

1、this是函數內部的一個特殊對象(或this引用)--它引用的是函數據以執行的環境對象。

2、this引用是一種在JavaScript的代碼中隨時都可以使用的只讀變量。 this引用 引用(指向)的是一個對象,它有著會根據代碼上下文語境自動改變其引用對象的特性。它的引用規則如下:

• 在最外層代碼中,this引用 引用的是全局對象。

• 在函數內,this引用根據函數調用的方式的不同而有所不同。如下

1)構造函數的調用--this引用 引用的是所生成的對象

2)方法調用--this引用 引用的是接收方對象

3)apply或call調用--this引用 引用的是有apply或call的參數指定的對象

4)其他方式的調用--this引用 引用的是全局對象

二、根據以上所述及網上的相關資料,this對象(引用)的使用情況總結如下:

JavaScript是動態語言,this關鍵字在執行的時候才能確定是誰。所以this永遠指向調用者,即對“調用對象”的引用。簡單點說就是調用的方法屬於哪個對象,this就指向那個對象。根據函數調用方式的不同,this可以 指向全局對象,當前對象,或其他任意對象。

1、全局函數調用,全局函數中的this會指向全局對象window。(函數調用模式)

//代碼清單1
<script type="text/javascript">
var message = "this in window"; //這一句寫在函數外面和裡面是一樣效果
function func() {
if(this == window){
alert("this == window"); 
alert(message);
this.methodA = function() {
alert("I'm a function");
}
}
}
func(); //如果不調用func方法,則裡面定義的屬性或方法會取不到 
methodA();
</script>

func()的調用結果為this == window, this in window

methodA()的調用結果為I'm a function

2、構造函數調用,即使用new的方式實例化一個對象,this會指向通過構造函數生成的對象。(構造器調用模式)

代碼清單2

<script type="text/javascript">
function Func() {
if (this == window) {
alert("this == window");
}
else {
alert("this != window");
}
this.fieldA = "I'm a field";
alert(this);
}
var obj = new Func();
alert(obj.fieldA); //this指向的是對象obj
</script>

3、對象方法的調用,this指向當前對象。任何函數,只要該函數被當做一個對象的方法使用或賦值時,該函數內部的this都是對該對象本身的引用。也可理解為this寫在一個普通對象中,this指向的就是對象本身。(方法調用模式)

(方法的定義: 作為對象屬性的函數稱為方法)

//代碼清單3
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
if(this == window){
alert("this == window");
}else{
alert("method is called: " + this.x);
}
}
};
obj.doit(); //this指向的是對象obj
</script>

4、通過apply或call方法調用,this指向傳入的對象。

apply 或call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。如果沒有提供 thisObj 參數,那麼 Global 對象被用作 thisObj。 (apply調用模式)

//代碼清單4
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
alert("method is called: " + this.x);
}
};
var obj2 = {x: 4};
obj.doit(); //3,this指向obj
obj.doit.apply(obj2); //4,this指向obj2
obj.doit.call(obj2); //4,this指向obj2
</script>

5、原型鏈中的this --原型對象及構造函數中的this指向新創建的實例對象。使用prototype擴展方法可以使用this獲取到源對象的實例,私有字段無法通過原型鏈獲取。

//代碼清單5
<script type="text/javascript">
function Func() {
this.fieldA = "I'm a field";
var privateFieldA = "I'm a var";
}
Func.prototype = {
ExtendMethod: function(str) {
alert(str + " :" + this.fieldA);
alert(privateFieldA); //出錯,私有字段無法通過原型鏈獲取。
}
};
var obj = new Func();
obj.ExtendMethod("From prototype"); //此時構造函數及原型鏈中的this指向對象obj
</script>

6、閉包中的this --閉包:寫在function中的function,this指向全局對象window。

6.1 對象中的閉包

//代碼清單6
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
return function(){
return this.name;
}
}
};
alert(obj.getNameFunc()()); //The window
</script>

此時,閉包中的this指向全局對象window,只能取到全局對象的屬性。那麼對象內部的屬性(外部函數的變量)要想訪問又怎麼辦呢? 把外部函數的this對象保存在一個閉包能訪問的變量就可以了。看如下代碼:

//代碼清單7
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
var that = this;
return function(){
return that.name;
}
}
};
alert(obj.getNameFunc()()); //My object
</script>

將外部函數的this賦值給that變量,就能讀取到外部函數的變量。

6.2 不管是直接引用function,還是實例化一個function,其返回的閉包函數裡的this都是指向window。

//代碼清單8
<script type="text/javascript">
function a() {
alert(this == window);
var that = this;
var func = function() {
alert(this == window);
alert(that);
};
return func;
}
var b = a();
b(); //true, true, [object Window]
var c = new a();
c(); //false, true, [object object]
</script>

7、函數使用bind()方法綁定一個對象,this會指向傳給bind()函數的值。

//代碼清單9
<script type="text/javascript">
window.color = "red";
var obj = {color: "blue"};
function sayColor(){
alert(this.color);
}
var objSayColor = sayColor.bind(obj);
objSayColor(); //blue
</script>

8、內嵌在HTML元素中的腳本段,this指向元素本身

//代碼清單10
<div onclick="test(this)" id="div">Click Me</div>
<script type="text/javascript">
function test(obj) {
alert(obj); //[object HTMLDivElement]
}
</script>

9、寫在script標簽中:this就是指全局對象window。這個跟第一點的全局函數調用的全局變量一樣。

以上所述是小編給大家介紹的JavaScript中的this引用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved