ES6之必学必会

最新推荐文章于 2022-10-21 16:16:41 发布

yxiuzhu

最新推荐文章于 2022-10-21 16:16:41 发布

阅读量170

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/haotian1997/article/details/114747043

版权

ES6 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、箭头函数与普通函数的区别？

1、基本语法于普通函数不同

函数声明方式不同
如果箭头函数没有参数，直接写一个空括号即可。
如果箭头函数的参数只有一个，也可以省去包裹参数的括号。
如果箭头函数有多个参数，将参数依次用逗号(，)分隔，包裹在括号中即可。
如果箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{ }。

2、箭头函数没有 prototype (原型)，所以箭头函数本身没有this

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined
// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

3、箭头函数不会创建自己的this箭头函数没有自己的this
箭头函数的this指向在定义（注意：是定义时，不是调用时）的时候继承自外层第一个普通函数的this。所以，箭头函数中 this 的指向在它被定义的时候就已经确定了，之后永远不会改变。

4、箭头函数不能作为构造函数

使用我们先了解一下构造函数的new都做了些什么？
简单来说，分为四步：
① JS内部首先会先生成一个对象；
② 再把函数中的this指向该对象；
③ 然后执行构造函数中的语句；
④ 最终返回该对象实例。
但是！！因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！

let Fun = (name, age) => {
    this.name = name;
    this.age = age;
};

// 报错
let p = new Fun('dingFY', 24);

5、箭头函数不绑定arguments
取而代之用rest参数…代替arguments对象，来访问箭头函数的参数列表

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

// 普通函数
function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

// rest参数...
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]