javascript 之 this 用法

標籤：

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

JavaScript中的this比較靈活，也是讓很多初學者摸不到頭腦，那麼根據在不同的環境下，在同一個函數，不同的調用方式下，那麼這個this也有可能是不同的。

我們先來看，全域作用於下的this。

全域的this(瀏覽器)

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

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

this.a=37;

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

全域範圍下的this一般指的是全域對象，在瀏覽器裡面一般指的是windows。比如上面的this.document就是window.document. 這裡的this就相當於window，所以this=window.

so,this.a=window.a。

 

一般函數的this(瀏覽器)

function f1(){

return this;

}

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

比如我們用這樣的一般函式宣告和一般運算式，然後我們直接去調用這樣的函數的話，那麼這裡面的this仍然指向全域變數，那麼在瀏覽器裡面就是window，那麼在node.js裡面呢，就是global對象。

function f2(){

"use strict"//ee strict mode

return this;

}

f2()===undefined;//true

我們需要注意的一點就是strict 模式下呢，一般函數調用的this會指向這個undefined.

 

我們更常見的作為對象方法的函數的this：

var o={

prop:37,

f:function(){

return this.prop;

}

};

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

是將this作為對象方法去用的時候,我們知道，函數呢，如果作為一個對象的屬性，比如我們這建立的自變數o，那麼o裡面有個屬性f,它的值是一個函數對象，那對於這樣一個把函數作為一個對象屬性值的方式，我們常常叫做一個對象的方法。那麼多為對象方法去調用的時候，比如這裡的用o.f()去調用，這種情況的this一般會指向這樣一個對象o，這裡我們可以看到o.f()調用以後會返回37，因為this指向了o，所以相當於o.prop，所以最終的結果是37。

 

var o={prop:37};

function independent(){

return this.prop;

}

o.f=independent;

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

那麼這裡面，我們不止是一定要定義成函數自變數的對象，比如這裡面我們定義了一個對象o，只有一個屬性prop:37；那麼這裡面我們有個獨立的independent函數，那麼這裡面的函數，我們仍然return this.prop，如果我直接去調用independent的話，則this依舊指向window。這裡臨時建立一個o的屬性f（即是o.f）並且指向independent,所以這樣再調用console.log(o.f()，則又跟上一條函數同理！

這裡面是不是看函數是怎麼建立的，而是只要將這個函數作為對象的方法，就像這個o.f()去調用的話，那麼，這個this，就會指向這個o.prop。

對象原型鏈上的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

建立一個對象o裡面有屬性f，並且函數作為屬性的值，我們通過Object.create建立了一個對象p，而對象P是一個Null 物件，並且它的原型指向了o，那麼p.a=1;p.b=4;這樣建立了對象的屬性，那麼我去調用它原型上方法的時候，this.a和this.b依舊能取到p.a和p.b的值。這裡面p的原型才是o，也就是說，調用p.f()的時候調用的時候這個對象原型對象上的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方法也是類似的，這裡用的是一個modules。然後這裡我們去計算this.re和this.im，這裡我們用一個對象o，並且o裡面有一個get方法，給這樣的屬性phase,再用

Object.defineProperty(object, propertyname, descriptor)去定義o的屬性，這裡我們同樣可以調用o.phase和o.modulus去拿到o的屬性，那麼modules裡面的this依舊會指向o的re和im，我們也要知道get/set方法裡面的this也是會指向它所在的那個對象裡面，那麼我們臨時動態區別一下O這個對象與建立.modulus的屬性也是類似的，那麼這一點上，和一般的對象屬性作為函數對象也是類似的！ 

構造器中的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
如果我們正常去調用MyClass這個函數的話，this就是指向全域變數window，但是如果用new MyClass來把它作為構造器去調用的話，那麼MyClass的this會指向空的對象，並且這個對象會指向原型MyClass.prototype.這裡使用了new以後，那麼這個this會指向一個原型為MyClass.prototype屬性的這樣一個Null 物件，那麼這樣由於我們的this.a賦值了37，而且MyClass的傳回值預設是this，所以這對象o就會輸出37。那麼類似的我們定義了一個函數C2,然後this.a=37，但是return裡面的返回的語句是a:38,所以a就不再是37了，而是38。當我們使用new來建立這樣一個構造器來這樣去調用的時候，那麼這樣的this會指向一個原型為MyClass.prototype這樣一個Null 物件，最後還是要看傳回值，如果你沒有寫return語句，則預設返回this，如果有return語句返回了一個對象的話，所以會將return的對象作為傳回值，所以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]"
除了不同的調用方式，每一個函數對象也會有方法，可以去修改函數執行時的裡面的this，比較常見的就是call/apply。比如我這裡面的函式宣告add,我們用this.a和this.b，和參數c和d把這四個數相加起來。我們是怎麼做的呢，我們是定義一個變數o，裡面有兩個屬性a:1,b:3,然後通過這個對象的的call方法，把第一個參數接受那個關於this的對象，後面是5和7（也就是我們想添加的參數），也就是c=5,d=7,最終的結果是就1+3+5+7=16。其實call和apply其實沒有什麼差別，只是call和apply傳參的方式不同，call是直接把參數變數傳輸進去的，而apply是將參數作為數組的形式傳輸進去，所以apply的結果是也是1+3+10+20=34,。現在我們來區分一下情況下用到這個call和apply，比如說，我們想調用Object,prototype.toString，但是我們想指定某一個this的時候，來調用一些我們無法直接調用的一些方法，那麼我們這裡去調用bar。call(7),這樣就能拿到內部的這樣一個標籤間接的字串。

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以上版本，我們定義了一個函數對象f(),然後我們通過bind的方法，定義了一個a的對象，並把參數值“test”傳進去，這樣我們就得到了一個g對象，我們到下面調用輸出的時候，發現已經調用了test這個參數，這樣是採用了綁定一次，並重複去調用，仍然實現這種綁定的話，這樣會比我們使用call/apply高效一點。我們下面又定義了一個函數o，然後把a賦值為37，然後f賦值了f（）,g賦值了g（），然後我們輸出的o.f(),o.g()是37，test.這裡比較特殊的就是我們使用了bind方法，即使我們使用了bind方法，並把新Binder 方法作為對象的屬性去調用，那麼這裡依舊會按照之前的綁定去走，所以也就返回這個test

javascript 之 this 用法