ES6函式引數

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

ES6函式引數

最新文章