javascript 作用域和 this 關鍵字

在javascript中存在著this和scope兩個概念，如果不細心瞭解，還真搞不清楚這兩個概念，今天我們就來詳細瞭解一下this和scope的區別以及它們的作用，最後會附上code以加深理解。

一、作用域（scope）

所謂作用域就是：變數在宣告它們的函式體以及這個函式體巢狀的任意函式體內都是有定義的。

JavaScript

function scope(){ var foo = "global"; if(window.getComputedStyle){ var a = "I'm if"; console.log("if:"+foo); //if:global } while(1){ var b = "I'm while"; console.log("while:"+foo);//while:global break; } !function (){ var c = "I'm function"; console.log("function:"+foo);//function:global }(); console.log( foo,//global a, // I'm if b, // I'm while c // c is not defined ); } scope();

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function scope(){     var foo = "global";     if(window.getComputedStyle){         var a = "I'm if";         console.log("if:"+foo); //if:global     }     while(1){         var b = "I'm while";         console.log("while:"+foo);//while:global         break;     }     !function (){         var c = "I'm function";         console.log("function:"+foo);//function:global     }();     console.log(          foo,//global          a, // I'm if          b, // I'm while          c  // c is not defined     ); } scope();

（1）scope函式中定義的foo變數，除過自身可以訪問以外，還可以在if語句、while語句和內嵌的匿名函式中訪問。 因此，foo的作用域就是scope函式體。

（2）在javascript中，if、while、for 等程式碼塊不能形成獨立的作用域。因此，javascript中沒有塊級作用域，只有函式作用域。

 但是，在JS中有一種特殊情況：

 如果一個變數沒有使用var宣告，window便擁有了該屬性，因此這個變數的作用域不屬於某一個函式體,而是window物件。

JavaScript

function varscope(){ foo = "I'm in function"; console.log(foo);//I'm in function } varscope(); console.log(window.foo); //I'm in function

1 2 3 4 5 6

function varscope(){     foo = "I'm in function";     console.log(foo);//I'm in function } varscope(); console.log(window.foo); //I'm in function

二、作用域鏈（scope chain）

     所謂作用域鏈就是：一個函式體中巢狀了多層函式體，並在不同的函式體中定義了同一變數， 當其中一個函式訪問這個變數時，便會形成一條作用域鏈（scope chain）。

JavaScript

foo = "window"; function first(){ var foo = "first"; function second(){ var foo = "second"; console.log(foo); } function third(){ console.log(foo); } second(); //second third(); //first } first();

1 2 3 4 5 6 7 8 9 10 11 12 13 14

foo = "window"; function first(){     var foo = "first";     function second(){        var foo = "second";        console.log(foo);     }     function third(){        console.log(foo);     }     second(); //second     third();  //first } first();

當執行second時，JS引擎會將second的作用域放置連結串列的頭部，其次是first的作用域，最後是window物件，於是會形成如下作用域鏈：

second->first->window,  此時，JS引擎沿著該作用域鏈查詢變數foo, 查到的是”second”

當執行third時，third形成的作用域鏈：third->first->window, 因此查到的是：”frist”

特殊情況：with語句

JS中的with語句主要用來臨時擴充套件作用域鏈，將語句中的物件新增到作用域的頭部。with語句結束後，作用域鏈恢復正常。

JavaScript

foo = "window"; function first(){ var foo = "first"; function second(){ var foo = "second"; console.log(foo); } function third(obj){ console.log(foo); //first with (obj){ console.log(foo); //obj } console.log(foo); //first } var obj = {foo:'obj'}; third(obj); } first();

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

foo = "window"; function first(){     var foo = "first";     function second(){        var foo = "second";        console.log(foo);     }     function third(obj){        console.log(foo); //first        with (obj){            console.log(foo); //obj        }        console.log(foo); //first     }     var obj = {foo:'obj'};     third(obj); } first();

在執行third()時，傳遞了一個obj物件，obj中有屬性foo, 在執行with語句時，JS引擎將obj放置在了原連結串列的頭部，於是形成的作用域鏈如下：

obj->third->first->window, 此時查詢到的foo就是obj中的foo,因此輸出的是：”obj”, 而在with之前和之後，都是沿著原來的連結串列進行查詢，從而說明，在with語句結束後，作用域鏈已恢復正常。

三、this 關鍵字

     在一個函式中，this總是指向當前函式的所有者物件，this總是在執行時才能確定其具體的指向, 也才能知道它的呼叫物件。

     這句話總結了關於this的一切，切記，切記，切記!（ps:重要的事情說三遍!）

JavaScript

window.name = "window"; function f(){ console.log(this.name); } f();//window var obj = {name:'obj'}; f.call(obj); //obj

1 2 3 4 5 6 7 8

window.name = "window"; function f(){     console.log(this.name); } f();//window   var obj = {name:'obj'}; f.call(obj); //obj

在執行f()時，此時f()的呼叫者是window物件，因此輸出”window”

f.call(obj) 是把f()放在obj物件上執行，相當於obj.f(),此時f中的this就是obj,所以輸出的是”obj”

四、實戰應用

code1：

JavaScript

var foo = "window"; var obj = { foo : "obj", getFoo : function(){ return function(){ return this.foo; }; } }; var f = obj.getFoo(); f(); //window

1 2 3 4 5 6 7 8 9 10 11

var foo = "window"; var obj = {     foo : "obj",     getFoo : function(){         return function(){             return this.foo;         };     } }; var f = obj.getFoo(); f(); //window

code2:

var foo = "window"; var obj = { foo : "obj", getFoo : function(){ var that = this; return function(){ return that.foo; }; } }; var f = obj.getFoo(); f(); //obj

1 2 3 4 5 6 7 8 9 10 11 12

var foo = "window"; var obj = {     foo : "obj",     getFoo : function(){         var that = this;         return function(){             return that.foo;         };     } }; var f = obj.getFoo(); f(); //obj

code1和code2是對this和scope最好的總結，如果對於執行結果有疑惑，歡迎討論！

程式碼解析：

code1: 執行var f = obj.getFoo()返回的是一個匿名函式，相當於: var f = function(){ return this.foo; } f() 相當於window.f(), 因此f中的this指向的是window物件，this.foo相當於window.foo, 所以f()返回"window" code2: 執行var f = obj.getFoo() 同樣返回匿名函式，即： var f = function(){ return that.foo; } 唯一不同的是f中的this變成了that, 要知道that是哪個物件之前，先確定f的作用域鏈：f->getFoo->window 並在該鏈條上查詢that,此時可以發現that指代的是getFoo中的this, getFoo中的this指向其執行時的呼叫者，從var f = obj.getFoo() 可知此時this指向的是obj物件，因此that.foo 就相當於obj.foo,所以f()返回"obj"

1 2 3 4 5 6 7 8 9 10 11 12 13

code1: 執行var  f = obj.getFoo()返回的是一個匿名函式，相當於: var f = function(){      return this.foo; } f() 相當於window.f(), 因此f中的this指向的是window物件，this.foo相當於window.foo, 所以f()返回"window"   code2: 執行var f = obj.getFoo() 同樣返回匿名函式，即： var f = function(){      return that.foo; } 唯一不同的是f中的this變成了that, 要知道that是哪個物件之前，先確定f的作用域鏈：f->getFoo->window 並在該鏈條上查詢that,此時可以發現that指代的是getFoo中的this, getFoo中的this指向其執行時的呼叫者，從var f = obj.getFoo() 可知此時this指向的是obj物件，因此that.foo 就相當於obj.foo,所以f()返回"obj"