Javascript/ES6箭头函数

Javascript/ES6箭头函数


文章目录

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


一、箭头函数是什么?

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


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

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

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


四、总结

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

你可能感兴趣的:(javascript,es6,前端)