ECMAScript6: 箭头函数

箭头函数语法

单一参数、函数体只有一个语句

let welcome = msg => msg;

/*
 *相当于
function welcome(msg){
	return msg;
}
 */

多个参数

let welcome = (user, msg) => `${user}, ${msg}`;

/*
 *相当于
function welcome(user, msg){
	return user + ", " + msg;
}
*/

console.log(welcome("zhangasan", "welcome you."));  // zhangasan, welcome you.

没有参数、使用一对空的圆括号

 
let welcome = () => "welcome you.";

/*
 *相当于
function welcome(){
	return "welcome you.";
}
 */
console.log(welcome("welcome you."));  // welcome you

函数体有多条语句、使用花括号包裹函数体

let add = (a, b) => {
	let c = a + b;
	return c;
}

/*
 *相当于
function add(a, b){
	let c = a + b;
	return c;
}*/
console.log(add(5,3));  // welcome you

返回对象字面量

如果箭头函数返回值是一个对象字面量，则需要将该字面量包裹在圆括号中。

let createCar = (color, doors) => ({color: color, doors: doors});

/*
 *相当于
function createCar(color, doors){
	return {
		color: color,
		doors: doors
	}
}
 */

console.log(createCar("black", 4));  // { color: 'black', doors: 4 }

箭头函数与this

JS中的this 并不指向对象本身，其指向是可以改变的：

var greeting = "Welcome";
			function sayHello(user){
				alert(this.greeting + ", " + user);
			}
			
			var obj = {
				greeting: "Hello",
				sayHello: sayHello
			}
			sayHello("zhangsan");      //Welcome, zhangsan
			obj.sayHello("lisi");      //Hello, lisi
			var sayHi = obj.sayHello;
			sayHi("wangwu");           //Welcome, wangwu
                      
                        var obj = {
				greeting: "Hello",
				sayHello: function(){
					setTimeout(function(){
						alert(this.greeting);
					}, 2000);
				}
			}
			obj.sayHello();  // undefined

为解决这一问题，可以使用bind方法，将this明确的绑定在某个对象上：

			var greeting = "Welcome";
						
			var obj = {
				greeting: "Hello",
				sayHello: function(){
					setTimeout((function(){
						alert(this.greeting);
					}).bind(this), 2000);
				}
				// 或者
				//sayHello: function(){
				//	var that = this;
				//	setTimeout(function(){
				//		alert(that.greeting);
				//	}, 2000);
				//}
			}
			obj.sayHello();  // Hello

也可以用箭头函数来解决this指向的问题，这种解决办法更好。

箭头函数中没有this绑定，必须通过查找作用域来决定其值。如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this; 否则this的值会被设置为全局对象。

			var greeting = "Welcome";

			
			var obj = {
				greeting: "Hello",
				sayHello: function(){
					setTimeout(() => alert(this.greeting), 2000);
				}
			}
			obj.sayHello();  // Hello
			var sayHi = obj.sayHello;
			sayHi();