js(ES6)预习&复习笔记(三)
ES6新增的函数定义的方式-箭头函数
() => {}
const fn = () => {} //代表把一个函数赋值给fn
():代表是函数;
=>:必须要的符号,指向哪一个代码块;
{}:函数体,函数体中只有一句代码,且代码的执行结果是返回值
可以省略大括号
若形参只有一个,可以省略小括号
对比ES5:
function sum(num1, num2) {
return num1 + num2;
}
es6写法
const sum = (num1, num2) => num1 + num2;
2.
function fn (a) {
return a;
}
es6写法
const fn = a => a;
箭头函数特性:
不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
例1:
const obj = { name: '李四'}
function fn () {
console.log(this); //this 指向 是obj对象
return () => {
console.log(this);
//这个this 指向 的是箭头函数定义的位置
//那么这个箭头函数定义在fn里面,而这个fn指向是的obj对象,所以这个this也指向是obj对象
}
}
例2:
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age)
}
}
obj.say();
箭头函数this指向的是被声明的作用域里面
但对象没有作用域,因此箭头函数虽然在对象中被定义,但是this指向的是全局作用域
总结
- 箭头函数中不绑定this
- 箭头函数中的this指向是它所定义的位置
- 换句话说,定义箭头函数中的作用域的this指向谁,它就指向谁
- 箭头函数优点:
- 解决了this执行环境造成的一些问题。
- 比如解决了匿名函数this指向的问题(匿名函数的执行环境具有全局性),
- 例如setTimeout和setInterval中使用this所造成的问题