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