数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究JavaScript 的 .prototype 如何工作？
在本例中，我们将学习 **prototype** 在 JavaScript 中是如何工作的。在开发函数时，JavaScript 开发人员很少不使用对象，而对象可以使开发人员的工作变得更加轻松。
**prototype** 也是与 JavaScript 中的对象相关的先进概念。你们中的许多人可能是第一次听说原型，但不用担心。在本教程中，我们将涵盖原型的所有内容。
原型有什么作用？
**prototype** 是程序开始执行时为每个函数类创建的对象。但是，是否使用对象原型来使应用程序代码更易读取决于程序员。
通过访问任何函数的原型，我们可以更改属性。使用下面的示例，让我们了解为什么我们需要 JavaScript 中的原型。
例如，我们下面有一个对象。
let demo = {
name: "tutorialsPoint";
}现在，我们想创建 1000 多个具有不同值的此对象实例。勤奋的程序员将创建总共 1000 个具有不同值的 object。但聪明的程序员将创建一个像 object 一样工作的单个函数。
我们可以创建一个用作对象的函数。如果我们在函数调用之前添加“new”关键字并带参数，它将成为构造函数，初始化 object 的所有值并创建一个新实例。
语法
以下是将函数用作对象的语法：
function objectfunc(name, info) {
this.name = name;
this.info = info;
}
var object1 = new objectfunc( arguments );示例
使用函数构造函数创建对象
在下面的示例中，我们创建了构造函数来初始化 object。此外，我们创建了两个具有不同值的 object。
<html>
<head>
<title> Working process of object.prototype. </title>
</head>
<body>
<h2> Working process of object.prototype in javaScript. </h2>
<h4> Values from differnt objects. </h4>
<div id="objectValue"> </div>
<script>
let objectValue = document.getElementById("objectValue");
// functional object
function objectfunc(name, info) {
this.name = name;
this.info = info;
}
// object created with different values
var object1 = new objectfunc("tutorialsPoint", "for computer science");
var object2 = new objectfunc("cow", "an animal");
objectValue.innerHTML = "The name in the object1 is " + object1.name + ". The info in the object1 is " + object1.info + ". ";
</script>
</body>
</html>现在，用户可以理解如果我们有一个 object 的函数构造函数，创建数千个 object 是多么容易。我们可以将 object 的键值作为函数构造函数的参数传递并创建一个新的 object。如果程序员通常创建 1000 个 object，则需要花费大量时间。
创建当前对象的副本
此外，程序员可以将另一个 object 传递到 **Object.create()** 方法中以创建当前对象的副本。
用户可以按照以下语法创建当前对象的副本。
let childObject = {
name: "tutorialsPoint";
info: "A computer science portal";
}
// creating the parentObject from the childObject
let parentObject = Object.create( childObject );
// adding other properties to the child object
parentObject.website = "tutorialsPoint.com"JavaScript 中的原型是如何工作的？
现在，我们到了重点；为什么我们需要原型？想想这样的场景：您有多个与不同 object 共享的方法。现在，假设您有 50 多个方法。您是否需要在每个不同的 object 中逐个添加所有方法？当然不是！因此，我们创建并将所有方法添加到函数原型中。之后，我们可以将函数原型的所有方法添加到 object 中。
用户可以按照以下语法将原型与函数对象一起使用。
function objectfunc(name, info) {
let current = Object.create(objectfunc.prototype); // creates the object with all methods and variables of the objectfunc() prototypes
current.name = name;
current.info = info;
return current;
}
// adding methods and variables to prototype
objectfunc.prototype.getInfo = function getInfo() {
return this.info;
}
objectfunc.prototype.new_var = 10; // adding any new variableExample示例
Object 原型的运作过程
在下面的示例中，我们演示了如何在函数的原型 object 中添加方法和变量。我们使用相同的方法创建了两个不同的 object，这意味着我们在两个 object 之间共享了单个原型的所有方法。此外，我们还使用 object 调用了该方法。
<html>
<head>
<title> Working process of object prototype. </title>
</head>
<body>
<h2> Working process of Object prototype in JavaScript. </h2>
<h4> Values from different objects. </h4>
<div id="objectValue"></div>
<script>
let objectValue = document.getElementById("objectValue");
// functional object
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;
}
// object created with different values
var object1 = new objectfunc("tutorialsPoint", "for computer science");
var object2 = new objectfunc("cow", "an animal");
objectValue.innerHTML = "calling getName method for object1, output is " + object1.getName() + ". calling the getName method for object 2, output is " + object2.getName() + ". <br/>";
// methods using from the prototype of objectfun(); // it shares the method
let object3 = Object.create(objectfunc.prototype);
object3.name = "foo";
objectValue.innerHTML += "The name value for object3 is " + object3.getName();
</script>
</body>
</html>结论
我们希望现在用户已经消除了对原型的所有疑问。原型是每个函数的一个 object，用户可以在原型 object 中存储方法和变量。稍后，用户可以在另一个 object 中使用它。这意味着它使我们在两个或多个 object 之间共享方法变得容易。程序员不需要逐个将所有方法添加到 object 中，而是可以创建一个具有旧 object 原型的新的 object，就是这样。
282 次查看
