Javascript/ES6箭头函数
文章目录
一、箭头函数是什么?
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,接收过来就是数组类型,接收的是形参之外的所有的实参;