Javascript/ES6箭头函数

文章目录

Javascript/ES6箭头函数
一、箭头函数是什么？
二、箭头函数与普通函数的区别
三、箭头函数的使用
- 1.箭头函数是匿名函数，不能作为构造函数，不能使用new
- 2.箭头函数不能使用arguments、super
- 3.箭头函数中this 指向
四、总结

一、箭头函数是什么？

ES6 引入了一种新的语法来编写函数，它就是箭头函数，绝大数，箭头函数与函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，也可以使用箭头函数。箭头函数是一种函数简写方式，定义形式是：参数(…)后面跟着箭头 =>，然后是函数内容体。

二、箭头函数与普通函数的区别

箭头函数是“=>”，普通函数是“function”。箭头函数不能作为构造函数，不能使用new。箭头函数不绑定arguments，但普通函数可以。箭头函数中的this代表上层对象，普通函数中的this代表当前对象。

箭头函数比普通函数更加简洁
如果没有参数，就直接写一个空括号即可。
如果只有一个参数，可以省去参数的括号。
如果有多个参数，用逗号分割。
如果函数体的返回值只有一句，可以省略大括号。
箭头函数没有自己的this
箭头函数不会创建自己的this，所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。
箭头函数继承来的this指向永远不会改变

普通函数

// 普通函数
let PI = function() {return 3.14;
};

箭头函数

// 箭头函数
let PI = () => {return 3.14
}

三、箭头函数的使用

箭头函数有两种格式：

一种只包含一个表达式，没有{...} 和return

let PI = x => {return 10 * x}    //多个参数时需要括号，例如(x, y，z)

一种包含多条语句，这个时候 {...} ，return 就不能省略

     //箭头函数var PI = () => 5;//等价于//普通函数var PI = function () {return 5;};//箭头函数var PI = (num1, num2) => num1 + num2;//等价于//普通函数var PI = function (num1, num2) {return num1 + num2;}

提示： 1.函数体内只包含一个表达式 { … }和return可以省略掉。函数体内包含多条表达式 { ...}和return不能省略掉。 2.如果要返回一个对象，如果是单表达式，会报错：x => { foo: x }。因为和函数体的{ ...}有语法冲突，要改为：x => ({ foo: x })

1.箭头函数是匿名函数，不能作为构造函数，不能使用new

代码如下（示例）：

let PI = () => {console.log('3.14');
}let fc = new PI();

2.箭头函数不能使用arguments、super

代码如下（示例）：

// 普通函数
let PI = function() {return arguments.length;
}
PI(1, 2, 3); // 3// 箭头函数
let PI = () => {return arguments.length;
}PI(1, 2,3); // Uncaught ReferenceError: arguments is not defined

3.箭头函数中this 指向

代码如下（示例）：

let PI = 3.14;
const obj_1 = {PI: 10,fun_1: function() {let PI = 20;const obj_2 = {PI: 30,fun_2: () => {console.log(this.PI);}}obj_2.fun_2();}
}
obj_1.fun_1(); // 返回10

fun_2返回的结果为：10

原因是箭头函数没有this，箭头函数的this指向是父级的this指向。如果没有父级或者父级没有指向，箭头函数的this指向是window ，这里箭头函数的执行上下文是函数fun_1()，所以它就继承了fun_1()的this，obj_1调用的fun_1，所以fun_1的this指向obj_1，所以obj_1.PI 为 10。

四、总结

要有个箭头
箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；
箭头的后面是函数体；
如果函数体只有一个语句，没有{}，此时的返回值不需要return；
箭头函数里面的this总是指向最靠近的function 内部的this；
对象里面的方法，尽可能不要使用箭头函数；
箭头函数里面没有arguments，可以使用…reset，接收过来就是数组类型，接收的是形参之外的所有的实参；