有关箭头函数

Posted 2021-01-03 lidedong

前言

　　在react开发中，经常使用bind(this)，来将函数绑定上下文，后来使用了箭头函数，就不需要使用bind（this）了。在非箭头函数下， this 指向调用其所在函数的对象，而且是离谁近就是指向谁（此对于常规对象，原型链， getter & setter等都适用）；构造函数下，this与被创建的新对象绑定；DOM事件，this指向触发事件的元素；内联事件分两种情况，bind绑定， call & apply 方法等， 容以下一步一步讨论。箭头函数也会穿插其中进行讨论。关于this指针的问题可以看下这里。

bind 方法

bind方法在ES5引入， 在Function的原型链上，  Function.prototype.bind 。通过bind方法绑定后， 函数将被永远绑定在其第一个参数对象上， 而无论其在什么情况下被调用。

1 function f(){
2   return this.a;
3 }
4 
5 var g = f.bind({a:"azerty"});
6 console.log(g()); // azerty
7 
8 var o = {a:37, f:f, g:g};
9 console.log(o.f(), o.g()); // 37, azerty

View Code

箭头函数中的 this

箭头函数this指针是在定义的时候绑定的，不管在什么上下文环境中，他的指向是其定义时的指向。而普通的函数this指针是在运行的时候进行绑定的，它的指向为当前上下文环境因此是不确定的。