js(ES6)预习&复习笔记（三）

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所造成的问题