在我们继续之前,你应该知道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 函数创建对象时。
为了理解它的原因,让我们创建两个函数,一个作为函数声明,另一个作为箭头函数,并且打印这两个函数的 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。
接下来,让我们理解为什么一个函数的 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 对象。
正如你所见,你个箭头函数没有 prototype 对象;因此它不能被用来创建一个对象,或者,换言之,不能被用作一个构造器。
let Productf = (title, price) => {
this.title = title;
this.price = price;
}
console.log(Productf.prototype); // undefined
由于以上两个原因,在JavaScript中,箭头函数不能创建对象。希望这篇博客能对你有所帮助。敬谢阅读。
翻译自:
Why Arrow Function Cannot be Used to Create an Object in JavaScript
by Dhananjay Kumar
Telerik.com
希望能对你有所帮助~