[JavaScript][ES6] 之 箭头函数 详解

[JavaScript] ES6 之 箭头函数 详解

• 时隔长达一个月，我又回来了，我胡汉三又回来了。
• 见多了土木工程施工员提桶跑路去当程序员的，可曾见过程序员提桶跑路下工地。。。。
• 废话不多说，切入正题

ES6 箭头函数 () => {}

• 箭头函数，即一个不用写function的，优雅的，简洁的······函数

语法

// 无参
() => { }

// 有参
参数1 => { }

// 多参
(参数1,参数2) => { }

// 直接返回值
(a,b) => a+b;
// 等同于
function(a,b) {
	return a+b;
}

• 以下两个函数是等价的

function go() {}
let go = () => { }

• 以下两个函数同样也是等价的

function go(a) { return a; }
let go = a => a;

• 箭头函数方便的地方
• 假如你只需要简单的实现一下计算功能 或者 你需要判断一下(三元表达式也是个不错的选择)

let go = n => n*2;
go(2);
// 返回值 4

let right = n => n%2==0;
go(3);
// 返回值 false

特性

• 值得注意的是，箭头函数最大的特点就是不会改变this的指向
• 也就是说，在箭头函数里的this并不会指向调用者本身
• 接下来我们做一个小实验来查看一下

let btn = document.querySelector('button');
			
btn.onclick = function(){
	console.log(this);
}

• 可以看到，普通函数的 this 指向了调用者 button 按钮，那么箭头函数呢

let btn = document.querySelector('button');
			
btn.onclick = () => {
	console.log(this);
}

• 箭头函数的指向，与函数外面一致，直接给我们返回了顶层对象 window

• 总结得出: 要用到 调用者本身这个 this 对象的函数，不要使用箭头函数，比如 this.className 等DOM操作