小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
前言
箭头函数是ES6当中对函数的一种全新的表示方法,看起来也非常简洁,我在之前也经常使用,但是没有整体的学习,今天突发奇想,决定进一步的学习一下箭头函数
起步
我们以前在写函数的时候会这样写
function fun() {
return 100;
}
console.log(fun()); //100
也会这样写
const fun = function() {
return 100;
}
console.log(fun()); //100
在ES6中,我们将代码简化
const fun1 = () => {
return 100;
}
console.log(fun1()); //100
再次简化
const fun2 = x => x;
console.log(fun2(100)); //100
- ()中定义参数,如果只有一个参数,()可以省略
- {}中写函数体,如果函数体中只有返回值,可以不写return
箭头函数与普通函数的区别
举个例子
let obj = {
name: '小明',
age: 3,
sayName() {
setTimeout(function() {
console.log("我是" + this.name);
}, 500)
}
}
obj.sayName();
这串代码执行结束后,打印的是 我是undefined
,那么为什么“小明”不能被打印出来呢?
let obj = {
name: '小明',
age: 3,
sayName() {
setTimeout(function() {
console.log(this);
}, 500)
}
}
obj.sayName();
所以我们打印一下this,打印的结果是window对象,所以这个this指向的是window对象,也就是全局对象。因为这里的代码是sayName函数里面套了一个函数,内函数里面的this指向不到小明,但是sayName函数的this可以指到小明,解决的办法就是在sayName函数里定义一个变量,值为this,内函数再通过变量指向小明,代码如下
let obj = {
name: '小明',
age: 3,
sayName() {
let self = this;
setTimeout(function() {
console.log("我是" + self.name);
}, 500)
}
}
obj.sayName();
这样就能够打印出我是小明
了
使用箭头函数
看下面这串使用了箭头函数的代码
let obj = {
name: '小明',
age: 3,
sayName() {
setTimeout(() => {
console.log("我是" + this.name);
}, 500)
}
}
obj.sayName();
打印的结果就是 我是小明
我想你们和我都有同样的一个疑惑:为什么使用箭头函数就可以实现了呢?
箭头函数与普通函数的区别
-
this指向不同
- 普通函数:谁调用这个函数,
this
指向谁 - 箭头函数:在哪里定义函数,
this
指向谁
- 普通函数:谁调用这个函数,
片尾
嘻嘻嘻,小白暂时用到的也就这么多(其实我就是会这么多),后续我会继续更新这篇博客的
- 后续:arguments、super、new.target