javascritpt 裏this的理解

js裏的this是動態的，根據執行環境而變化的。 this指向的4種類型這裏就不一一介紹了。 我用幾個自己加深學習的例子來說明：

 

 

  var myObject = {value:1};
  myObject.double = function () {
  var that = this; // Workaround. 這裏的this->myObject
  var helper = function () {     
      that.value += that.value;
	  }  
  helper();
  return this.value;
};
alert(myObject.double());

第一種改變：

 

 

var myObject = {};
myObject.double = function ( ) {
var that = this; // Workaround.
var helper = function ( ) {
    alert(this);     // ->  this->window     
}
helper();
};
myObject.double();  // ->  this->window     
}
helper();
};
myObject.double();  

 

 

爲什麼會這樣呢？因爲函數調用的時候會開闢新棧，而helper()直接調用，而不是以函數的方法調用，this就指向window.    

 

return 中的this

 

   var myObject = {};
   myObject.sayhi=function() {};
   myObject.sayhi.sayh = function() {return function() {alert(this)};};
   myObject.sayhi.sayh()();   //  this->window

實際上，你可以把 myObject.sayhi.sayh()看成一個函數的名字。然後，這個函數再調用，自然this指向window 

 

 

 

上例的第一種改變：

 

   var myObject = {};
   myObject.sayhi=function() {};
   myObject.sayhi.sayh = function() {return function() {alert(this)};};
   var o={};
   o.show=myObject.sayhi.sayh();
   o.show();  // this->o

 

這樣，this怎麼變化就要看你調用時候使用的環境(或者你以什麼方式調用)

上例的另一種變化:

 

--  一個更容易讓你理解this的例子
  var o = {};
  o.v = 1;
  o.func = (function() {
           return function() {alert(this.v);}
  })();
  o.func();  // 2

這是一個自執行函數，很多框架都有，實際上，你可以這麼理解，自執行後，o.func=function() {alert(this.v);}  ,當然，框架裏的js代碼不會這麼簡單，但是，類似，你可以這麼理解。 這樣，你就知道這裏是作爲對象的方法調用，this自然指向我們自定義的對象o .

 

ECMA2015 + 的JavaScript內的this，由於箭頭函數會捕獲其所在上下文的this值，來作爲自己的this值。（或用於將函數內部的this延伸至上一層作用域中。）

function Person() {
    this.age = 25;
    setInterval(()=>{
        this.age++;//這裏的this也指向Person對象
    },1000);
}