JavaScript - 原生原型

上一頁
下一頁

原生原型

JavaScript 中的原生原型是Object.prototype物件的屬性。原型是物件之間繼承特性的機制。

在 JavaScript 中，每個物件都包含prototype屬性。每個物件的原型包含與該物件相關的方法和屬性。因此，它也稱為原生原型。

但是，您可以更新或向原生原型物件新增新的方法和屬性，但不能刪除任何已存在的屬性。

JavaScript 物件和物件建構函式是理解 JavaScript 原生原型的主要先決條件。

語法

您可以按照以下語法訪問物件的原生原型。

Object.prototype;

在以上語法中，物件可以是任何 JavaScript 物件。

示例：訪問陣列的原型

無論何時在瀏覽器中執行以下程式碼，它都會在瀏覽器控制檯中列印陣列的原型。同樣，您可以檢查其他物件的原型。

在控制檯中，您可以看到原型物件包含可以使用陣列方法的方法。

<html>
<body>
	<script>
		console.log(Array.prototype);
	</script>
	<p>Please open the web console before executing the above program.</p>
</body>
</html>

輸出

執行以上程式後，您將在 Web 控制檯中看到類似於以下螢幕截圖的結果 -

JavaScript Array Prototype

更新原生原型

您可以更新原生原型物件的現有方法或屬性，或向原生原型物件新增新的方法或屬性。

語法

您可以按照以下語法更新或向原型物件新增新的屬性或方法。

objName.prototype.name = value

在以上語法中，objName 是您需要更新其原型的物件。

“name”是方法或屬性名稱。您可以為“name”分配新值或函式表示式。

示例：更新字串物件原型的 toLowerCase() 方法

String 物件的原型包含 toLowerCase() 方法。在這裡，我們更新了 toLowerCase() 方法。

更新後的 toLowerCase() 方法以大寫形式返回字串。在輸出中，您可以觀察到字串，它是大寫的。

這樣，您可以更新物件內建方法的功能。

<html>
<body>
	<p id = "output">After updating the string.toLowerCase() method: </p>
	<script>
		String.prototype.toLowerCase = function () {
			return this.toUpperCase();
		}
		let str = "Hello World";
		document.getElementById("output").innerHTML += str.toLowerCase();
	</script>
</body>
</html>

輸出

After updating the string.toLowerCase() method: HELLO WORLD
您不應該更新原生原型物件的方法和屬性。但是，您可以新增新的，如下面的示例所示。

示例：向原型物件新增新方法

您還可以向 Object 原型新增新方法。在這裡，我們在物件原型中添加了 firstCase() 方法。

firstCase() 方法在將字串的第一個字元轉換為大寫後返回一個字串。

<html>
<body>
   <p id = "output">After executing the string.firstCase() method: </p>
   <script>
		String.prototype.firstCase = function () {
			// First character in uppercase. Other characters in lowercase.
			return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
		}
		let str = "hello world";
		document.getElementById("output").innerHTML += str.firstCase();
	</script>
</body>
</html>

輸出

After executing the string.firstCase() method: Hello world

向建構函式新增方法

無論何時使用建構函式定義物件，您都無法使用其例項向建構函式新增方法或屬性。因此，您需要將方法新增到建構函式原型。這樣，它就可以透過所有物件的例項訪問。

示例

在下面的示例中，Person() 是一個初始化物件屬性的建構函式。

之後，我們將 display() 方法新增到 person() 函式的原型。

接下來，我們建立了 Person() 函式的兩個例項，並使用它們使用了 display() 方法。因此，在物件建構函式原型中新增的方法和屬性可以透過建構函式的所有例項訪問。

<html>
<body>
   <p id = "demo"> </p>
	<script>
		const output = document.getElementById("demo");

		function Person(id, name) {
			this.id = id;
			this.name = name;
		}
		Person.prototype.display = function () {
			output.innerHTML += this.id + ", " + this.name + "<br>";
		}
		const p1 = new Person(1, "James");
		const p2 = new Person(2, "Nayan");
		p1.display();
		p2.display();
	</script>
</body>
</html>

輸出

1, James
2, Nayan
物件的全部例項都從其父級的原型繼承屬性和方法。

JavaScript 原型鏈

簡單來說，您可以說原型儲存屬性的預設值。如果物件建構函式及其原型包含相同的屬性，則程式碼會覆蓋原型屬性值。

示例

在以下程式碼中，Person() 函式包含 name 屬性。我們在函式的原型中添加了 name 和 age 屬性。

我們使用 Person() 建構函式建立了 p1 物件。p1 物件的 name 屬性的值為“Nayan”，因為 name 已經在建構函式中存在。age 屬性的值為 20，與原型中 age 屬性的值相同。

<html>
<body>
   <p id = "output"> </p>
	<script>
		function Person(id, name) {
			this.id = id;
			this.name = name;
		}

		Person.prototype.name = "John";
		Person.prototype.age = 20;

		const p1 = new Person(1, "Adam");
		document.getElementById("output").innerHTML = 
      "Id: " + p1.id + ", Name: " + p1.name + ", Age: " + p1.age;
  </script>
</body>
</html>

輸出

Id: 1, Name: Adam, Age: 20
列印頁面

上一頁
下一頁
廣告