bind() 和 箭头函数的this

Posted 2023-05-06

参考技术A

楼主在昨天在看Vue文档的时候，主要到 methods 和 computed 里面不要使用箭头函数，去看了下源码解析，发现里面调用的是通过自定义的 bind 函数，通过 call() 来执行函数以及绑定作用域，想巩固一下箭头函数，于是这篇有内涵的blog就上线了。

之前楼主有一篇 箭头函数的This , 对于它的理解感觉有偏差，这里全部再重复总结一遍。

看完本篇文章，你可以彻底了解this和bind

当使用构造函数的时候，我们需要构建原型链，所以需要加工一下。

解析 ： 当我们调用bind()的时候，即执行了 var fn1 = fn.bind(name: 1,1,3) ， 会返回一个新的函数，下面是作用域链解析。

实例 ： 当我们调用bind()的时候，即执行了 var fn1 = fn.bind(name: 1,1,3) ， 会返回一个新的函数，下面是作用域链解析。

再调用fn1(3,4) ,相当于执行函数

答案 name:1 3

所以当我们执行 fn.bind(name:1,1,2).call(name:2,3,4) ，本质上 call 并不能改变bind的返回函数的this，只是改变了内部封装了一个函数(xxx)的this，这也是 bind的this参数不能被重写的原因。

一句话总结： 箭头函数的函数体内的 this 就是 定义时候的 this ，和使用所在的this没有关系。

即 ：在定义箭头函数的时候就已经绑定了this，可以理解为就是在定义的时候，通过bind函数进行强行绑定this。

总结： 我们知道Vue内部调用 methods 的时候，通过的 call 方法来执行 methods 中的相应的key函数，当我们使用箭头函数的时候，定义的时候就绑定了 this ，它源码中写的 call() 并不会被使用，所以必须不能使用箭头函数

Vue文档中methods的使用

Vue methods 用箭头函数取不到 this

vue源码解析－事件机制

什么时候“不要”用箭头函数

ES6 箭头函数使用禁忌

自己写的推理例子

深入理解ES6箭头函数中的this

• 箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：
  • 箭头函数内部的this是词法作用域，由上下文确定。
  • 箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。
• 由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()、bind()调用箭头函数时，无法对this进行绑定（无法使用call()或者apply()、bind()改变this的指向），即传入的第一个参数被忽略。内部的this指向父执行上下文里面的this。
• 箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

• 箭头函数中的this是在定义函数的时候绑定，看一个例子：

  var x = 11;
  var obj = {
      x: 22,
      say: ()=>{
          console.log(this.x);
      }
  }
  obj.say();  // 输出的值为11

   

• 所谓的定义时候绑定，就是this是继承自父执行上下文中的this，比如这里的箭头函数中的this.x，箭头函数本身与say平级以key:value的形式，也就是箭头函数本身所在的对象为obj，而obj的父执行上下文就是window，因此这里的this.x实际上表示的是window.x，因此输出的是11。

• 而对于下面的例子：

  var obj = {
      birth: 1990,
      getAge: function () {
          var b = this.birth; // 1990
          var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
          return fn();
      }
  };
  obj.getAge(); // 28

   

• 例子中箭头函数本身是在getAge方法中定义的，因此，getAge方法的父执行上下文是obj，因此这里的this指向则为obj对象。