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);
}