理解 JavaScript 原型：继承和方法共享的综合指南

**JavaScript 原型**

在 JavaScript 中，原型是一个作为其他对象蓝图的对象。JavaScript 中的每个对象都有一个原型，原型本身是一个包含对象所有实例共享的属性和方法的对象。这个概念是 JavaScript 继承机制的核心。

1.什么是原型？

每个 JavaScript 对象都有一个名为 `[[Prototype]]` 的内部属性。此属性引用另一个对象，该对象从该对象继承属性和方法。可以使用 `__proto__` 属性（在大多数浏览器中）或 `Object.getPrototypeOf()` 访问对象的原型。

例如，当您创建一个新对象时，它会从其构造函数的原型对象继承属性和方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

2. 原型链

在 JavaScript 中，对象通过原型链链接在一起。当调用对象的属性或方法时，JavaScript 首先检查该属性或方法是否存在于对象本身。如果不存在，JavaScript 将检查对象的原型。如果未找到，JavaScript 将继续检查原型链，直到到达“Object.prototype”，即根原型对象。如果仍未找到属性或方法，则返回“undefined”。

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

function Dog(name) {
    Animal.call(this, name);  // Inherit properties from Animal
}

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

3.向原型添加方法

可以将方法添加到构造函数的原型中，这样该构造函数创建的所有实例都可以访问这些方法。这是一种定义共享方法的更有效的方法，而不是直接将它们添加到每个实例中。

function Car(make, model) {
    this.make = make;
    this.model = model;
}

// Adding a method to the prototype
Car.prototype.displayInfo = function() {
    console.log(this.make + " " + this.model);
};

const car1 = new Car("Toyota", "Corolla");
car1.displayInfo();  // Output: "Toyota Corolla"

4.构造函数与原型的关系

原型对象与构造函数紧密相关。当您使用 `new` 关键字创建对象实例时，JavaScript 会将该实例的 `[[Prototype]]` 设置为构造函数的原型。

function Student(name, grade) {
    this.name = name;
    this.grade = grade;
}

Student.prototype.study = function() {
    console.log(this.name + " is studying.");
};

const student1 = new Student("Alice", "A");
console.log(student1.__proto__ === Student.prototype);  // true

5.原型继承

原型继承允许一个对象从另一个对象继承属性和方法。这是 JavaScript 中的一种面向对象继承形式。通过将一个对象的原型设置为另一个对象的原型，第一个对象可以访问第二个对象的属性和方法。

function Animal() {
    this.legs = 4;
}

Animal.prototype.walk = function() {
    console.log("Walking...");
};

function Dog(name) {
    this.name = name;
}

Dog.prototype = Object.create(Animal.prototype);  // Inherit from Animal
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog2 = new Dog("Rex");
console.log(dog2.legs);  // Output: 4
dog2.walk();  // Output: "Walking..."

6. Object.getPrototypeOf() 和 Object.setPrototypeOf()

JavaScript 提供了 `Object.getPrototypeOf()` 和 `Object.setPrototypeOf()` 方法来检索和修改对象的原型。但是，不建议在运行时更改原型，因为这会影响性能。

const obj = {};
const proto = { greet() { console.log("Hello!"); } };

Object.setPrototypeOf(obj, proto);
obj.greet();  // Output: "Hello!"

7. 原型和性能

虽然原型提供了一种共享方法和属性的有效方式，但在创建后更改对象的原型可能会带来性能缺陷。最佳做法是以运行时不需要修改的方式设置原型。

8. 要点总结

每一个对象都有一个原型，而这个原型可能又有一个原型，形成原型链。

原型是一个共享对象，对象从该原型继承属性和方法。

您可以在构造函数的原型中定义共享方法。

JavaScript 中的继承是通过将一个对象的原型链接到另一个对象的原型来实现的。

Object.getPrototypeOf() 和 Object.setPrototypeOf() 允许您操作对象的原型。

结论

原型是 JavaScript 中一个强大的功能，可以实现高效的继承和方法共享。了解原型的工作原理对于编写更高效、面向对象的 JavaScript 代码至关重要。

**嗨，我是 Abhay Singh Kathayat！**

我是一名全栈开发人员，精通前端和后端技术。我使用多种编程语言和框架来构建高效、可扩展且用户友好的应用程序。

请随时通过我的商务电子邮件联系我：kaashshorts28@gmail.com。

CLIS.CC