JavaScript绑定-箭头函数和绑定[重复]答案

【问题标题】：JavaScript binding - arrow functions and bind [duplicate]JavaScript绑定-箭头函数和绑定[重复]
【发布时间】：2018-11-10 19:20:32
【问题描述】：

我有这段代码：

const data = {
  x: "Target"
}

let bar = () => {
  console.log(this.x)
}

let final = bar.bind(data); 
final();

此代码返回未定义。这是相同的代码，但具有非箭头函数：

const data = {
  x: "Target"
}

let bar = function(){
  console.log(this.x)
}

let final = bar.bind(data); 
final();

此代码有效。我想了解为什么箭头功能使绑定无法正常工作。我知道他们处理 this 的方式不同。我知道它们保留了调用它们的原始上下文，在这种情况下不包括 x。但它是否也会阻止 bind() 工作？

【问题讨论】：

标签： javascript binding

【解决方案1】：

箭头函数优先于绑定。每当有两种或多种不同的方式设置此上下文时，它们将按以下顺序解析： -箭头函数 - 新关键字 -绑定 -致电或申请

【讨论】：

【解决方案2】：

但它是否也会阻止 bind() 工作？

部分原因是，bind 返回一个新函数，该函数使用特定的 this 调用原始函数——但箭头函数不使用它们被调用的 this，它们完全忽略它。相反，它们关闭定义它们的this。

箭头函数上的bind 不能改变箭头this 的概念。它所能做的只是它的次要功能，预先提供参数：

"use strict";
function run() {
  const f = (a, b, c) => {
    console.log("this", this);
    console.log("a", a);
    console.log("b", b);
    console.log("c", c);
  };

  const fbound = f.bind({}, 1, 2, 3);
  f();
  fbound();
}
run();

.as-console-wrapper {
  max-height: 100% !important;£
}

【讨论】：