ES6篇—箭头函数

Mr_James
94 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

ES6引入了（=>）箭头函数,箭头函数只是为了ES6的简写方法。

1.通用写法

例子1：

1.    
    let a = function(b,c){
1.  return n;
1.  }
1.  //等于
1.  //es6
1.  let a = (b,c) => n;

通过这个例子1可以看出，省略了function，=>基本代替了花括号{}，这写法非常简写！es6的箭头函数需要写一行即可！

例子2：

let a = function () { return 2 };
// 等于
let a = () => 3;
 
let sum = function(a1, a2) {
        return a1+ a2;
};
// 等于
let sum = (a1, a2) => a1 + a2;

这个例子2可以看出，如果不需要参数或者需要一个参数或者多个参数，就可以使用圆括号()。

例子3：

let sum = (a1, a2) => { return a1 + a2; }

这个例子3可以看出，如果箭头函数的代码块部分多于一条语句，就要使用花括号，并使用return语句。

2.箭头函数的注意点：

1.箭头函数不能作为构造函数实例

  let Person = (name,age) => {
  this.name=name;
  this.age=age;
 }
  let me = new Person('huang',23);
 console.log(me);

可以看到在使用箭头函数的情况下，并用构造函数，但是调试的时候就会抛出报错。箭头函数为什么不能作为构造函数？简单来说，因为箭头函数本身没有是prototype属性，而且箭头函数本身是没有this，所以箭头函数无法作为构造函数；而构造函数本身自己有prototype属性，如下图：

微信截图_20221202201433.png

2.箭头函数不能用arguments对象

let fn = () => {
     console.log(arguments);
}
fn(1,2,3);

最后就会报错。在使用箭头函数情况下，因为arguments对象在函数体内是不存在。如果你非要这个的话，可以考虑用rest(剩余运算符)来代替。参考代码如下：

let fn = (...rest) => {
     console.log(rest)
}
fn(1,2,3);  //[1,2,3]

以上的代码：在使用箭头函数的情况下，并用rest参数是可行性的。

3.箭头函数的this对象，就是定义时所在的对象 这个注意点值得非常注意，因为这个this对象的指向是可变的，但是在使用箭头函数情况下，那么this对象是固定的。

function sum() {
   set(() => {
           console.log('id:', this.id);//最终打印42
   }, 1000);
 }
let id = 21;
sum.call({ id: 42 });

上面代码的思路一下：set参数本身是一个箭头函数，然后这个箭头函数定义在sum生成时，反而需要等到1秒之后，由于使用箭头函数情况下，那么this就会指向函数定义在对象为{id:42},最终打印为42。

另外，如果没有使用箭头函数的话，那么this应该指向全局对象windows，那打印为21。

箭头函数不能作为构造函数进行实例化。

如果是function函数，只要谁调用它，那就this指向谁。

以上就是这文章重点的内容了，不断更新中.....给知识充电中。

avatar
文章
阅读
粉丝