Javascript 简明教程

JavaScript - Native Prototypes

Native Prototypes

native prototypes 在 JavaScript 中是 Object.prototype 对象的属性。原型是对象彼此继承特性的机制。

在 JavaScript 中，每个对象都包含 prototype 属性。每个对象的原型包含与该对象关联的方法和属性。因此，它也称为本机原型。

但是，您可以更新或向本机原型对象添加新的方法和属性，但不能删除任何已存在的方法或属性。

JavaScript 对象和对象构造函数是理解 JavaScript 本机原型的主要前提。

Syntax

您可以按照以下语法来访问对象的本机原型。

Object.prototype;

在上述语法中，对象可以是任何 JavaScript 对象。

Example: Accessing the array’s prototype

每当您在浏览器中执行以下代码时，它都会在浏览器控制台中打印数组的原型。同样，您可以检查其他对象的原型。

在控制台中，您可以看到原型对象包含您可以与数组方法一起使用的方法。

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

运行上述程序后，您将在 Web 控制台中看到类似于以下屏幕截图的结果 -

array prototype

Updating the Native Prototype

您可以更新本机原型对象的现有方法或属性，或向本机原型对象中添加新的方法或属性。

Syntax

你可以根据以下语法更新或添加新属性或方法到原型对象。

objName.prototype.name = value

在以上语法中，objName 是你需要更新其原型的对象。

'name' 是方法或属性名称。你可以为 'name' 分配新值或函数表达式。

Example: Updating the toLowerCase() method of the string object’s prototype

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

Example: Adding a new method to the prototype object

你也可以将新方法添加到 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

Adding a method to the constructor function

每当你使用构造函数定义对象时，你无法通过其实例将方法或属性添加到构造函数中。因此，你需要将方法添加到构造函数原型中。这样它就可以通过对象的各个实例访问。

Example

在下面的示例中，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 Prototype Chaining

简单来说，你可以说原型存储属性的默认值。如果对象构造函数和其原型包含相同的属性，则该代码会覆盖原型属性值。

Example

在下面的代码中，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