前端框架VUE----箭頭函數

箭頭函數

基本語法：

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('把妹','把爺');

報出如下❎：