Vue ES6箭頭函數使用總結

Vue ES6箭頭函數使用總結

by:授客 QQ：1033553122

箭頭函數

ES6允許使用“箭頭”（=>）定義函數：

函數不帶參數

定義方法：函數名稱 = () => 函數體

let func = () => 1

等同於

function func() {

return 1;

}

函數只帶一個參數

定義方法：

函數名稱 = 參數 => 函數體

或者

函數名稱 = (參數) => 函數體

let func = state => state.count

等同於

function func(state) {

return state.count;

}

函數帶多個參數

定義方法：函數名稱 = (參數1,參數2,...，參數N) =>函數體

let arg2 = 1

let func = (state, arg2) => state.count + arg2

等同於

function func(state，arg2) {

return state.count + arg2;

}

函數體包含多條語句

let author = {

    name: "授客",

    age: 30,

viewName: () => {

        console.log("author name"); // 輸出undefined

        // 當前this指向了定義時所在的對象

        console.log(this.name); // 輸出undefined,並沒有得到"授客"

    }

};

author.viewName();

註意

函數體內的this對象，就是定義時所在的對象，而不是使用它時所在的對象