JavaScript中工厂函数和构造函数示例的详细说明

前言

当谈论JavaScript语言与其他编程语言相比时，你可能会听到一些令人困惑的东西，其中之一就是工厂函数和构造函数。

工厂功能

工厂函数意味着这些内置函数是类对象，当您调用它们时，您实际上创建了一个类实例。这意味着当我调用这个函数时，我实际上首先用类创建一个对象，然后返回这个对象。由于Javascript本身不是严格的面向对象语言(不包括类)，实际上Javascript并没有严格的“工厂函数”，但是在Javascript中，我们可以用函数来模拟类。让我们看看下面的例子：

函数人(名字、姓氏、年龄){ const person={ }；person . first name=first name；person . last name=last name；人.年龄=年龄；返回人；}上面的代码创建了一个新对象，将传递的参数作为属性附加到该对象，并返回新对象。这是一个简单的JavaScript工厂函数。

事实上，工厂的功能也很好理解：

这是一种功能。它用于创建对象。它就像一个工厂，“生产”出来的功能都是“标准件”(具有相同属性)的构造器

与其他主流编程语言不同，JavaScript的构造函数并不作为类的特定方法而存在；当任何普通函数被用来创建一类对象时，它被称为构造函数。要成为真正的构造函数，函数需要满足以下条件：

通常通过添加属性和方法，在函数中设置新对象的属性。构造函数可以包含return语句(不推荐)，但返回值必须是this或其他非对象类型的值。函数Person(名字、姓氏、年龄){ this . first name=first name；this . last name=last name；this.age=年龄；}使用new关键字创建对象

如上所述，我们可以使用new to class或object，因此您可能会遇到以下问题：

我们可以在工厂函数中使用新的关键字吗？如果我们在工厂和构造函数中使用new关键字会发生什么？如果我们在使用构造函数创建对象实例时不使用new关键字，会发生什么？好吧，在试图找出上述问题的答案之前，让我们做一个小练习，了解一下里面发生了什么。

使用new关键字使用工厂和构造函数创建两个对象，然后在控制台上打印这两个对象。

使用工厂功能

函数人(名字、姓氏、年龄){ const person={ } person . first name=first name；person . last name=last name；人.年龄=年龄；返回人；}const mike=新人(' mike '，' grand '，23)；

正如我们上面看到的，这里__proto__指向它的原型对象，所以让我们试着找出原型对象是什么。为了找出上面mike对象所指向的原型对象，我们来做一个简单的===等式检查。

有趣的是，它指向对象。原型好的，让我们用构造函数做同样的实验。

理解JavaScript的原型

在理解原型之前，您需要记住以下知识：

所有引用类型(数组、对象和函数)都有对象特性，也就是说，它们可以自由扩展其属性(null除外)。所有引用类型(数组、对象和函数)都有一个__proto__属性。属性值是普通对象的所有函数，并且具有原型属性。

//点1:自由扩展属性var obj={ }；obj.a=100var arr=[]；arr.a=100函数fn(){ } fn . a=100；//第2点：_ _ proto _ _ console.log (obj。_ _ proto _ _)；console.log(arr。_ _ proto _ _)；console.log(fn。_ _ proto _ _)；//第3点：函数有prototype console . log(fn . prototype)//第4点：引用类型的__proto__属性值指向其构造函数的prototype属性值console.log (obj。_ _ proto _ _==object.prototype)使用构造函数

注：在JavaScript中，这些构造函数也称为构造函数，因为它们用于创建对象。

函数Person(名字、姓氏、年龄){ this . first name=first name；this . last name=last name；this.age=年龄；}const mike=new Person('mike '，' grand '，23)；

当我们展开第一层的__proto__时，里面还有另一个__proto__的时候，我们再一次展开。

现在让我们试着找出原型对象是否像上面这样。

它们是不同的。当我们使用工厂函数创建一个对象时，它的__proto__指向Object.prototype，当我们从构造函数创建一个对象时，它指向它的构造函数prototype对象。这里发生了什么？

他背后有什么消息

当我们在创建对象时将new关键字与constructor一起使用时，new后面没有什么可做的。

新运算符使用构造函数创建用户定义对象类型的实例或内置对象的实例。新关键字执行以下操作：

创建一个空的简单JavaScript对象(即{})，将此对象(即设置此对象的构造函数)链接到另一个对象，并将步骤1中新创建的对象作为其上下文。如果这个函数没有返回一个对象，那么返回这个对象的注释行就是伪代码，表示我们在新的关键字和JS后面做什么。

函数Person(firstName，lastName，age){//this={ }；//这个。__原型_ _ _=人.原型；this . first name=first name；this . last name=last name；this.age=年龄；//返回这个；}此外，让我们看看如果将上面的隐式代码添加到工厂函数中会发生什么。

函数人(名字、姓氏、年龄){//this={ }；//这个。__原型_ _ _=人.原型；const person={ }；person . first name=first name；person . last name=last name；人.年龄=年龄；返回人；//返回这个；}即使在用new关键字调用时向factory函数添加了隐式代码，也不会对结果产生任何影响。这是因为我们没有在函数中使用这个关键字，并且我们显式地返回了一个除此之外的自定义对象，所以没有必要使用隐式代码。工厂函数是否使用new关键字对输出没有影响。

如果我忘记了新的关键词怎么办

JavaScript中有很多概念，有时候很难掌握。新接线员就是其中之一。如果没有正确理解，运行JavaScript应用程序时会有恼人的后果。在像Java这样的语言中，如何使用新的关键字是受到严格限制的。但是在javascript中，就没有那么严格了。如果你没有正确理解它们，可能会导致很多问题。

在JavaScript中：

您可以在任何函数中使用新运算符。您可以使用或不使用new关键字作为构造函数调用该函数。让我们看看上面的例子，有没有新的关键案例

函数Person(名字、姓氏、年龄){ this . first name=first name；this . last name=last name；this.age=年龄；}const mike=new Person('mike '，' grand '，23)；const bob=Person('bob '，' grand '，23)；然后，如果您查看创建的对象实例，您希望看到什么？

发生了什么事？使用新的操作符输出我们期望的正确对象，但是没有新的操作符，结果怎么可能是未定义的呢？

如果你对JavaScript作用域和这个关键字有所了解，你就能猜到这里发生了什么。让我们看看。

似乎我们传递给函数的所有没有new关键字的属性都被设置为window对象。这是因为到那时，函数中的这个变量引用了全局或窗口对象，基本上我们在这里做的就是污染全局对象。

这是你可以对你的JavaScript程序做的一件非常烦人的事情。因此，使用新的运算符，JavaScript引擎将这个变量设置为引用新创建的对象实例，这就是为什么我们可以看到传递给构造函数的所有属性都设置为mike。

但是，如果在没有新运算符的情况下调用构造函数，则JavaScript引擎会将其解释为正常的函数调用，如果没有显式的return语句，则返回undefined。这就是为什么理解新操作符在JavaScript中的工作方式至关重要。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。