对其他答案不满意。截至2019/3/13为止，票数最高的答案实际上是错误的。
什么样的短简洁版本=>指的是它的快捷方式写一个函数与它结合当前this
const foo = a => a * 2;
实际上是
const foo = function(a) { return a * 2; }.bind(this);
您可以看到所有缩短的内容。我们并不需要function，也不return也不.bind(this)甚至也不是大括号或圆括号
箭头功能的稍长示例可能是
const foo = (width, height) => {
const area = width * height;
return area;
};
表明，如果我们想要函数的多个参数，则需要括号；如果要编写多个表达式，则需要括号和显式 return。
了解这一.bind部分很重要，这是一个大话题。它与thisJavaScript中的含义有关。
所有函数都有一个称为的隐式参数this。怎么样this调用函数时设置取决于该函数的调用方式。
采取
function foo() { console.log(this); }
如果您正常打电话
function foo() { console.log(this); }
foo();
this 将成为全局对象。
如果您处于严格模式
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
这将是 undefined
您可以this使用call或直接设置apply
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
您还可以this使用点运算符隐式设置.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
当您想将函数用作回调或侦听器时出现问题。您创建类，并希望将一个函数分配为访问该类实例的回调。
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
上面的代码将不起作用，因为当元素触发事件并调用函数时，该this值将不是该类的实例。
解决该问题的一种常见方法是使用 .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
因为箭头语法具有相同的功能，所以我们可以编写
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bind有效地发挥了新的作用。如果bind不存在，您基本上可以这样制作自己的
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
在没有传播运算符的旧版JavaScript中，
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
了解该代码需要了解闭包，但简短的版本是bind一个新函数，该函数始终使用this绑定到其的值来调用原始函数。箭头功能执行相同的操作，因为它们是bind(this)
