大家好，又见面了，我是你们的朋友全栈君。
ES6基础系列（三）箭头函数
一、基本用法
先来看看 ES5 中我们怎么写一个函数
const foo = function (num) {
return num + 1;
};
再来看看 ES6 为我们提供的箭头函数
const foo = (num) => num + 1;
看这个例子难道箭头函数是为了让我们的代码看上去更“高大上”吗？
我认为是这样的～，但这只是其中的一个很小原因，先来看看它有多“高大上”，也就是常见的用法
多参数
let foo = (value, num) => value * num;
多参数+多条语句：
let foo = (value, num) => {
const newVal = value * 2;
return newVal * num;
};
返回一个对象
let foo = (value, num) => ({
total: value * num });
参数是一个对象
let foo = ({
value, num }) => ({
total: value * num });
简化回调函数
const data = [
{
name: "yg1", age: 1 },
{
name: "yg2", age: 2 },
{
name: "yg3", age: 3 },
{
name: "yg4", age: 4 },
];
const res = data.map(({
name, age }) => ({
name, age: age + 1 }));
二、区别
抛开优雅的代码，我们仍要知道箭头函数和普通函数的区别在哪里
2.1 没有 this
箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值。
箭头函数中的 this，就绑定在它最近一层非箭头函数的 this.
一句话理解：箭头函数内部的 this 是词法作用域，由上下文确定。
我们来看这样一段代码：
const obj = {
name: "111",
foo: function () {
console.log(this.name);
const b = function () {
console.log(this.name);
};
b();
},
};
obj.foo();
- 第一个函数字面量在作为对象的方法被调用时。this 指向对象
- 第二个函数正常调用时指向全局对象——window
同样的代码结构，我们来看一下改造后的代码：
const obj = {
name: "111",
foo: function () {
console.log(this.name);
const b = () => {
console.log(this.name);
};
b();
},
};
obj.foo();
- 第一个函数字面量在作为对象的方法被调用时。this 指向对象
- 第二个箭头函数，它的 this 绑定在最近一层非箭头函数，也就是 obj 上
2.2 没有 arguments
箭头函数没有自己的 arguments 对象，这不一定是件坏事，因为箭头函数可以访问外围函数的 arguments 对象：
function constant() {
return () => arguments[0];
}
var result = constant(1);
console.log(result()); // 1
那如果我们就是要访问箭头函数的参数呢？
你可以通过命名参数或者 rest 参数的形式访问参数:
let nums = (...nums) => nums;
2.3 不能通过 new 关键字调用
JavaScript 函数有两个内部方法：[[Call]] 和 [[Construct]]。
当通过 new 调用函数时，执行 [[Construct]] 方法，创建一个实例对象，然后再执行函数体，将 this 绑定到实例上。
当直接调用的时候，执行 [[Call]] 方法，直接执行函数体。
箭头函数并没有 [[Construct]] 方法，不能被用作构造函数，如果通过 new 的方式调用，会报错。
大致了解了箭头函数以后，我们来看下面的例子：
function foo() {
return () => {
return () => {
return () => {
console.log("id:", this.id);
};
};
};
}
上面代码之中，只有一个this，就是函数foo的this。
参考
写在最后
JavaScript 系列：
关于我
- 花名：余光（沉迷 JS，虚心学习中）
- WX：j565017805
其他沉淀
如果您看到了最后，对文章有任何建议，都可以在评论区留言
这是文章所在 GitHub 仓库的传送门，如果真的对您有所帮助，希望可以点个 star，这是对我最大的鼓励 ～
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148538.html原文链接：https://javaforall.net
