箭头函数和普通函数的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

参考： 论普通函数和箭头函数的区别以及箭头函数的注意事项和不适用场景