JavaScript 箭头函数深入理解

写法

• 只能是赋值式写法，不能是声明式（function）

let f = (a) => {
	return a
}

• 如果参数只有一个，可以不加括号，但没有参数的话也得加括号

let f = a => {
	return a
}

• 函数体就一个表达式，可以去掉花括号

let f = a => return a

• 函数体只有一个return语句，可以不写return关键字，箭头函数会自行返回

let f = a => a
f(2) // 2

注意点

• 如果要返回对象，得注意加括号（）

let f = () => ({a: 1}) // 如果没括号，花括号内会被视作待执行语句

• 解析顺序（举个例子就懂了）

let callback;

callback = callback || function() {}      // ok，普通函数
callback = callback || () => {}           // SyntaxError
callback = callback || (() => {})         // ok，箭头函数

特性

• 没有this：它不会创建自己的this，而是从作用域链的上一层继承。所以也不能用call、apply、bind改变它的this
• 没有（不绑定）arguments
• 不能用new调用
• 没有prototype属性
• 没有super
• 不能用yield（除非嵌套在允许使用的函数内）

概括的解释，因为箭头函数自己是不会创建新的上下文的（作用域）

举例子促消化

• 主要是明白this的差异（有点玄学）：箭头函数的this是在定义时确定的
• 以下代码都可在复制直接去控制台查看结果

var b = 2 // window.b = 2
function fun () {
	let b = 1
	let c = () => console.log(this.b)
	c()
}

fun() // 2，输出window.b
// 箭头函数的this是fun的this，而fun的this是在全局下运行时才赋值的（window）

---

function fun(){
	console.log(this)
    return ()=>{ // 闭包
    	console.log(this)
    }
}
fun() // window {}
// 此处定义箭头函数，则this指向fun
var f = new fun() // fun {}，此时是会打印结果的，可以参考new关键字

---

const obj = {
    a: function() { console.log(this) },
    b: {
    	// 定义时，相当于obj.b.c = () => { console.log(this) }
    	c: () => { console.log(this) }
	}
}
obj.a()    // obj {}
obj.b.c()  // window {}
// 可能这里会被误解。对象的属性和对象处于同一个作用域下，即全局（无论是否嵌套）

---