最近被問到了一個(gè)問題：

javaScript 中的箭頭函數(shù) ( => ) 和普通函數(shù) ( function ) 有什么區(qū)別？

我當(dāng)時(shí)想的就是：這個(gè)問題很簡單啊~（flag），然后做出了錯(cuò)誤的回答……

箭頭函數(shù)中的 this 和調(diào)用時(shí)的上下文無關(guān)，而是取決于定義時(shí)的上下文

這并不是很正確的答案……雖然也不是完全錯(cuò)誤

箭頭函數(shù)中的 this

首先說我的回答中沒有錯(cuò)誤的部分：箭頭函數(shù)中的 this 確實(shí)和調(diào)用時(shí)的上下文無關(guān)

function make () {
  return ()=>{
    console.log(this);
  }
}
const testFunc = make.call({ name:'foo' });
testFunc(); //=> { name:'foo' }
testFunc.call({ name:'bar' }); //=> { name:'foo' }

這個(gè)例子可以看到，確實(shí)箭頭函數(shù)在定義之后，this 就不會(huì)發(fā)生改變了，無論用什么樣的方式調(diào)用它，this 都不會(huì)改變；

但嚴(yán)格來說，這并不是“取決于定義時(shí)的上下文”， 因?yàn)榧^函數(shù)根本就沒有綁定自己的 this，在箭頭函數(shù)中調(diào)用 this 時(shí)，僅僅是簡單的沿著作用域鏈向上尋找，找到最近的一個(gè) this 拿來使用罷了；
從效果上看，這和我之前的理解并沒有多大偏差，但它們的本質(zhì)卻是截然不同，箭頭函數(shù)并不是普通函數(shù)新增了 this 不受調(diào)用時(shí)上下文影響的特性，而是減少了很多特性；

箭頭函數(shù)其實(shí)是更簡單的函數(shù)

實(shí)際上箭頭函數(shù)中并不只是 this 和普通函數(shù)有所不同，箭頭函數(shù)中沒有任何像 this 這樣自動(dòng)綁定的局部變量，包括：this，arguments，super(ES6)，new.target(ES6)……

借用別人的一個(gè)例子：

function foo() {
  setTimeout( () => {
   console.log("args:", arguments);
  },100);
}
foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]

在普通函數(shù)中，會(huì)自動(dòng)綁定上的各種局部變量，箭頭函數(shù)都是十分單純的沿著作用域鏈向上尋找……

箭頭函數(shù)就是這么個(gè)簡單、純粹的東西；

所以我個(gè)人認(rèn)為箭頭函數(shù)更適合函數(shù)式編程，除了它更短以外，使用箭頭函數(shù)也更難被那些沒有顯示聲明的變量影響，導(dǎo)致你產(chǎn)生意料之外的計(jì)算結(jié)果；

那么普通函數(shù)能否實(shí)現(xiàn)和箭頭函數(shù)一樣的效果呢？

如果是像當(dāng)初的我一樣簡單的考慮固定住 this 這個(gè)易變的家伙……那倒是很簡單，有些常用的方法，比如這樣：

function make () {
  var self = this;
  return function () {
    console.log(self);
  }
}

或者

function make () {
  return function () {
    console.log(this);
  }.bind(this);
}

然而第二種方法只能固定 this 這一個(gè)變量而已，如前文所述，箭頭函數(shù)中的 arguments 等變量也是從作用域鏈中尋找的，為了實(shí)現(xiàn)類似的效果，我們只有重新定義一個(gè)局部變量這一種方式，而 babel 也是使用這種方式對箭頭函數(shù)進(jìn)行處理的。

function make () {
  return ()=>{
    console.log(this);
    console.log(arguments);
  }
}
//babel it...
function make() {
  var _this = this,
    _arguments = arguments;
  return function () {
    console.log(_this);
    console.log(_arguments);
  };
}

那么……如果我想在箭頭函數(shù)中使用 arguments 該怎么辦？

……我覺得如果你有這個(gè)需求，可能還是用普通函數(shù)更合適一點(diǎn)……

但并不是說在箭頭函數(shù)中無法以類似數(shù)組的形式取到所有參數(shù)，我們可以利用展開運(yùn)算符來接收參數(shù)，比如這樣：

const testFunc = (...args)=>{
  console.log(args) //數(shù)組形式輸出參數(shù)
}

或許真的有場景需要用到這種寫法，但我還是認(rèn)為，箭頭函數(shù)更適合那些接受固定的參數(shù)，返回一個(gè)計(jì)算結(jié)果的簡單情況；

以上所述是小編給大家介紹的JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！