为什么在JavaScript中箭头函数不能被用来创建对象

箭头函数不能被用作构造器

在我们继续之前,你应该知道JavaScript有三种类型的函数,它们分别是:
1. 函数声明(Function declaration)
2. 函数表达式 (Function expression)
3. 箭头函数 (Arrow Function)

译者:

//Function declaration
//它可以在任何地方定义,并且会被提升(hoisted)到当前作用域的顶部。
//这意味着您可以在函数声明之前调用该函数。
function myFunction() {
  // 函数体
}
//Function expression
//函数表达式不会被提升,因此必须在定义后才能调用。
const myFunction = function() {
  //函数体
}

JavaScript 允许你创建一个对象,从函数表达式或者函数声明。

function  Product(title, price){
  this.title  =  title;
  this.price  =  price;
}

let  p1  =  new  Product("Pen",100);

console.log(p1);

以上,p1对象使用Product函数作为构造器。

console.log(p1.constructor); // [Function: Product]

现在,让我们将 Product 函数语句转换成一个箭头函数,如以下代码所示:

let  Product  = (title, price) => {
  this.title  =  title;
  this.price  =  price;
}

let  p1  =  new  Product("Pen",100);

JavaScript 发出了抱怨,当你使用 Product 函数创建对象时。
为什么在JavaScript中箭头函数不能被用来创建对象_第1张图片
为了理解它的原因,让我们创建两个函数,一个作为函数声明,另一个作为箭头函数,并且打印这两个函数的 prototype 属性。

function  Product(title, price){
  this.title  =  title;
  this.price  =  price;
}

console.log(Product.prototype) // {}

let  Productf  = (title, price) => {
  this.title  =  title;
  this.price  =  price; }

console.log(Productf.prototype); // undefined

如你所见,Product 函数(函数声明)的 prototype 属性值是一个空对象。相反,Productf 函数(箭头函数)的 prototype 属性值是 undefined。
为什么在JavaScript中箭头函数不能被用来创建对象_第2张图片

箭头函数 prototype 属性是 undefined

接下来,让我们理解为什么一个函数的 prototype 属性,对于创建对象是至关重要的。因为,无论什么时候你使用一个函数创建对象,这个对象的总是被链接到这个函数的 prototype 对象。

function  Product(title, price){
  this.title  =  title;
  this.price  =  price;
}

let  p1  =  new  Product("Pen",100) ;
let  p2  =  new  Product("Pencil", 300);
console.log(p1.constructor.prototype  ==  p2.constructor.prototype); // true

在这里,p1 和 p2 对象从 Product 函数创建出来,并且被链接到 Product 的prototype 对象。
为什么在JavaScript中箭头函数不能被用来创建对象_第3张图片

从一个函数创建出来的所有对象,都被链接到这个函数的 prototype 对象。

正如你所见,你个箭头函数没有 prototype 对象;因此它不能被用来创建一个对象,或者,换言之,不能被用作一个构造器。

let  Productf  = (title, price) => {
  this.title  =  title;
  this.price  =  price;
}

console.log(Productf.prototype); // undefined


箭头函数:
  • 没有 prototype 属性
  • 也没有内部的 [[Constructor]] 属性

由于以上两个原因,在JavaScript中,箭头函数不能创建对象。希望这篇博客能对你有所帮助。敬谢阅读。

翻译自:
Why Arrow Function Cannot be Used to Create an Object in JavaScript
by Dhananjay Kumar
Telerik.com
希望能对你有所帮助~

你可能感兴趣的:(javascript,开发语言,ecmascript,箭头函数不能创建对象,prototype)