這篇文章主要介紹了JavaScript中的普通函數和箭頭函數的區別和用法詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
最近被問到了一個問題：
javascript 中的箭頭函數( => ) 和普通函數( function ) 有什麼不同？
我當時想的就是：這個問題很簡單啊~（flag），然後做出了錯誤的回答…
箭頭函數中的this 和呼叫時的上下文無關，而是取決於定義時的上下文
這並不是很正確的答案…雖然也不是完全錯誤
#箭頭函數中的this
首先說我的回答中沒有錯誤的部分：箭頭函數中的this 確實和調用時的上下文無關
function make () {
return ()=>{
console.log(this);
}
}
const testFunc = make.call({ name:'foo' });
testFunc(); //=> { name:'foo' }
testFunc.call({ name:'bar' }); //=> { name:'foo' }這個例子可以看到，確實箭頭函數在定義之後，this就不會發生改變了，無論用什麼樣的方式調用它，this 都不會改變；
但嚴格來說，這並不是“取決於定義時的上下文”， 因為箭頭函數根本就沒有綁定自己的this，在箭頭函數中調用this 時，僅僅是簡單的沿著作用域鏈向上尋找，找到最近的一個this 拿來使用罷了；
從效果上看，這和我之前的理解並沒有太大偏差，但它們的本質卻是截然不同，箭頭函數並不是普通函數新增了this 不受調用時上下文影響的特性，而是減少了很多特性；
箭頭函數其實是更簡單的函數
實際上箭頭函數中不只是this 和普通函數有所不同，箭頭函數中沒有任何像this 這樣自動綁定的局部變量，包括：this，arguments，super(ES6)，new.target(ES6)…
借用別人的一個例子：
function foo() {
setTimeout( () => {
console.log("args:", arguments);
},100);
}
foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]在普通函數中，會自動綁定上的各種局部變量，箭頭函數都是十分單純的沿著作用域鏈向上尋找…
箭頭函數就是這麼個簡單、純粹的東西；
所以我個人認為箭頭函數更適合函數式程式，除了它更短以外，使用箭頭函數也更難被那些沒有顯示宣告的變數影響，導致你產生意料之外的計算結果；
那麼普通函數能否實現和箭頭函數一樣的效果呢？
如果是像當初的我一樣簡單的考慮固定住this 這個易變的傢伙……那倒是很簡單，有些常用的方法，比如這樣：
function make () {
var self = this;
return function () {
console.log(self);
}
}或
function make () {
return function () {
console.log(this);
}.bind(this);
}然而第二種方法只能固定this 這一個變數而已，如前文所述，箭頭函數中的arguments 等變數也是從作用域鏈中尋找的，為了實現類似的效果，我們只有重新定義一個局部變數這一種方式，而babel 也是使用這種方式對箭頭函數進行處理的。
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);
};
}那麼…如果我想在箭頭函數中使用 arguments 該怎麼辦？
…我覺得如果你有這個需求，可能還是用普通函數比較合適一點…
但並不是說在箭頭函數中無法以類似陣列的形式取到所有參數，我們可以利用展開運算子來接收參數，例如這樣：
const testFunc = (...args)=>{
console.log(args) //数组形式输出参数
}或許真的有場景需要用到這種寫法，但我還是認為，箭頭函數更適合那些接受固定的參數，返回一個計算結果的簡單情況；
以上是詳解JavaScript中的普通函數和箭頭函數的區別和用法的程式碼案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
