前端-浅谈箭头函数的this和普通函数的this

说起胖函数的this指向这个坑我是踩了很多遍啊，

说起this，我相信只要是做编程写代码的对this一定都有了解。我现在和大家说说JavaScript的胖函数的this指向和es5普通函数的this指向什么不一样吧。

OK ，我理解的是ES6的箭头函数的this指向是，在哪里定义的箭头函数那么它的this就指向哪里。

而ES5普通函数的this指向是，在哪里调用的函数，那么this就指向哪里。

我们来看下面的例子

var name='window';
var obj = {

name:'obj',
nameprintf:function(){
console.log(this.name)
}
}
obj.nameprintf();//'obj'
var w =
obj.nameprintf;
w();//'window'

第一处打印调用了obj.nameprintf()，按照我们前面说的谁调用函数，函数里面的this就指向谁，因此这里的this指向obj，所以打印obj.name也就是obj。

第二处打印调用w()，这里其实就是把obj.nameprintf这个函数的函数体赋给了w这个函数，相当于在全局空间下写了一个w函数，里面的代码就是obj.nameprintf里面的代码，所以此时的this指向window，因此打印的this.name就是window。

我们试试用箭头函数定义nameprintf这个函数

var name='window';
var obj = {

name:'obj',
nameprintf:()=>{
console.log(this.name)
}
}
obj.nameprintf();

OK ，我们现在可以看到obj.nameprintf()的运行结果是window。

我们试着和上面普通函数定义的nameprintf比较一下，都是相同的obj.nameprintf（）调用，打印的this。name却是不一样的，

上面我们已经解释了普通函数的this指向，

现在我们来解释箭头函数的this，其实箭头函数里是没有this的，而普通函数的是有this的。

但是普通函数在定义的时候并不知道自己的this要指向哪里，所以在被调用的时候普通函数里的this会指向调用它的那个对象。

而箭头函数因为本身没有this，它会直接绑定到它的词法作用域内的

this

，也就是定义它时的作用域内的

this

值。

通俗点说 就是它会直接绑定到它父级的执行上下文里的this。

所以上面第二例子里的箭头函数里的this其实指向的是window