箭頭函數和普通函數的10個區別

9021年末了，忽然想在這個最後一個月準備一下，試試機會，可否更進一步。因此開始準備一些基礎知識，也隨帶總結出來給各位想換工做的同窗。但願你們能找到本身想要的工做。祝你們好運！

總結回顧

• 這樣回答繼承，面試官可能更滿意

一、箭頭函數沒有prototype屬性

let fn = () => {};
fn.prototype === undefined; //true
複製代碼

二、箭頭函數的this指向定義時外層第一個普通函數的this

let fn,
    barObj = { message: 111 },
    fooObj = { message: 222 };
function bar() {
    // 運行時實例
    fn();
}

function foo() {
    // 定義時實例
    fn = () => {
        console.log('輸出：', this); // 輸出： {message: 222}
    }
}
// 這裏有一個問題就是，foo.call必定要在bar.call以前，你們想一想爲何了？
foo.call(fooObj);
bar.call(barObj);
複製代碼

三、不能直接修改箭頭函數的this

let fn,
    barObj = { message: 111 },
    fooObj = { message: 222 };

function bar() {
    // 運行時實例
    fn.call({message: 333});
    baz.call({message: 333})
}

function foo() {
    // 定義時實例
    fn = () => {
        console.log('輸出：', this); // 輸出： {message: 222}
    }
}
function baz() {
	console.log('輸出：', this); // 輸出： {message: 333}
}
foo.call(fooObj);
bar.call(barObj);
// 這裏如何能修改箭頭函數this的指向了，咱們能夠間接操做。
// 修改箭頭函數的this指向定義時外層第一個普通函數的this，來達到咱們的目的
複製代碼

四、當箭頭函數外層沒有普通函數時，它的this在嚴格和非嚴格模式都是指向window。

五、箭頭函數沒有外層函數直接使用arguments會報錯

let foo = () => {
    console.log('輸出：', arguments); 
}
foo();
複製代碼

六、箭頭函數有外層函數時，arguments繼承自外層函數的arguments

function foo() {
	console.log(arguments);
	function boo () {
		console.log(arguments);
		function coo () {
			console.log(arguments);
			let aoo = () => {
				console.log(arguments);
			}
			aoo('外層4');
		}
		coo('最外層3');
	}
	boo('外層2');
}
foo('外層1');
複製代碼

七、使用new調用箭頭函數會報錯

let aoo = () => {
	console.log(arguments);
}
let boo = new aoo();
複製代碼

八、箭頭函數沒有外層函數時，new.target會報錯

let a = () => {
    console.log(new.target);
};
a();
複製代碼

九、箭頭函數不支持重名參數

function foo(a, a) {
    console.log(a, arguments); 
}

var boo = (a, a) => {
    console.log(a);
};
foo(1, 2);
boo(1, 2);
複製代碼

十、箭頭函數語法更具優雅

1. 箭頭函數不用寫function
2. 箭頭函數只有一個參數時，能夠省略括號
3. 箭頭函數能夠省略{}和return

參考： 論普通函數和箭頭函數的區別以及箭頭函數的注意事項和不適用場景