剖析 JavaScript 中的 prototype 机制：类实例、函数属性和继承的奥秘

前端

2023-10-01 05:39:30

在 JavaScript 的世界里，原型（prototype）机制是一个至关重要的概念，它为理解对象、类和继承提供了基础。

prototype 的本质

每个 JavaScript 函数都拥有一个 prototype 属性，这是一个指向该函数实例的对象的引用。因此，当创建一个函数时，首先为它创建一个原型对象。

类实例的原型

JavaScript 中没有传统的类，而是使用函数来模拟类。当使用 new 操作符创建类实例时，该实例将从函数的原型对象中继承属性和方法。这创建了一个原型链，使实例能够访问原型对象上的属性和方法。

prototype 属性

函数的 prototype 属性是一个对象，本身也可以拥有属性和方法。这些属性和方法可以被实例访问，就好像它们是实例自身的一部分。例如：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person = new Person('John');
person.greet(); // Hello, my name is John.

继承

JavaScript 中的继承通过原型链实现。当一个函数继承另一个函数时，子函数的原型对象会指向父函数的原型对象。这允许子函数访问父函数原型对象上的属性和方法，从而实现继承。

function Employee(name, salary) {
  Person.call(this, name);
  this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

const employee = new Employee('Jane', 50000);
employee.greet(); // Hello, my name is Jane.
console.log(employee.salary); // 50000