JavaScript - 原型

原型就像 JavaScript 中的模板。这些模板帮助对象共享属性和方法。我们无需到处复制代码，只需定义一次方法或属性，即可轻松地与对象的其他实例共享。

JavaScript 中的原型类型

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

• 对象原型
• 构造函数原型
• 函数原型
• 内置原型

对象原型

对象原型是 JavaScript 中所有对象的基础模板。我们默认创建的每个对象都包含此模板。它就像一个内置的工具表，每个对象都可以使用。

代码片段

以下是使用对象原型的示例代码片段。

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

输出

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

{ name: 'Ansh', age: 24 }

在上面的例子中，我们创建了一个名为 obj 的对象，其属性为 name 和 age。我们还使用了对象原型中默认提供的 toString() 方法。

构造函数原型

构造函数是一种用于创建新对象的函数。当我们需要创建多个具有相同属性和行为的对象时，可以使用构造函数。构造函数原型用于在使用构造函数创建的对象之间共享属性和方法。

代码片段

以下是使用构造函数原型的示例代码片段。

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 的构造函数。我们还在 Person 的原型中添加了方法 greet。我们使用 Person 构造函数创建了两个对象 person1 和 person2，然后在这两个对象上调用了 greet 方法。

函数原型

函数原型是一个 JavaScript 中所有函数都可用的模板。此模板用于在函数之间共享属性和方法。

代码片段

以下是使用函数原型的示例代码片段。

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

输出

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

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

在上面的例子中，我们创建了一个名为 greet 的函数。我们还使用了函数原型中默认可用的 toString() 方法。

内置原型

JavaScript 中有许多内置对象，例如数组、字符串、数字等。这些内置对象都有自己的原型。我们可以使用这些原型在这些内置对象的对象之间共享属性和方法。

代码片段

以下是使用内置原型的示例代码片段。

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 的数组。我们还使用了数组原型中默认可用的 toString()、join() 和 reverse() 方法。