JavaScript Prototype 是什么，怎么用？

约 5 分钟读完 146 阅
文章导读
Previous Quiz Next 在 JavaScript 中，prototype 就像一个模板。这些模板帮助对象共享属性和方法。我们不必到处重复代码，只需定义一次方法或属性，就可以轻松与其他对象实例共享。
📋 目录
  1. Ⅰ JavaScript 中的 Prototype 类型
  2. Ⅱ Object Prototype
  3. Ⅲ Constructor Function Prototype
  4. Ⅳ Function Prototype
  5. Ⅴ Built-in Prototype
A A

JavaScript - Prototype

Previous
Quiz
Next

在 JavaScript 中，prototype 就像一个模板。这些模板帮助对象共享属性和方法。我们不必到处重复代码，只需定义一次方法或属性，就可以轻松与其他对象实例共享。

JavaScript 中的 Prototype 类型

在 JavaScript 中，有多种类型的 prototype 用于在对象之间共享属性和方法。JavaScript 中的主要 prototype 类型有：

  • Object Prototype
  • Constructor Function Prototype
  • Function Prototype
  • Built-in Prototype

Object Prototype

object prototype 是 JavaScript 中所有对象的基础模板。这个模板在我们创建的每个对象中默认可用。它就像一张内置的工具表，每个对象都可以使用。

代码片段

以下是使用 object prototype 的示例代码片段。

let obj = {
   name: "John",
   age: 21
};
console.log(obj);
console.log(obj.toString());  // [object Object]

输出

以下是上述代码片段的输出 −

{ name: 'Ansh', age: 24 }

在上述示例中，我们创建了一个名为 obj 的对象，具有 name 和 age 属性。我们还使用了默认存在于 object prototype 中的 toString() 方法。

Constructor Function Prototype

constructor function 是一种用于创建新对象的功能。当我们需要创建多个具有相同属性和行为的对象的时，可以使用 constructor function。constructor function prototype 用于在通过 constructor function 创建的对象之间共享属性和方法。

代码片段

以下是使用 constructor function prototype 的示例代码片段。

function Person(name, age) {
   this.name = name;
   this.age = age;
}
Person.prototype.greet = function() {
   return "Hello, " + this.name;
}
let person1 = new Person("John", 21);
let person2 = new Person("Ansh", 24);

输出

以下是上述代码片段的输出。

Hello, John
Hello, Ansh

在上述示例中，我们创建了一个名为 Person 的 constructor function。我们还在 Person 的 prototype 中添加了一个 greet 方法。我们使用 Person constructor function 创建了两个对象 person1 和 person2，然后在两个对象上调用了 greet 方法。

Function Prototype

function prototype 是 JavaScript 中所有函数可用的模板。这个模板用于在函数之间共享属性和方法。

代码片段

以下是使用 function prototype 的示例代码片段。

function greet() {
   return "Hello, World!";
}
console.log(greet.toString());  // function greet() { return "Hello, World!"; }

输出

以下是上述代码片段的输出。

function greet() { return "Hello, World!"; }

在上述示例中，我们创建了一个名为 greet 的函数。我们还使用了默认存在于 function prototype 中的 toString() 方法。

Built-in Prototype

JavaScript 中有许多内置对象，如 Array、String、Number 等。这些内置对象都有自己的 prototype。我们可以使用这些 prototype 在这些内置对象的实例之间共享属性和方法。

代码片段

以下是使用 built-in prototype 的示例代码片段。

let arr = [1, 2, 3, 4, 5];

console.log(arr);
console.log(arr.toString());  // 1,2,3,4,5
console.log(arr.join("-"));  // 1-2-3-4-5
console.log(arr.reverse());  // [ 5, 4, 3, 2, 1 ]

输出

[ 1, 2, 3, 4, 5 ]
1,2,3,4,5
1-2-3-4-5
[ 5, 4, 3, 2, 1 ]

在上述示例中，我们创建了一个名为 arr 的数组。我们还使用了默认存在于 array prototype 中的 toString()、join() 和 reverse() 方法。