參考視頻：http://www.imooc.com/video/6430

JavaScript中的this比較靈活，也是讓很多初學(xué)者摸不到頭腦，那么根據(jù)在不同的環(huán)境下，在同一個(gè)函數(shù)，不同的調(diào)用方式下，那么這個(gè)this也有可能是不同的。

我們先來(lái)看，全局作用于下的this。

全局的this(瀏覽器)

console.log(this.document===documet);//true

console.log(this===window);//true

this.a=37;

console.log(window.a);//37

全局作用域下的this一般指的是全局對(duì)象，在瀏覽器里面一般指的是windows。比如上面的this.document就是window.document. 這里的this就相當(dāng)于window，所以this=window.

so,this.a=window.a。

?

一般函數(shù)的this(瀏覽器)

function f1(){

return this;

}

f1()===window;//true,global object

比如我們用這樣的一般函數(shù)聲明和一般表達(dá)式，然后我們直接去調(diào)用這樣的函數(shù)的話，那么這里面的this仍然指向全局變量，那么在瀏覽器里面就是window，那么在node.js里面呢，就是global對(duì)象。

function f2(){

"use strict"//ee strict mode

return this;

}

f2()===undefined;//true

我們需要注意的一點(diǎn)就是嚴(yán)格模式下呢，一般函數(shù)調(diào)用的this會(huì)指向這個(gè)undefined.

?

我們更常見(jiàn)的作為對(duì)象方法的函數(shù)的this：

var o={

prop:37,

f:function(){

return this.prop;

}

};

console.log(o.f());//logs 37

是將this作為對(duì)象方法去用的時(shí)候,我們知道，函數(shù)呢，如果作為一個(gè)對(duì)象的屬性，比如我們這創(chuàng)建的自變量o，那么o里面有個(gè)屬性f,它的值是一個(gè)函數(shù)對(duì)象，那對(duì)于這樣一個(gè)把函數(shù)作為一個(gè)對(duì)象屬性值的方式，我們常常叫做一個(gè)對(duì)象的方法。那么多為對(duì)象方法去調(diào)用的時(shí)候，比如這里的用o.f()去調(diào)用，這種情況的this一般會(huì)指向這樣一個(gè)對(duì)象o，這里我們可以看到o.f()調(diào)用以后會(huì)返回37，因?yàn)閠his指向了o，所以相當(dāng)于o.prop，所以最終的結(jié)果是37。

?

var o={prop:37};

function independent(){

return this.prop;

}

o.f=independent;

console.log(o.f());//logs 37

那么這里面，我們不止是一定要定義成函數(shù)自變量的對(duì)象，比如這里面我們定義了一個(gè)對(duì)象o，只有一個(gè)屬性prop:37；那么這里面我們有個(gè)獨(dú)立的independent函數(shù)，那么這里面的函數(shù)，我們?nèi)匀籸eturn?this.prop，如果我直接去調(diào)用independent的話，則this依舊指向window。這里臨時(shí)創(chuàng)建一個(gè)o的屬性f（即是o.f）并且指向independent,所以這樣再調(diào)用console.log(o.f()，則又跟上一條函數(shù)同理！

這里面是不是看函數(shù)是怎么創(chuàng)建的，而是只要將這個(gè)函數(shù)作為對(duì)象的方法，就像這個(gè)o.f()去調(diào)用的話，那么，這個(gè)this，就會(huì)指向這個(gè)o.prop。

對(duì)象原型鏈上的this:

var o={f:function(){return this.a+this.b;}};

var p=Object.create(o);

p.a=1;

p.b=4;

console.log(p.f());//5

創(chuàng)建一個(gè)對(duì)象o里面有屬性f，并且函數(shù)作為屬性的值，我們通過(guò)Object.create創(chuàng)建了一個(gè)對(duì)象p，而對(duì)象P是一個(gè)空對(duì)象，并且它的原型指向了o，那么p.a=1;p.b=4;這樣創(chuàng)建了對(duì)象的屬性，那么我去調(diào)用它原型上方法的時(shí)候，this.a和this.b依舊能取到p.a和p.b的值。這里面p的原型才是o，也就是說(shuō)，調(diào)用p.f()的時(shí)候調(diào)用的時(shí)候這個(gè)對(duì)象原型對(duì)象上的o上面的屬性f。

get/set方法與this:

function ?modulus(){

return Math.aqrt(thisre*this.re+this*this.im);

}

var 0={

re:1,

im:-1,

get phase(){

return Math.atan2(this.im,this.re);

}

};

Object.defineProperty(o,'modules',{

get:modulus,enumerable,configurable:ture});

console.log(o.phase,o.modulus)；//logs-0.78 ? 14.4142

get/set方法也是類(lèi)似的，這里用的是一個(gè)modules。然后這里我們?nèi)ビ?jì)算this.re和this.im，這里我們用一個(gè)對(duì)象o，并且o里面有一個(gè)get方法，給這樣的屬性phase,再用

Object.defineProperty(object, propertyname, descriptor)去定義o的屬性，這里我們同樣可以調(diào)用o.phase和o.modulus去拿到o的屬性，那么modules里面的this依舊會(huì)指向o的re和im，我們也要知道get/set方法里面的this也是會(huì)指向它所在的那個(gè)對(duì)象里面，那么我們臨時(shí)動(dòng)態(tài)區(qū)別一下O這個(gè)對(duì)象與創(chuàng)建.modulus的屬性也是類(lèi)似的，那么這一點(diǎn)上，和一般的對(duì)象屬性作為函數(shù)對(duì)象也是類(lèi)似的！

構(gòu)造器中的this：
function MyClass(){
this.a=37;
}
var o= new MyClass();
console.log(o.a);//37

function C2(){
this.a=37;
return{a:38};
}
o=new C2();
console.log(o.a);//38
如果我們正常去調(diào)用MyClass這個(gè)函數(shù)的話，this就是指向全局變量window，但是如果用new MyClass來(lái)把它作為構(gòu)造器去調(diào)用的話，那么MyClass的this會(huì)指向空的對(duì)象，并且這個(gè)對(duì)象會(huì)指向原型MyClass.prototype.這里使用了new以后，那么這個(gè)this會(huì)指向一個(gè)原型為MyClass.prototype屬性的這樣一個(gè)空對(duì)象，那么這樣由于我們的this.a賦值了37，而且MyClass的返回值默認(rèn)是this，所以這對(duì)象o就會(huì)輸出37。那么類(lèi)似的我們定義了一個(gè)函數(shù)C2,然后this.a=37，但是return里面的返回的語(yǔ)句是a:38,所以a就不再是37了，而是38。當(dāng)我們使用new來(lái)創(chuàng)建這樣一個(gè)構(gòu)造器來(lái)這樣去調(diào)用的時(shí)候，那么這樣的this會(huì)指向一個(gè)原型為MyClass.prototype這樣一個(gè)空對(duì)象，最后還是要看返回值，如果你沒(méi)有寫(xiě)return語(yǔ)句，則默認(rèn)返回this，如果有return語(yǔ)句返回了一個(gè)對(duì)象的話，所以會(huì)將return的對(duì)象作為返回值，所以o.a就是38.

call/apply方法與this:
function add(c,d){
return this.a+this.b+c+d;
}
var 0= {a:1,b:3};
add.call(,o,5,7);//1+3+5+7=16
add.apply(o,[10,20]);//1+3+10+20=34
function bar(){
console.log(Object,prototype.toString.call(this));
}
bar.call(7);//"[object Number]"
除了不同的調(diào)用方式，每一個(gè)函數(shù)對(duì)象也會(huì)有方法，可以去修改函數(shù)執(zhí)行時(shí)的里面的this，比較常見(jiàn)的就是call/apply。比如我這里面的函數(shù)聲明add,我們用this.a和this.b，和參數(shù)c和d把這四個(gè)數(shù)相加起來(lái)。我們是怎么做的呢，我們是定義一個(gè)變量o，里面有兩個(gè)屬性a:1,b:3,然后通過(guò)這個(gè)對(duì)象的的call方法，把第一個(gè)參數(shù)接受那個(gè)關(guān)于this的對(duì)象，后面是5和7（也就是我們想添加的參數(shù)），也就是c=5,d=7,最終的結(jié)果是就1+3+5+7=16。其實(shí)call和apply其實(shí)沒(méi)有什么差別，只是call和apply傳參的方式不同，call是直接把參數(shù)變量傳輸進(jìn)去的，而apply是將參數(shù)作為數(shù)組的形式傳輸進(jìn)去，所以apply的結(jié)果是也是1+3+10+20=34,。現(xiàn)在我們來(lái)區(qū)分一下情況下用到這個(gè)call和apply，比如說(shuō)，我們想調(diào)用Object,prototype.toString，但是我們想指定某一個(gè)this的時(shí)候，來(lái)調(diào)用一些我們無(wú)法直接調(diào)用的一些方法，那么我們這里去調(diào)用bar。call(7),這樣就能拿到內(nèi)部的這樣一個(gè)標(biāo)簽間接的字符串。

bind方法與this:
function f(){
return this.a;
}

var g=f.bind({a:"test"});
console.log(g());//test

var o={a:37,f:f,g:g};
console.log(o.f(),o.g());//37 test
除了call/apply還有bind方法，bind方法只能兼容IE9以上版本，我們定義了一個(gè)函數(shù)對(duì)象f(),然后我們通過(guò)bind的方法，定義了一個(gè)a的對(duì)象，并把參數(shù)值“test”傳進(jìn)去，這樣我們就得到了一個(gè)g對(duì)象，我們到下面調(diào)用輸出的時(shí)候，發(fā)現(xiàn)已經(jīng)調(diào)用了test這個(gè)參數(shù)，這樣是采用了綁定一次，并重復(fù)去調(diào)用，仍然實(shí)現(xiàn)這種綁定的話，這樣會(huì)比我們使用call/apply高效一點(diǎn)。我們下面又定義了一個(gè)函數(shù)o，然后把a(bǔ)賦值為37，然后f賦值了f（）,g賦值了g（），然后我們輸出的o.f(),o.g()是37，test.這里比較特殊的就是我們使用了bind方法，即使我們使用了bind方法，并把新綁定方法作為對(duì)象的屬性去調(diào)用，那么這里依舊會(huì)按照之前的綁定去走，所以也就返回這個(gè)test

轉(zhuǎn)載于:https://www.cnblogs.com/Yirannnnnn/p/4343378.html

總結(jié)

以上是生活随笔為你收集整理的javascript 之 this 用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。