ES6箭头函数this和普通函数中的this

原文链接：https://www.jianshu.com/p/c1ee12a328d2

常见的window属性和方法有alter，document，parseInt，setTimeout，setInterval，localtion等等，这些在默认的情况下是省略了window前缀的。（window.alter = alter），所以下文提到箭头函数解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。

以下都是在非严格模式下讨论
1.普通函数中的this
在JavaScript中，this是在函数执行过程中自动生成的一个内部对象，指的就是当前对象。
js的函数可以多层嵌套，如果内层的想要获得外层的this，可以定义一个变量储存起来
var _this=this
在全局函数中，比如匿名函数，this指向的是window。
例子：

var name=" the window";
var obj = {
    name:'my obj',
    getNameFun:function(){
        return function(){
            return this.name;
        }
    }
}
console.log(obj.getNameFun()());// the window

原因是，匿名函数的执行环境是全局的，而且this只在函数内部起作用。此时的this.name在匿名函数中找不到，所以就从全局中找，找到后打印出来。

上面的例子改写一下

var name=" the window";
var obj = {
    name:'my obj',
    getNameFun:function(){
        var _this=this
        return function(){
            return _this.name;
        }
    }
}
console.log(obj.getNameFun()());//my obj

在getNameFun内将this赋给_this，此时的_this指向的是挂载（调用）的对象，即为obj，在匿名函数中调用_this.name会在obj上查找相应的数据，就不会在全局上查找

函数的执行对象放在window

function test(){
    console.log(this);
}
test();//window

问题：为啥是window，因为没变量声明？

关于setTimeout和setInterval的this指向问题

var obj = {
  func:function(){
    console.log(this);
  },
  say:function(){
    var that = this;
    setTimeout(function(){
      console.log(that)
    });
  }
}
obj.func();//obj
obj.say();//obj

把 var that = this;去掉

var obj = {
  func:function(){
    console.log(this);
  },
  say:function(){
    setTimeout(function(){
      console.log(that)
    });
  }
}
obj.func();//obj
obj.say();//window

问题： setTimeout里执行的函数为啥是window，因为setTimeout就是window下的方法
例子：

window.val = 1;
var obj = {
  val:2,
  dbl:function(){
    this.val*=2;
    val*=2;
    console.log(this.val);
    console.log(val);
  }
}
obj.dbl();//4 2
var func = obj.dbl;
func();//8 8

执行obj.dbl()时，this.val的this指向obj内的val=2；val在obj内没有定义所以从全局上找val=1,因此运算结果为4 2
func的执行对象是window，我们可以此时全局的val已经等于4了，在经过this.val=2,val=2的运算，打印的结果就是8 8。
问题：为啥执行func，全局的val等于4，不是2？

2.ES6箭头函数this

箭头函数的this定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。
所以，这会很好的解决匿名函数和setTimeout和setInterval的this指向问题。不用再去给其变量存储this。

var obj = {
  func:function(){
    console.log(this);
  },
  say:function(){
    setTimeout(()=>{
      console.log(this)
    });
  }
}
obj.func();//obj
obj.say();//obj

var a=1;
function test(){
    console.log(this.a);
    console.log(this);
    this.a=2;
    return ()=>{console.log(this.a);console.log(this);}
}
var x=new test()();
//undefined
//test {}
//2
//test {a: 2}

注：new test()()，第一个括号是返回匿名函数，第二个括号是执行返回的匿名函数

最后编辑于：2019.04.28 17:11:15