箭头函数应注意的点

73 阅读3分钟

首先,什么是箭头函数呢,他是ES6新增的特性 =>

var kkb = () =>{......};

箭头函数的表达式语法比函数表达式更简洁,

` var kkb = k = > k ; 等同于

var kkb = function(k){

return k;

} ` 如果箭头函数不需要或者需要多个参数则用一个圆括号表示参数就可以

` 无参数时

var kkb = () => 0;等价于

var kkb = () => {return 0;};

参数为多个时,

var kkb = (num1,num2) => num1+num2 ;等同于

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var kkb = function(num1,num2){

return num1+num2;

};

参数只有一个时,圆括号的可以选择的

(一个参数) => { 函数表达式 }; 等同于

一个参数 => { 函数表达式 }; `

*当箭头函数后面的函数声明部分只有一行时,可以不加大括号,并且默认return

*当箭头函数后面的函数声明部分加大括号时,必须添加return

在ES6中,由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。 举个栗子,尝一尝:

let  kkb1 = id = >{id:1,name:'Amy'}

console.log(kkb(1))  //会报错

let  kkb2 = id =>({id:2,name:'Amy'})

console.log(kkb2(2))  //{id:2,name:'Amy'}

如果写return的话,应该这样写

let  kkb3 = id =>{

	return {id:3,name:'Amy'}
    
}
console.log(kkb3(3)) //{id:3,name:'Amy'}

箭头函数有几个使用注意点:

1.函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象.

2.不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误.

3.不可以使用arguments对象,该对象在函数体内不存在.如果要用,可以用 Rest 参数代替.

4.不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

上面四点中,第一点尤其值得注意,this对象的指向是可变的,但是在箭头函数中,它是固定的.

function kkb() {
	setTimeout(() => {
		console.log('id:', this.id);
	}, 100);
}
var id = 666;
kkb.call({ id: 888 });
//id:888;

箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域.下面是另一个例子:

	function KKB() {
			this.s1 = 0;
			this.s2 = 0;
			//  箭头函数
			setInterval(() => this.s1++, 1000);
			//  普通函数
			setInterval(function () {
				this.s2++;
			}, 1000);
		}
		var KKB = new KKB();
		setTimeout(() => console.log('s1: ', KKB.s1),3000);
		setTimeout(() => console.log('s2: ', KKB.s2), 3000);
		// s1: 3  S2:0

KKB函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即KKB函数),后者的this指向运行时所在的作用域(即全局对象)。所以, 3000 毫秒之后,KKB.s1被更新了 3 次,而KKB.s2一次都没更新。箭头函数可以让this指向固定化,这种特性很有利于封装回调函数。

由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。