關(guān)于箭頭函數(shù)的思考

ytwman 發(fā)布于2019-08-26 13:26 / 2560人閱讀

摘要：關(guān)于箭頭函數(shù)的思考自從有了箭頭函數(shù)這個靈活的功能，現(xiàn)在寫函數(shù)都習(xí)慣寫成箭頭函數(shù)格式然而如果不理解箭頭函數(shù)的原理，濫用它也會造成很大的影響。等同于等同于如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用語句返回。

關(guān)于箭頭函數(shù)的思考

自從有了ES6箭頭函數(shù)這個靈活的功能，現(xiàn)在寫函數(shù)都習(xí)慣寫成箭頭函數(shù)格式

() => {}

然而如果不理解箭頭函數(shù)的原理，濫用它也會造成很大的影響。
思考下面這個問題

let func = value => console.log(value)



let func = function(value) {
    console.log(value)
}

我們到平臺上測試一下, 顯然兩者不等。

let func = value => console.log(value)

// 等同于

"use strict";
var func = function func(value) {
  return console.log(value);
};

而 console.log()方法返回 undefined
return undefined 與沒有返回值一樣。所以效果上問題中兩種寫法沒有差異。

let func = value => value
// 等同于
let func = value => {
  return value
}
// 等同于
var func = function func(value) {
  return value;
};

如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回。

var sum = (num1, num2) => { 
    console.log("多條語句情況");
    return num1 + num2; 
}

那如果我使用了箭頭，使用了大括號，沒使用return呢？

var sum = (num1, num2) => {
    console.log("多條語句情況");
    num1+num2
}



"use strict";
var sum = function sum(num1, num2) {
    console.log("多條語句情況");
    num1 + num2; // 這條語句沒有任何作用
};

由于大括號被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個對象，必須在對象外面加上括號

let getInfo = name => ({ name: name, job: "moving bricks" });

使用箭頭函數(shù)必須要有返回值嗎？

// 如果箭頭函數(shù)只有一行語句，且不需要返回值
let fn = () => void doesNotReturn(); // void

箭頭函數(shù)表達(dá)式：沒有自己的 this arguments super new.target, 不能用作構(gòu)造函數(shù)，沒有prototype屬性，不能用作生成器

箭頭函數(shù)不會創(chuàng)建自己的 this, 它只會從自己作用域鏈的上一層繼承this 這點(diǎn)很重要。如下面示例，箭頭函數(shù)內(nèi)的this的作用域上一層即 Person 函數(shù)內(nèi)的 this

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正確地指向person 對象
  }, 1000);
}

var p = new Person();

箭頭函數(shù)沒有自己的 this 指針， call() apply() bind() 調(diào)用的時候， 第一個參數(shù)會被忽略 (--- 對于這個，我有疑惑。第一個參數(shù)會被忽略是指原先調(diào)用 call 方法的 fun.call(thisArg, arg1, arg2, ...)的 thisArg 會被忽略呢？還是 arg1會被忽略呢？我們來看栗子

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a); 
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  },

  addTest: function(a) {
   var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, 23, a);
  }
};

console.log(adder.add(1));         // 輸出 2
console.log(adder.addThruCall(1)); // 仍然輸出 2
console.log(adder.addThruCall("a")); // 輸出 24 （23+1）

很明顯了，第一個參數(shù)會被忽略 是忽略 call 方法里的第一個參數(shù)(好像是我在思考的時候想多了，這很明顯呀）

參考資源

es6 箭頭函數(shù) -- 阮一峰

箭頭函數(shù) MDN