第 58 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

[zeroone001]

[hengliyin]

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

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

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

• 没有自己的 this，无法调用 call，apply。
• 没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 __proto__

new 过程大致是这样的：

function newFunc(father, ...rest) {
  var result = {};
  result.__proto__ = father.prototype;
  var result2 = father.apply(result, rest);
  if (
    (typeof result2 === 'object' || typeof result2 === 'function') &&
    result2 !== null
  ) {
    return result2;
  }
  return result;
}

[zaviertang]

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。箭头函数与普通函数不同之处有：

1. 箭头函数没有 this，它会从自己的作用域链的上一层继承 this（因此无法使用 apply / call / bind 进行绑定 this 值）；
2. 不绑定 arguments，当在箭头函数中调用 aruguments 时同样会向作用域链中查询结果；
3. 不绑定 super 和 new.target；
4. 没有 prototype 属性，即指向 undefined；
5. 无法使用 new 实例化对象，因为普通构造函数通过 new 实例化对象时 this 指向实例对象，而箭头函数没有 this 值，同时 箭头函数也没有 prototype。

[zaviertang]

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

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

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

• 没有自己的 this，无法调用 call，apply。
• 没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

new 过程大致是这样的：

function newFunc(father, ...rest) {
  var result = {};
  result.__proto__ = father.prototype;
  var result2 = father.apply(result, rest);
  if (
    (typeof result2 === 'object' || typeof result2 === 'function') &&
    result2 !== null
  ) {
    return result2;
  }
  return result;
}

"函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。" 也不能说是定义时所在的对象吧，应该是定义时所在的作用域中的 this 值，因为 JS 的静态作用域的机制，this 相当于一个普通变量会向作用域链中查询结果，同时定义时所在对象也并不等于所在对象中的 this 值。

[coolliyong]

区别：
1.箭头函数没有自己的this属性、arguments属性、而普通函数有，箭头函数的this指向当前函数作用域的this。
new：
2.箭头函数没有prototype显示原型，所以不能作为构造函数。

箭头函数带来的好处：

• 没有箭头函数的时候，函数闭包 var that = this 的事没少干，有了箭头函数，就不需要这么写了。
• 极简语法，函数式风格，写一时爽一时，一直写一直爽！

[Caaalabash]

箭头函数不能通过new关键字调用原因

JavaScript函数两个内部方法: [[Call]]和[[Construct]]

• 直接调用时执行[[Call]]方法, 直接执行函数体

• new调用时执行[[Construct]]方法, 创建一个实例对象blabla(如下)

function New(Ctor, ...rest) {
  const o = Object.create(Ctor.prototype)
  const ret = Ctor.apply(o, rest)
  
  return ret || o
}

箭头函数并没有[[Construct]]方法, 所以不能被用作构造函数

另外, 可以参考Proxy中的handler.construct方法

handler.construct() 方法用于拦截new操作符. 为了使new操作符在生成的Proxy对象上生效，用于初始化代理的目标对象自身必须具有[[Construct]]内部方法（即 new target 必须是有效的）。

[Flcwl]

没有自己的this，无法指向自身。构造函数生成对象需要调用函数初始化属性。

[huijingL]

我也来献个丑：

箭头函数是ES6的写法，与function最大的不同是this的指向问题，
箭头函数内部的this 是继承自其上一级

而function 的this是看情况指向的，一般优先级是 new > bind > obj. > window
new 的本质是生成一个新对象，将对象的_proto_指向函数的prototype,再执行call 方法，最后将新对象赋给定义的对象，
而箭头函数既无自己的this，也没有prototype 所以不行。

前端新手，有错误的话请不要客气，直接指出，谢谢。

[superermiao]

箭头函数与普通函数区别：
（1）箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。例子：
var person = {
name: '叮当猫',
sayName:function () {
console.log(this.name)
},
sayHi: function(){
(() => { console.log('hi') ; this.sayName() })()
}
}
person.sayHi()
// hi
// 叮当猫

---

 var person = {
   name: '叮当猫',
   sayName:function () {
	 console.log(this.name)
	},
    sayHi: function(){
	  (function(){ console.log('hi') ;  this.sayName() })()
    }
  }
  person.sayHi()

// hi
//Uncaught TypeError: this.sayName is not a function
at :7:44
at Object.sayHi
at :10:14
并且箭头函数的this是固定的。不是可变的。
（2）不可以当作构造函数，箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
var func= ()=>{this.name = 'ss'}
var personOne = new func()
//VM708:2 Uncaught TypeError: func is not a constructor

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

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

[Vikingama]

剪头函数没有自己的 this，不能用作构造函数

[fireairforce]

箭头函数由于this的指向在它定义的时候已经确定了(它外层代码的this)，并不像其他普通函数在执行的时候确定this的指向，所以在new 的时候不会改变this的指向(在new 的过程中this会变成空对象然后指向对应的地方)

[mofiggHasSugar]

let num1 = [1,2,2,1];
let num2 = [2,2];

let res = [];
let obj = {};
function fn(n1,n2) {
for(let i = 0;i<n1.length;i++){
if(!obj[n1[i]]){
obj[n1[i]] = 1;
}else{
obj[n1[i]]++
}
}
for(let i = 0;i<n2.length;i++){
if(obj[n2[i]]){
res.push(n2[i]);
obj[n2[i]]--;
}
}
return res
}

console.log(fn(num1,num2))

[spongege]

箭头函数的this是上下文的this，它会从自己作用域的上一层继承this
箭头函数自身没有arguments（但是可以向作用域链中查找arguments）， 不能使用yield命令，不能做generator函数
箭头函数不可以使用new，因为箭头函数没有prototype（使用new需要把函数的prototype赋值给新对象的__proto__），没有自己的this，不能调用call和apply