快捷導(dǎo)航

javascript中的this詳解

更新時(shí)間：2014年12月08日 17:25:19 投稿：hebedich

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

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

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

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

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

var name='jjj';

console.log(this.name);

//會(huì)成功輸出jjj

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

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

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

var user={

    name:'kkk'

};

user.getName=function(){

    console.log(this.name);

};

user.getName();

//會(huì)輸出kkk

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

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

復(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沒(méi)有name屬性

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

所謂間接調(diào)用是指利用apply和call來(lái)調(diào)用函數(shù)，這時(shí)的this指向它們參數(shù)列表中的第一個(gè)參數(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均不會(huì)被改變，這里也是最容易犯錯(cuò)的地方。

復(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

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

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

hello:function(sth){

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

}

//foocoder says hello world

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

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

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

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

var name = "clever coder";

var user={

    name:'kkk'

};

user.getName=function(){

    console.log(this.name);

};

var get=user.getName;

get();//clever coder

大家是否明白了？

您可能感興趣的文章: