Javascript中 帶名 匿名 箭頭函數的重要差異(推薦)

帶名函數是指函數顯示地給出了一個名字的函數，function abs(x){}。匿名函數是指函數只帶有function這個關鍵字，而沒有像abs這種函數名稱的函數，如function(){}。 ES6標準新增了一個新的函數：Arrow Function（箭頭函數）箭頭函數表面上相當於匿名函數，並且簡化了函數定義。它們各自的差別是什麼呢？

1 帶名和匿名函數的區別

區別：匿名函數需要講地址賦值給另一個變數let a，然後再用a來調用函數；而帶名函數因為顯示地給出了函數名稱，所以可以直接用這個函數名稱呼叫。

帶名函數傳回值是函數體內的回傳值，如abs(x)函數的回傳值是number變數。函數調用時，直接abs(6)調用，這個非常好理解。

function abs(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

但是匿名函數呢？如下所示，函數未顯示地給出一個函數名稱，但是此處的abs被賦值為這個匿名函數的位址，所以使用時可以直接用abs(-3)，諸如此類的呼叫。

let abs=function(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

2 箭頭函數

ES6標準新增了一個新的函數：Arrow Function（箭頭函數）。為什麼叫Arrow Function？因為它的定義用的就是一個箭頭。箭頭函數表面上相當於匿名函數，並且簡化了函數定義。

箭頭函數有兩種格式，一種是只包含一個表達式，連{ … }和return都省略掉了。

x => x * x

上面的箭頭函數相當於一個匿名函數「」

function (x) {
 return x * x;
}

還有一個可以包含多條語句，這時候就不能省略{ … }和return：

(x,y) => {
 if (x > 0) {
  return x + y;
 }
 else {
  return -x + y;
 }
}

匿名函數的不同

箭頭函數看起來是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法作用域，由上下文決定。

呼叫函數obj1.getAge(2017)和呼叫obj2.getAge(2017)會得到相同的結果嗎？

obj1中fn函數，由於JavaScript函數對this綁定的錯誤處理，無法得到預期的結果，this.birth指向window或undefined。

但是obj2，fn函數是箭頭函數，箭頭函數完全修復了this的指向，this總是指向詞法作用域，也就是外層呼叫者obj2。

var obj1 = {
 birth: 1990,
 getAge: function (year) {
  let fn=function(y){
   return y - this.birth; // this指向window或undefined
  };
  return fn(year);
 }
};
var obj2 = {
 birth: 1990,
 getAge: function (year) {
  var fn = (y) => y - this.birth; // this.birth为1990
  return fn(year);
 }
};

   

4 總結

和帶名函數相比，匿名函數需要講地址賦值給另一個變量let a，然後再用a來調用函數；和匿名函數比，箭頭函數完全修復了thisthis的指向，this總是指向詞法作用域。

以上所述是小編給大家介紹的Javascript中 帶名 匿名 箭頭函數的重要區別，希望對大家有所幫助，如果有任何疑問歡迎給我留言，小編會及時回復大家的！

更多Javascript中 帶名 匿名 箭頭函數的重要區別(推薦)相關文章請關注PHP中文網！