原文地址: https://geromekevin.com/understanding-arrow-functions/
本文版权归原作者所有，翻译仅用于学习。
在这篇教程中你将会学习：“Javascript 中的箭头函数是什么？” 和 “箭头函数和正常的函数有什么不同？”
相比正常的函数箭头函数有以下 4 点不同：
1. 不同的语法
这里有箭头函数和正常关键字 function 语法的对比。两个函数我都用了 IIFE
(function() {
console.log('function keyword');
})();
(() => {
console.log('arrow function');
})();
注意：如果箭头函数只有一个参数，没有任何花哨的参数，你可以省略参数周围的括号。
// You need brackets
const noArguments = () => {};
// You can ommit the brackets.
const oneArgument = n => {
return n * 2;
};
// You need brackets
const defaultParameter = (name = 'Anon') => {
return name;
};
// You need brackets.
const destructuringOneArgment = ({ name }) => {
return name;
};
// You need brackets.
const moreThanOneArgument = (a, b) => {
return a + b;
};
2. 只有表达式
你也可以通过在关键字 funciton 后面添加变量给函数命名。这叫"函数式声明"。对于箭头函数不能这么做，只能用匿名函数表达式。
// function declaration with keyword
function decleration() {
console.log('function declaration with keyword');
}
// function expression with keyword
const keywordExpression = function() {
console.log('function expression with keyword');
};
// function declaration with arrow function
// 🔴 Not a thing.
// function expression with arrow function
const arrowExpression = () => {
console.log('function expression with keyword');
};
函数式声明和表达式声明两者的不同之处是解析时间不同。函数式声明可以在任何地方定义，然而，表达式声明只能在定义之后才能访问。
declaration(); // ✅ Okay
function decleration() {}
foo(); // 🔴 TypeError: foo is not a function
var foo = () => {};
// We could've also written var foo = function() {}
bar(); // 🔴 ReferenceError: Cannot access 'bar' before initialization
const bar = () => {};
从这你也可以看到 const 和 var 之间的不同。由于，foo 是由关键字 var 声明的，所以，它会出现变量提升，并且它的初始值是 undefined。foo() 在尝试调用 undefined，显然它不是一个函数。由于，const 没有变量提升，执行 bar 会抛出一个引用错误。
3. 没有 this
就像其它语言一样，Javascript 也有 this 关键字。有几种绑定 this 的方法：显式或者隐式。我们只关注箭头函数相关的内容即可。
const car = {
wheels: 'four',
yellWheels() {
return this.wheels.toUpperCase();
},
countWheels: () => {
return this.wheels;
},
};
car.yellWheels(); // 'FOUR'
car.countWheels(); // undefined
使用 function 关键字，this 引用的是当前对象。然而，箭头函数则没有自己的 this。因此，wheels 是 undefined，这是因为 global 对象没有属性 wheels。
想要更好的理解 this，可以查看 Eric Elliott’s “This 是什么?”。
4. 隐式的 return
在上一段代码中，我们用 return 关键字从函数中返回了一个值。不过，箭头函数不需要这样做。如果，你的函数中只有一句表达式，你可以省略掉大括号，表达式会自动的返回。
// These two functions do the same
const explicitReturn = () => {
return 'foo';
};
const implicitReturn = () => 'foo';
explicitReturn(); // 'foo'
implicitReturn(); // 'foo'
用隐式 return ，我们可以简化示例中的语法。
// Can't be simplified, no expression
const noop = () => {};
// Can be simplified, return expressions
const getName = (name = 'Anon') => name;
const double = n => n * 2;
const getNameProp = ({ name }) => name;
const add = (a, b) => a + b;
隐式的 return 让柯里化变得非常简单，也就是一个函数返回另外一个函数，最终返回一个值。
const add = a => b => a + b; // add is a function that returns b => a + b
// Read this as const add = a => (b => a + b);
const inc = add(1); // inc is a function because b => a + b got returned
const decr = add(-1);
inc(3); // 4 because inc remembers a as 1
inc(6); // 7
decr(3); // 2 because decr remembers a as -1
add 是一个函数，它有一个参数 a，然后，返回一个参数为 b 的函数，最终返回 a 加 b 的和。参数为 b 函数会在闭包中记住 a。
如果，你喜欢这篇文章，你或许也会喜欢“理解 React 中的条件渲染”，因为，文章中我们会深入的探讨 || 和 &&。
总结
我们已经明白了关键字 function 和箭头函数之间的 4 种不同之处。
网友评论