Vue學習筆記之Vue的箭頭函數

 

0x00 箭頭函數

基本語法：

ES6容許使用「箭頭」（=>）定義函數

var f = a = > a //等同於
var f = function(a){ return a; }

若是箭頭函數不須要參數或須要多個參數，就使用一個圓括號表明參數部分。

//無形參
var f = () => 5; // 等同於
var f = function () { return 5 }; //多個形參
var sum = (num1, num2) => num1 + num2; // 等同於
var sum = function(num1, num2) { return num1 + num2; };

 

使用箭頭函數注意點：

箭頭函數有幾個使用注意點。

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

　　

 1  var name = '張三'；  2  var person = {  3         name:'小馬哥',
 age:18,　　  4         fav:function(){  5             console.log(this)  6             console.log(this.name)  7  }  8  }  9 
10     person.fav();

咱們發現，打印的結果爲

此時this指向的是使用它的對象，也就是person對象

var person2 = { name:'小馬哥', age:18, fav: ()=>{ // 當前this指向了定義時所在的對象（window）
         console.log(this); } } person2.fav();

打印的結果：

使用箭頭函數，它表示定義時所在的對象window。

再看一個例子吧！

function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // id: 42

上面代碼中，setTimeout的參數是一個箭頭函數，這個箭頭函數的定義生效是在foo函數生成時，而它的真正執行要等到 100 毫秒後。若是是普通函數，執行時this應該指向全局對象window，這時應該輸出21。可是，箭頭函數致使this老是指向函數定義生效時所在的對象（本例是{id: 42}），因此輸出的是42。

（2）不能夠使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。

 var person3 = { name:'小馬哥', age:18, fav: ()=>{ console.log(argument); } } person3.fav('把妹','把爺');

報出以下❎：