ES6箭頭函式

飛鷹3995發表於2021-06-14
函式

之前在看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]

 

相關文章