ES6中的箭头函数的总结

箭头函数的定义

ES6使用箭头函数（=>）来定义函数，箭头函数是一个函数表达式，理论上，任何使用函数表达式的地方都可以改成箭头函数

首先来看箭头函数的基本语句

//带一个参数的箭头函数
let fn = a => a	//箭头函数在参数和箭头之间不能换行，可以省略包裹参数的括号
fn('大丫') // 大丫

//带多个参数的箭头函数
let fn = (a, b) => a + b;//注意点：参数必须要用圆括号包裹
fn(1, 2) //3

//不带参数的箭头函数
let fn = () => {
	alert('大丫');
}
fn() //大丫

//需要直接返回一个对象
let fn = (a, b) => ({c: a + b}); 
fn(4, 5) //{c: 9}

//函数的代码块需要多条语句
let fn = (a, b) => {
	return a * b
}
fn(2, 3) //6

箭头函数使用时应注意的点

箭头函数不能够使用arguments对象

function fn() {
	return () => console.log(arguments[0])
}
fn(3, 5)(2, 4) //3

在这个例子中箭头函数没有agruments，就输出3

call()、apply()、bind()不能改变箭头函数内部this的指向，bind()绑定的方法，也不可以改变

var name = 'yaya';
var obj = {
	name : 'yiyi'
}
let fun = () => {
	console.log(this.name);
}
fun();	//yaya
fun.call(obj)	//yaya
fun.apply(obj)	//yaya
fun.bind(obj)	//yaya

在这个例子中，箭头函数定义在全局作用域中，执行后输出结果全为yaya，说明this的指向没有改变，永远指向window对象，在window对象下的全局变量

箭头函数没有原型属性

let Fun = () => {};
console.log(Fun.prototype); //undefined

箭头函数不能用作构造器，与new使用，会抛出错误

let Fun = () =>{};
let fun = new Fun(); //Uncaught TypeError: Fun is not a constructor

箭头函数不能用在定义对象的方法上

let obj = {
	a : 1,
	b : function() {
		console.log(this.a, this)
	},
	c : () => console.log(this.a, this) 
}
obj.b();	//1 {a: 1, b: ƒ, c: ƒ}
obj.c();	//undefined Window

上例中，本来的需求是想要c方法中的this也指向obj，但它指向了obj所在上下文中的this（window），所以箭头函数不能用在定义对象的方法上

this指向问题

在使用=>定义函数时，this的指向是定义时所在的对象，而不是使用时所在的对象
直接调用箭头函数时，this指向了window
如果使用了call()、apply()、bind()方法，this就指向绑定的数据
如果是DOM事件函数，this就指向事件源

如果使用了new关键字，this就执向新创建的对象

function Fun() {
   this.value = 6;
}
var a = new Fun();
console.log(a.value) //6

在这例子中使用用new关键字构造，Fun()函数中的this指向了新的对象，并赋值给a
总结：

需要arguments对象时，箭头函数慎用
箭头函数避免在原型上使用
箭头函数不能用在构造函数中
箭头函数不能用在定义对象的方法上

如有错误，请指出，谢谢

不难呐

发布了25 篇原创文章 · 获赞 1 · 访问量 602

私信关注

ES6中的箭头函数的总结

猜你喜欢