一、熟悉箭头函数
箭头函数是ES6新增的语法,当准备把函数作为参数传递时,用箭头函数看起来会比较简洁,简洁,但是可读性略差(尤其是它被省略的根本不像个函数的时候).
1.传一个参数
1 | const 函数名 = 参数 => { |
或
1 | const 函数名 = (参数) => { |
2.传多个参数
1 | const 函数名 = (参1,参2) => { |
更离谱的是如果函数体只有一行,你可以不写大括号.
导致有时候会写出来一些看着不太像函数的函数:
1 | aaa = num => num * num |
1 | render: h => h(App) |
二、this指向问题
箭头函数的this指向与用其他写法的函数不同
箭头函数中的this引用的是距离最近的作用域中的this,从this的所在处向外层层寻找,直到有this的定义.1 | const obj = { |
1 | const obj2 = { |
为了方便大家看懂最后一个栗子,我拿PS画了个图…..
渣技术力,问就是PS课都拿来写代码了…..
图中左右两个箭头分别对应第2和4个箭头函数