普通函数和箭头函数区别

如何回答面试官普通函数和箭头函数的区别（this指向）

普通函数和箭头函数区别有以下几点区别：

声明方式不同：普通函数可以是声明式的，也可以是赋值式；而箭头函数只能是赋值式的；
this指向不同：普通函数有原型prototype，this指向不确定；箭头函数本身没有this，因为没有原型，this指向确定，指向他父级作用域；
new不同：普通函数可以new；箭头函数不能new，没有prototype属性，也不可以被当作构造函数，
传参方式：普通函数可以获取 arguments对象，箭头函数不能获取可以通过 ...rest ，用 rest 对象代替

箭头函数写法：

let sum = (a, b) => {return a + b;
}

普通函数写法

var sum = function (a, b){return a + b;
}

1.this指向问题

这一点要特别注意，也是面试的时候面试官最关注的。

箭头函数的this指向的是父级作用域的this，是通过查找作用域链来确定 this 的值，也就是说看的是上下文的this，指向的是定义它的对象，而不是使用时所在的对象。
普通函数指向的是它的直接调用者。

（1）普通函数的 this 指向可以参考阮一峰js的this用法，当听到你说 this 的问题，面试官可能会接下去问你 this 的一些拓展问题了，如何改变 this 指向，比如bind方法什么的，然后还可能让你实现 bind，总之真的很多可以问的。

（2）箭头函数的this

let obj = {a: 1,b: () => {console.log(this.a); // undefined},c: function() {console.log(this.a); // 1 },};obj.b();obj.c();

题中的箭头函数 b，没有this，它的this是继承来的，默认指向定义它的时候的对象，就是我们说的宿主对象，而不是执行它的对象。这里通过obj.b()，此时this指向的window对象，上面没有a，所以返回undefined。

而普通函数 c 中，通过obj.c()，this指向的是它的直接调用者，就是obj，所以返回1。

拓展

（1）setTimeout中的普通函数：

var obj = {a:1, print(){setTimeout(function(){console.log(this.a);},1000);}};
obj.print();//undefined

定时器中的函数由于没有默认宿主对象，setTimeout中的function未被任何对象调用，它的 this 指向默认是 window对象 ，自然输出 undefined 。

setTimeout中的箭头函数：

  var obj = {a:1,print(){setTimeout(() => { console.log(this.a); },1000);}};obj.print();// 1

箭头函数的 this 指的是定义它的对象，所以 this 指向的是 obj对象 ，所以 obj.a 确实应该输出1。

注意⚠️，我们前文一直都强调箭头函数没有 this，所以呢，我们不可以用 call() 、 apply() 、 bind() ，这些方法去改变this的指向。

2.不可以被当作构造函数

不能被当作构造函数来使用，通过new命令来作为构造函数会报错，这里没有构建原型的说法，不存在prototype这个属性，也不能通过super访问原型的属性，而且new target也是不能用的。

3.不可以使用arguments对象，该对象在函数体内不存在，如果要用就用rest参数替代。

普通函数：

function f1(arr) {console.log(arguments);
}
f1([1,2,3]); // [1,2,3]

箭头函数：

let f2 = (arr) => {console.log(arguments);
}
f2([1,3,9]); //Uncaught ReferenceError: arguments is not defined

let f3 = (...arr) => {console.log(arr);
}
f3([1,4,5]); // [1,4,5]