之前在看Vue2.0的時候，就被很多的箭頭函數困擾，一直不知道是怎么回事，雖然箭頭函數四個字在我耳邊一直轉圈，今天小編整理整理箭頭函數里面的常見用法和表現形式，在這個Vue3.0已經到來的一段時間，希望大家也可以一起搭上箭頭函數的大風飛起來。大家也可以關注我的微信公眾號，蝸牛全棧。
一、es5中函數的聲明方式
function sum(x,y){ return x + y } console.log(sum(4,5)) // 9 let sum = function(x,y){ return x + y } console.log(sum(4,5)) // 9
對於上面的兩種方式，主要區別在於let 關鍵字聲明函數的時候，不存在變量提升的問題（ps:具體可以參考小編的第一篇文章，關鍵字let和var的區別）
二、es6中的箭頭函數：主要就是把function去掉，在參數和函數體之間用箭頭分割
let sum = (x,y) => { return x+y } console.log(sum(3,4)) // 7
對於函數體只有一行代碼的時候，上面代碼可以簡化為以下代碼
let sum = (x,y) => x + y
對於返回值，可以省略return關鍵字並用圓括號擴起來
function addStr(str1,str2){ return str1+str2 } const addStr = (str1,str2) => (str1+str2) // 以上兩個函數功能是一樣的，只是箭頭函數在箭頭右側，省略了關鍵字return，並且在外面添加圓括號
三、箭頭函數和普通函數之間的區別
1、this指向定義時所在的對象，而不是調用時所在的對象(箭頭函數中沒有this,this指向的是父級的this)
<html> <body> <button id="btn">點我</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ console.log(this) // <button id="btn">點我</button> }) </script> </body> </html>
<html> <body> <button id="btn">點我</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(function(){ // call apply bind改變this指向 console.log(this) // Window },1000) }) </script> </body> </html>
通過bind改變this指向
<html> <body> <button id="btn">點我</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(function(){ console.log(this) // <button id="btn">點我</button> }.bind(this),1000) }) </script> </body> </html>
箭頭函數中的this指向
<html> <body> <button id="btn">點我</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(() => { console.log(this) // <button id="btn">點我</button> },1000) }) </script> </body> </html>
2、不可以作為構造函數
function People(name,age){ console.log(this) // People{} this.name = name this.age = age } let p1 = People("lilei",34) console.log(p1) // People{name:"lilei",age:34} let People = (name,age) => { this.name = name this.age = age } let p1 = People("lilei",34) console.log(p1) // 報錯 People is not a constrator
3、不可以使用arguments對象
let foo = function(){ console.log(arguments) } console.log(foo(1,2,3)) // Arguments[1,2,3] let foo = () => { console.log(arguments) } console.log(foo(1,2,3)) // Arguments is not defined
箭頭函數兼容類似es5中arguments對象：通過rest參數
let foo = (...args) => { console.log(args) } console.log(foo(1,2,3)) // [1,2,3]