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>
结论
我们希望现在用户已经消除了对原型的所有疑虑。原型是每个函数的对象，用户可以将方法和变量存储在原型对象中。稍后，用户可以在另一个对象中使用它。这意味着在两个或多个对象之间共享方法使我们的工作变得容易。程序员不需要一个接一个地将所有方法添加到对象中，但他们可以使用旧对象的原型创建一个新对象，仅此而已。
