vue中箭头函数的使用

一.箭头函数和普通函数的区别：

1.普通函数中的this:

代表它的直接调用者(js的this是执行上下文), 例如 obj.cal() ,那么cal()方法中的this就是obj

若没找到直接调用者,则this指的是 window （常见的window的属性和方法有: alert, location,document,parseInt,setTimeout,setInterval等）或者 undefined

上图  普通函数  代码解析：
getFullName( )方法的直接调用者是Person对象，所以”1 -- >”位置输出如图；
 fn( )方法没有直接调用者对吧，所以“2-->位置”输出了一个 window对象
fn( )中this.firstName,this.lastName为 NaN

2.箭头函数中的this：

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的

对象(宿主对象)

您就记住这句话：箭头函数中的this指向外层调用者

上图 箭头函数 代码解析：
getFullName( )方法的直接调用者是Person对象，所以”1 -- >”位置输出如图；
 fn( )这个箭头函数方法的外层调用者还是Peoson对象，所以“2-->位置”的是外层调用者Person对象的信息
返回的是return fn（）函数 返回“3-->”中的 ‘hello’+’world’  即helloworld

所以：

1.普通函数中的this指向 它的直接调用者
箭头函数中的this指向 它的外层调用者

2.什么时候使用箭头函数函数？

当把一个函数的结果（返回值）作为另一个函数的参数的时候

您发现了麽 钩子函数作为方法的参数比如上图中的 fn( )方法的参数就是 “3-->”中的 this.firstname+this.lastname 即’helloworld’

-----------------------------------分割线------------------------------

二.箭头函数基础语法详情：

1.声明：普通函数                                                 |                            钩子函数

                           

2.当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

3.箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ ... }和return。还有一种可以包含多条语句，这时候就不能省略{ ... }和return

4.如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ ... }有语法冲突。注意，用小括号包含大括号则是对象的定义，而非函数主体。

 写到最后（分享呕心沥血好文）