javascript中的this含義很豐富，它能夠是全局對象，當前對象或者是隨意對象，這都取決于函數的調用方式。函數有下面幾種調用方式：作為對象方法調用、作為函數調用、作為構造函數調用、apply或call調用。

?

對象方法調用

?

作為對象方法調用的時候。this會被綁定到該對象。

var point = { x : 0, y : 0, moveTo : function(x, y) { this.x = this.x + x; this.y = this.y + y; } }; point.moveTo(1, 1)//this 綁定到當前對象，即 point 對象

這里我想強調一點內容，就是this是在函數運行的時候去獲取相應的值，而不是函數定義時。即使是對象方法調用，假設該方法的函數屬性以函數名的形式傳入別的作用域，也會改變this的指向。我舉一個樣例：

var a = {aa : 0,bb : 0,fun : function(x,y){this.aa = this.aa + x;this.bb = this.bb + y;} }; var aa = 1; var b = {aa:0,bb:0,fun : function(){return this.aa;} } a.fun(3,2); document.write(a.aa);//3，this指向對象本身 document.write(b.fun());//0,this指向對象本身 (function(aa){//注意傳入的是函數。而不是函數運行的結果var c = aa();document.write(c);//1 , 因為fun在該處運行，導致this不再指向對象本身。而是這里的window })(b.fun);

這樣就明確了吧。這是一個easy混淆的地方。

函數調用

函數也能夠直接被調用，這個時候this被綁定到了全局對象。

　var x = 1;function test(){this.x = 0;}test();alert(x); //0

但這樣就會出現一些問題。就是在函數內部定義的函數。其this也會指向全局。而和我們希望的恰恰相反。代碼例如以下：

var point = { x : 0, y : 0, moveTo : function(x, y) { // 內部函數var moveX = function(x) { this.x = x;//this 綁定到了全局}; // 內部函數var moveY = function(y) { this.y = y;//this 綁定到了全局}; moveX(x); moveY(y); } }; point.moveTo(1, 1); point.x; //==>0 point.y; //==>0 x; //==>1 y; //==>1

我們會發(fā)現不但我們希望的移動呢效果沒有完畢，反而會多出兩個全局變量。

那么怎樣解決呢？僅僅要要進入函數中的函數時將this保存到一個變量中，再運用該變量就可以。代碼例如以下：

var point = { x : 0, y : 0, moveTo : function(x, y) { var that = this; // 內部函數var moveX = function(x) { that.x = x; }; // 內部函數var moveY = function(y) { that.y = y; } moveX(x); moveY(y); } }; point.moveTo(1, 1); point.x; //==>1 point.y; //==>1

構造函數調用

?

在javascript中自己創(chuàng)建構造函數時能夠利用this來指向新創(chuàng)建的對象上。

這樣就能夠避免函數中的this指向全局了。

　var x = 2;function test(){this.x = 1;}var o = new test();alert(x); //2

apply或call調用

這兩個方法能夠切換函數運行的上下文環(huán)境。也就是改變this綁定的對象。

apply和call比較類似，差別在于傳入參數時一個要求是數組。一個要求是分開傳入。所以我們以apply為例：

<pre name="code" class="html">var name = "window";var someone = {name: "Bob",showName: function(){alert(this.name);} };var other = {name: "Tom" }; someone.showName(); //Bob someone.showName.apply(); //window someone.showName.apply(other); //Tom

能夠看到，正常訪問對象中方法時，this指向對象。

使用了apply后，apply無參數時，this的當前對象是全局，apply有參數時，this的當前對象就是該參數。

箭頭函數調用

這里須要補充一點內容。就是在下一代javascript標準ES6中的箭頭函數的 this始終指向函數定義時的 this，而非運行時。我們通過一個樣例來理解:

var o = {x : 1,func : function() { console.log(this.x) },test : function() {setTimeout(function() {this.func();}, 100);} };o.test(); // TypeError : this.func is not a function

上面的代碼會出現錯誤，由于this的指向從o變?yōu)榱巳?。我們須要改動上面的代碼例如以下：

var o = {x : 1,func : function() { console.log(this.x) },test : function() {var _this = this;setTimeout(function() {_this.func(); }, 100);} };o.test();

通過使用外部事先保存的this即可了。這里就能夠利用到箭頭函數了。我們剛才說過，箭頭函數的 this始終指向函數定義時的 this，而非運行時。所以我們將上面的代碼改動例如以下：

var o = {x : 1,func : function() { console.log(this.x) },test : function() {setTimeout(() => { this.func() }, 100);} };o.test();

這回this就指向o了，我們還須要注意一點的就是這個this是不會改變指向對象的，我們知道call和apply能夠改變this的指向，可是在箭頭函數中是無效的。

var x = 1,o = {x : 10,test : () => this.x};o.test(); // 1 o.test.call(o); // 依舊是1

這樣就能夠明確各種情況下this綁定對象的差別了。

總結

以上是生活随笔為你收集整理的深入理解javascript之this的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。