DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> this和執行上下文實現代碼
this和執行上下文實現代碼
編輯:關於JavaScript     
函數的執行上下文由當前的運行環境而定:
1. 全局變量和全局函數附屬於全局對象(window),因此使用”var”或”this”兩種方法定義全局變量是等效的。
2. 執行上下文和作用域不同。執行上下文在運行時確定,隨時可能改變,而作用域則在定義時確定,永遠不會變。
3. 如果當前執行的是一個對象的方法,則執行上下文就是這個方法所附屬的對象。
4. 如果當前是一個創建對象的過程或者執行一個對象的方法,則執行上下文就是這個正在被創建的對象。
5. 如果一個方法在執行時沒有明確指定附屬對象,則這個方法的上下文為全局對象。
6. 使用call和apply可以改變對象的執行上下文。
看下面的例子:
復制代碼 代碼如下:
var v1 = "global variable"; //全局變量附屬於對象
//this.v1 = "global variable with this"; //全局變量定義時使用var v1和this.v1兩種方法等效。
function func1(){
var v1 = "part variable";
writeHtml(v1);
writeHtml(this.v1);
}
func1(); //part variable
//global variable

因為func1中有和全局對象同名的v1變量,所以在func1中直接引用v1引用的是func1中定義的變量。javascript同樣有局部變量隱藏全局變量的特性。但func1沒有明確的指定附屬對象,因此他的執行上下文是全局對象,使用this引用變量的是全局變量。
再看一個稍微復雜一點的例子:
復制代碼 代碼如下:
function ftest(){
var v = "v1v1v1";
this.this_v = "this_v";
return function(){
writeHtml(v);
writeHtml(this.this_v);
}
}
var a = ftest();
var v = "v2v2v2";
writeHtml(this_v); // this_v
a(); //v1v1v1
//this_v

當ftest當做函數來執行時,上下文為全局對象。所以在ftest中使用this定義的變量成為了全局變量。所以我們在ftest外面直接使用變量名訪問this_v的值。但是,由於ftest中返回的匿名函數是定義在ftest內部的,所以這個匿名函數的作用域就是在ftest內部。因此當有全局變量v和局部變量v同名時,這個匿名函數訪問到的是ftest內部定義的變量v。
接下來把ftest當做類,使用new關鍵字來實例化:
復制代碼 代碼如下:
function ftest(){
var v = "v1v1v1";
this.this_v = "this_v";
return function(){
writeHtml(v);
writeHtml(this.this_v);
}
}
var a = new ftest();
var v = "v2v2v2";
//writeHtml(this_v); // 錯誤:this_v未定義
a(); //v1v1v1
//undefined

把ftest當做對象來實例化時,在對象的創建過程中,上下文為被創建的對象本身。注意,這個時候創建的對象是ftest的實例,而創建完成以後又返回了一個函數,這導致了new ftest()實例化後返回的是一個函數,而不是ftest()實例化後對象的引用。因此,這個已經實例化的對象無法被引用。當我們定義這個被返回的函數時,因為沒有用this指定這個函數的上下文,因此這個被返回的函數上下文為全局對象,作用域為ftest()函數內部。所以函數a()執行時的由於上下文中沒有定義this_v變量,導致了訪問錯誤。
注意,上面的代碼:
復制代碼 代碼如下:
function ftest(){
return function(){
}
}

這樣的形式並不是一個靜態封裝環境,靜態封裝環境應該是:在一個函數定義完成後立即執行,並且執行完成後返回函數中的某一個內部函數。
我們看下面一個例子,觀察作用域和上下文對變量引用的影響。
復制代碼 代碼如下:
var v = "global variable";
function method(){
writeHtml(v);
writeHtml(this.v);
}
var Class1 = function(){
var v = "private variable";
this.v = "object variable";

var method2 = method;
this.method2 = method;

var method3 = function(){
writeHtml(v);
writeHtml(this.v);
}
this.method3 = function(){
writeHtml(v);
writeHtml(this.v);
}

method2(); //global variable
//global variable
this.method2(); //global variable
//object variable
method3(); //private variable
//global variable
this.method3();//private variable
//object variable
}
var obj = new Class1();


由於method在全局中定義,所以method的作用域在定義的時候就被確定為全局的。所以method2在Class1內部被調用時,其作用域與是全局,上下文是全局對象。因此,在函數中訪問到的變量都是全局變量。
同理,this.method2在被調用時,其作用域是全局,但是由於該函數在定義時使用this關鍵字指明了其上下文為Class1的對象,所以在該函數訪問沒有上下文限定的變量時訪問到的是全局變量,訪問有上下文限定的變量時為訪問到的是當前上下文中對應的變量。
在調用method3和this.method3時,在訪問沒有上下文限定的變量時訪問到的是局部變量,因為局部變量隱藏了全局變量。有上下文限定時和method2相同,訪問到的是當前上下問文中的變量。
使用call和apply可以改變執行上下文,由於call和apply只是參數類型不一樣,因此例子下面都用call來演示。
復制代碼 代碼如下:
var v = "global variable";
var method = function(){
writeHtml(this.v);
}
var Class2 = function(){
this.v = "object variable in instance of Class2";
this.method = function(){
writeHtml(this.v);
}
}
var Class3 = function(){
this.v = "object variable in instance of Class3";
this.method = function(){
writeHtml(this.v);
}
}

var obj2 = new Class2();
var obj3 = new Class3();

method(); //global variable
obj2.method(); //object variable in instance of Class2
obj3.method(); //object variable in instance of Class3

method.call(obj2); //object variable in instance of Class2
method.call(obj3); //object variable in instance of Class3
obj2.method.call(obj3); //object variable in instance of Class3
obj2.method.call(this); //global variable
obj3.method.call(obj2); //object variable in instance of Class2
obj3.method.call(this); //global variable


可以看到,使用call或apply可以將方法綁定到指定的上下文中。在全局環境中this指向的上下文為全局對象。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved