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

蝸牛的北極星之旅發表於2019-12-06
函式

9021年底了，突然想在這個最後一個月準備一下，試試機會，能否更進一步。所以開始準備一些基礎知識，也隨帶總結出來給各位想換工作的同學。希望大家能找到自己想要的工作。祝大家好運！

總結回顧

1、箭頭函式沒有prototype屬性

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

2、箭頭函式的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);
複製程式碼

3、不能直接修改箭頭函式的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，來達到我們的目的
複製程式碼

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

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

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

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

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

6、箭頭函式有外層函式時，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');
複製程式碼

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

7、使用new呼叫箭頭函式會報錯

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

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

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

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

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

9、箭頭函式不支援重名引數

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

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

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

10、箭頭函式語法更具優雅

  1. 箭頭函式不用寫function
  2. 箭頭函式只有一個引數時，可以省略括號
  3. 箭頭函式可以省略{}和return

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

相關文章