ES6基础:箭头函数

发布于 2021-1-15 11:47
浏览
0收藏

一、基本用法
先来看看 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。

收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐