JavaScript .prototype 是如何工作的？

在 JavaScript 中，当向对象添加行为时，如果使用构造函数创建多个对象（使用“new”关键字调用构造函数），那么 new 关键字就是将函数调用转换为构造函数调用的关键字，并且每次都是全新的创建了空对象，这会产生不一致，因为为每个对象创建了单独的函数副本。因此，如果创建 1,000 个对象，则会创建 1,000 个函数副本，这会造成内存浪费。

因此，原型出现在这张照片中。

原型：它是一种在多个对象之间共享行为和数据的简单方法。原型是 Object 构造函数的属性。

句法：

Object.prototype

在 JavaScript 中创建的所有对象都是“对象”的实例。因此，它们都共享“Object.prototype”方法。我们也可以覆盖这些属性。

为什么需要原型？

有时需要为给定类型的所有现有对象添加新属性（或方法）。这只能通过将新方法添加到原型函数来实现。

让我们了解原型是如何工作的？

因此，对于每个函数，都会创建两个对象，一个用于该功能，另一个用于其原型。每个函数都有它的属性原型，这些属性使其成为函数的原型，因此通过在构造函数模式下调用此函数来创建对象，无论创建的对象都是原型模板的原型，这意味着对象遵循原型模板的任何属性或原型中提到的行为，对象将能够访问这些属性。使用下图可以更清楚。

原型如何工作？

Function_name.prototype：给出函数的原型。如果想从原型返回到函数，则 Prototype 中提到了一些属性，即 Constructor 在这种情况下Function_name.prototype.constructor带回函数。

示例 1：

Javascript

// Constructor
function vehicle(numWheels, price) {
    this.numWheels = numWheels;
    this.price = price;
    this.getPrice = () => {
        return this.price;
    }
}
 
var vehicle1 = new vehicle(10, 378979);
var vehicle2 = new vehicle(36, 899768);
 
// function.prototype works
vehicle.prototype
 
// function.prototype.constructor works
vehicle.prototype.constructor

输出：

Function_name.prototype

这里 vehicle.prototype 给出了车辆函数的原型。

函数.prototype.constructor

在这里，vehicle.prototype.constructor 给出了与原型相同的函数，就像在这种情况下的车辆函数一样，所以它给出了该函数作为输出。

对象从原型继承属性：

因此，所有创建的对象都将具有对原型的内部引用，这意味着对于每个函数都有一个副本，并且所有对象共享该副本不需要创建单独的副本意味着向函数添加行为而不是从原型访问行为（例如getprice()函数是行为），因此从原型调用它不会存储在函数中。

示例 2：

Javascript

//constructor
function vehicle(numWheels, price) {
    this.numWheels = numWheels;
    this.price = price;
}
 
// Adding behaviour to constructor vehicle
vehicle.prototype.getPrice = function () {
    return this.price;
}
 
var vehicle1 = new vehicle(5, 100000);
var vehicle2 = new vehicle(10, 390000);
 
// Function or constructor
vehicle
 
// function.prototype works
vehicle.prototype
 
// function call using object
vehicle1.getPrice();

输出：

函数

这里的构造函数中不包含 getprice()函数，因为它不能在运行的车辆内占用空间。

函数.prototype

但是车辆函数原型包含 getprice()函数作为其属性。

目的

vehicle1 对象在其原型中也有 getprice()函数。因此它可以轻松访问 getPrice()函数。

对象.原型

这里像 getprice() 并没有占用车辆函数的空间，而是能够使用原型访问 getprice() 的对象。虽然 getprice() 在函数的原型中。

.prototype 更多用途：它也用于在运行时添加属性。这样每个对象都有一个共同的属性。就像有 1000 辆汽车并且都具有相同的型号。这个查找首先在对象中找到它，然后它去原型搜索这个属性。