資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
