对其他答案不满意。截至 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
部分很重要,这是一个很大的话题。它与this
JavaScript 中的含义有关。
所有函数都有一个名为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(functionToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
在没有扩展运算符的旧 JavaScript 中,它会是
function bind(functionToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
理解该代码需要理解闭包,但简短的版本是创建一个新函数,该函数始终使用绑定到它bind
的值调用原始函数。this
箭头函数做同样的事情,因为它们是bind(this)