Javascript 简明教程

JavaScript - Native Prototypes

Native Prototypes

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

The native prototypes in JavaScript are property of Object.prototype object. The prototypes are the mechanism by which the objects inherit features from one another.

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

In JavaScript, each object contains the prototype property. The prototype of each object contains the methods and properties related to the object. So, it is also called the native prototype.

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

However, you can update or add new methods and properties to the native prototype object, but you can’t delete any already existing.

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

The JavaScript object and object constructor are the main prerequisites to understand JavaScript native prototypes.

Syntax

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

You can follow the syntax below to access the native prototype of the object.

Object.prototype;

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

In the above syntax, the object can be any JavaScript object.

Example: Accessing the array’s prototype

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

Whenever you execute the below code in the browser, it will print the prototype of the array in the browser console. In the same way, you can check the prototype of the other objects.

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

In the console, you can see that the prototype object contains the methods which you can use with array methods.

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

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

On running the above program, you will see the result in web console similar to the following screenshot −

array prototype

Updating the Native Prototype

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

You can update the existing method or property of the native prototype object or add a new method or property to the native prototype object.

Syntax

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

You can follow the syntax below to update or add new properties or methods to the prototype object.

objName.prototype.name = value

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

In the above syntax, objName is an object whose prototype you need to update.

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

The 'name' is a method or property name. You can assign new values or function expressions to the 'name’.

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

String 对象的原型包含 toLowerCase() 方法。在这里，我们更新 toLowerCase() 方法。

The prototype of the String object contains the toLowerCase() method. Here, we update the toLowerCase() method.

更新的 toLowerCase() 方法以大写形式返回字符串。在输出中，你可以观察到字符串是大写的。

The updated toLowerCase() method returns the string in the uppercase. In the output, you can observe the string, which is in uppercase.

通过这种方式，你可以更新对象内置方法的功能。

In this way, you can update the functionality of the built-in methods of the object.

<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() 方法。

You can also add a new method to the Object prototype. Here, we added the firstCase() method in the object prototype.

firstCase() 方法在将字符串的第一个字符转换为大写后返回一个字符串。

The firstCase() method returns a string after converting the string’s first character to the uppercase.

<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

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

Whenever you define an object using the constructor function, you can’t add a method or property to the constructor function using its instance. So, you need to add the method to the constructor function prototype. So it can be accessible through all instances of the object.

Example

在下面的示例中，Person() 是用于初始化对象属性的构造函数。

In the example below, the Person() is a constructor function that initializes object properties.

此后，我们将 display() 方法添加到 person() 函数的原型中。

After that, we added the display() method to the prototype of the person() function.

接下来，我们创建了 Person() 函数的两个实例，并使用 display() 方法来调用它们。因此，在对象构造函数原型中添加的方法和属性可以通过构造函数的所有实例访问。

Next, we created two instances of the Person() function and used the display() method with them. So, methods and properties added in the prototype of the object constructor can be accessed through all instances of the constructor function.

<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

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

Simply, you can say that the prototype stores the default values of the properties. The code overrides the prototype property value if the object constructor and its prototype contain the same properties.

Example

在下面的代码中，Person() 函数包含 name 属性。我们在函数的原型中添加了 name 和 age 属性。

In the below code, the Person() function contains the name property. We have added the name and age property in the function’s prototype.

我们使用 Person() 构造函数创建了 p1 对象。p1 对象的 name 属性值为 'Nayan'，因为构造函数中已经存在 name。age 属性值为 20，与原型中 age 属性值相同。

We have created the p1 object using the Person() constructor function. The value of the name property of the p1 object is 'Nayan' as the name already exists in the constructor. The value of the age property is 20, which is the same as the age property value in the prototype.

<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