JavaScript .prototype 如何工作?
在本例中,我们将了解 JavaScript 中的 prototype 如何工作。JavaScript 开发人员在开发函数时很少不使用对象,对象可以为开发人员简化很多工作。
prototype 也是与 JavaScript 中的对象相关的高级概念。你们中的许多人都是第一次听说原型,但不要担心。我们将在本教程中介绍有关原型的所有内容。
原型有什么用?
prototype 是程序开始执行时为每个函数类创建的对象。但是,是否要使用对象原型来使应用程序代码更易读取决于程序员。
通过访问任何函数的原型,我们可以更改属性。使用下面的示例,让我们了解为什么我们需要 JavaScript 中的原型。
例如,我们下面有一个对象。
let demo = { name: "tutorialsPoint"; }
现在,我们想要创建这个对象的 1000 多个实例,这些实例具有不同的值。勤奋的程序员将总共创建 1000 个具有不同值的对象。但聪明的程序员会创建一个像对象一样工作的函数。
我们可以创建一个函数来用作对象。如果我们在函数中添加‘new’关键字位于带参数的函数调用之前,它将成为构造函数,初始化对象的所有值,并创建一个新实例。
语法
以下是将函数用作对象 − 的语法
function objectfunc(name, info) { this.name = name; this.info = info; } var object1 = new objectfunc(arguments );
示例
使用函数构造函数创建对象
在下面的示例中,我们创建了构造函数来初始化对象。此外,我们创建了具有不同值的两个对象。
<html> <head> <title> object.prototype 的工作流程。 </title> </head> <body> <h2> javaScript 中 object.prototype 的工作流程。 </h2> <h4> 来自不同对象的值。 </h4> <div id="objectValue"> </div> <script> let objectValue = document.getElementById("objectValue"); // 功能对象 function objectfunc(name, info) { this.name = name; this.info = info; } // 使用不同值创建的对象 var object1 = new objectfunc("tutorialsPoint", "for computer science"); var object2 = new objectfunc("cow", "an animal"); objectValue.innerHTML = "object1 中的名称为 " + object1.name + "。object1 中的信息为 " + object1.info + "。"; </script> </body> </html>
现在,用户可以理解如果我们为对象提供了一个函数式构造函数,那么创建数千个对象是多么容易。我们可以将对象的键值作为函数式构造函数的参数传递,并创建一个新对象。如果程序员通常创建 1000 个对象,则需要花费大量时间。
创建当前对象的副本
此外,程序员还可以在 Object.create() 方法中传递其他对象来复制当前对象。
用户可以按照以下语法创建当前对象的副本。
let childObject = { name: "tutorialsPoint"; info: "A computer science portal"; } // 从 childObject 创建 parentObject let parentObject = Object.create( childObject ); // 向子对象添加其他属性 parentObject.website = "tutorialsPoint.com"
JavaScript 中的原型如何工作?
现在,我们回到正题;为什么我们需要原型?想象一下您拥有多个与不同对象共享的方法的情况。现在,假设您有 50 多个方法。您是否在每个不同的对象中逐一添加所有方法?不是的!因此,我们创建并将所有方法添加到函数原型。之后,我们可以将函数原型的所有方法添加到对象。
用户可以按照以下语法将原型与功能对象一起使用。
function objectfunc(name, info) { let current = Object.create(objectfunc.prototype); // 使用 objectfunc() 原型的所有方法和变量创建对象 current.name = name; current.info = info; return current; } // 将方法和变量添加到原型 objectfunc.prototype.getInfo = function getInfo() { return this.info; } objectfunc.prototype.new_var = 10; // 添加任何新变量示例
示例
对象原型的工作过程
在下面的例子中,我们演示了在函数的原型对象中添加方法和变量。我们使用相同的方法创建了两个不同的对象,这意味着我们在两个对象之间共享了单个原型的所有方法。此外,我们还使用对象调用了该方法。
<html> <head> <title> 对象原型的工作过程。</title> </head> <body> <h2> JavaScript 中对象原型的工作过程。</h2> <h4> 来自不同对象的值。</h4> <div id="objectValue"></div> <script> let objectValue = document.getElementById("objectValue"); // 函数对象 function objectfunc(name, info) { let current = Object.create(objectfunc.prototype); current.name = name; current.info = info; return current; } objectfunc.prototype.getInfo = function getInfo() { return this.info; } objectfunc.prototype.getName = function getName() { return this.name; } // 使用不同值创建的对象 var object1 = new objectfunc("tutorialsPoint", "for computer science"); var object2 = new objectfunc("cow", "an animal"); objectValue.innerHTML = "调用 object1 的 getName 方法,输出为 " + object1.getName() + "。调用对象 2 的 getName 方法,输出为 " + object2.getName() + "。<br/>"; // 使用 objectfun() 原型中的方法; // 它共享该方法 let object3 = Object.create(objectfunc.prototype); object3.name = "foo"; objectValue.innerHTML += "The name value for object3 is " + object3.getName(); </script> </body> </html>
结论
我们希望现在用户已经消除了对原型的所有疑虑。原型是每个函数的对象,用户可以将方法和变量存储在原型对象中。稍后,用户可以在另一个对象中使用它。这意味着在两个或多个对象之间共享方法使我们的工作变得容易。程序员不需要一个接一个地将所有方法添加到对象中,但他们可以使用旧对象的原型创建一个新对象,仅此而已。