数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究JavaScript 的 .prototype 是如何工作的？
在本例中，我们将学习 **原型** 在 JavaScript 中是如何工作的。在开发函数时，JavaScript 开发人员很少不使用对象，而对象可以使开发人员的工作变得轻松许多。
**原型** 也是与 JavaScript 中的对象相关的进阶概念。你们中的许多人可能是第一次听说原型，但不用担心。在本教程中，我们将涵盖原型的所有内容。
原型有什么作用？
**原型** 是程序开始执行时为每个函数类创建的对象。但是，是否使用对象原型使应用程序代码更易读，取决于程序员。
通过访问任何函数的原型，我们可以更改其属性。使用下面的示例，让我们了解为什么我们需要 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> 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>现在，用户可以理解，如果我们有一个对象的函数构造函数，创建数千个对象是多么容易。我们可以将对象的键值作为函数构造函数的参数传递，并创建一个新对象。如果程序员通常创建 1000 个对象，则需要花费大量时间。
创建当前对象的副本
此外，程序员可以将另一个对象传递到 **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 中的原型是如何工作的？
现在，我们进入重点了；为什么我们需要原型？想象一下，您有多个具有不同对象的共享方法的情况。现在，假设您有 50 多个方法。您是否会在每个不同的对象中逐个添加所有方法？当然不是！因此，我们创建并将所有方法添加到函数原型。之后，我们可以将函数原型的所有方法添加到对象。
用户可以按照以下语法将原型与函数对象一起使用。
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示例
对象原型的运行过程
在下面的示例中，我们演示了如何在函数的原型对象中添加方法和变量。我们使用相同的方法创建了两个不同的对象，这意味着我们在两个对象之间共享了单个原型的所有方法。此外，我们还使用对象调用了该方法。
<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>结论
我们希望现在用户已经消除了对原型的所有疑问。原型是每个函数的对象，用户可以在原型对象中存储方法和变量。稍后，用户可以在另一个对象中使用它。这意味着它使我们能够轻松地在两个或多个对象之间共享方法。程序员无需逐个将所有方法添加到对象，而是可以创建一个具有旧对象原型的新的对象，仅此而已。
282 次浏览
