avaScript 中的 this 關(guān)鍵字，深入淺出的分析其在不同情況下的含義，形成這種情況的原因以及 Dojo 等 JavaScript 工具中提供的綁定 this 的方法?？梢赃@樣說，正確掌握了 JavaScript 中的 this 關(guān)鍵字，才算邁入了 JavaScript 這門語言的門檻。

This對象在js中就一直是個坑貨，很難判斷它到底指向什么，而我們由于來自C++或者python的self的經(jīng)驗，又常常會犯這一類的錯誤。接下來就詳細地講一下this對象的歸屬。

rule1:全局環(huán)境的this

javascript的環(huán)境天生就由函數(shù)來決定，在js里不能通過代碼塊隔開上下文，不被函數(shù)所包裹的環(huán)境就是全局環(huán)境，全局環(huán)境中的this就指向全局變量window，看下面一個例子

復(fù)制代碼代碼如下:

var name='jjj';

console.log(this.name);

//會成功輸出jjj

rule2:作為方法調(diào)用時的this

顯然這種情況很好判斷，與python里的self是一致的，this毫無疑問指向調(diào)用方法的對象

復(fù)制代碼代碼如下:

var user={

    name:'kkk'

};

user.getName=function(){

    console.log(this.name);

};

user.getName();

//會輸出kkk

rule3:作為構(gòu)造函數(shù)時的this

這時的this也不用我多說，顯然是指向新創(chuàng)建的對象，構(gòu)造函數(shù)的運行其實并不創(chuàng)建對象，而僅僅是初始化，對象在運行之前就已經(jīng)被創(chuàng)建
下面還是舉例說明

復(fù)制代碼代碼如下:

function User(name){

    this.name=name;

}

var f1=new User('kkk');

var f2=User('kkk');

console.log(f1.name);//kkk

console.log(f2.name);//undefined沒有name屬性

rule4:間接調(diào)用中的this

所謂間接調(diào)用是指利用apply和call來調(diào)用函數(shù)，這時的this指向它們參數(shù)列表中的第一個參數(shù)。

復(fù)制代碼代碼如下:

var setName=function(name){

    this.name=name;

};

var user={level:2};

user.apply(setName,'jjj');

console.log(user.name);//jjj

rule5:其他情況中的this

記住其他情況下this均不會被改變，這里也是最容易犯錯的地方。

復(fù)制代碼代碼如下:

var name = "clever coder";

var person = {

    name : "foocoder",

    hello : function(sth){

        var sayhello = function(sth) {

            console.log(this.name + " says " + sth);

        };

        sayhello(sth);

    }

}

person.hello("hello world");//clever coder says hello world

上面的代碼看起來很奇怪，難道this不應(yīng)該指向person嗎？
我們應(yīng)該記住被嵌套的函數(shù)中的this是不會指向嵌套它的函數(shù)，在這個例子里面就是sayhello中的this不會指向hello對應(yīng)的那個函數(shù)。如果我們把例子稍稍改一下變成

復(fù)制代碼代碼如下:

hello:function(sth){

    console.log(this.name + " says " + sth);

}

//foocoder says hello world

大家應(yīng)該已經(jīng)看明白了，這個時候，sayhello并非在作為方法調(diào)用，所以this指向全局對象。。。
這時候問題來了，用node運行最初的例子會顯示undefined says hello world，不知道有沒有大神講解一下。

rule6:eval破壞所有規(guī)則

最后以一個例子結(jié)束

復(fù)制代碼代碼如下:

var name = "clever coder";

var user={

    name:'kkk'

};

user.getName=function(){

    console.log(this.name);

};

var get=user.getName;

get();//clever coder

大家是否明白了？

您可能感興趣的文章: