深层次解析JS原型和原型链，揭秘JavaScript对象隐藏的奥秘

2023-12-26 18:13:30

一、何为JavaScript原型？

在JavaScript中，每个对象都有一个原型，原型是另一个对象，其中包含了该对象共享的属性和方法。原型可以通过对象构造函数的prototype属性访问，例如：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John Doe', 30);
person1.greet(); // Output: Hello, my name is John Doe and I am 30 years old.

在这个例子中，Person.prototype包含了greet方法，该方法可以被person1对象调用。原型允许对象共享属性和方法，从而简化了JavaScript的编程。

二、认识JavaScript原型链

原型链是一个对象链，它从一个对象开始，并一直延伸到Object.prototype对象。每个对象都有一个prototype属性，指向其原型。如果一个对象没有某个属性或方法，JavaScript就会沿着原型链向上查找，直到找到该属性或方法。

const person1 = new Person('John Doe', 30);
console.log(person1.__proto__); // Output: Person { greet: [Function] }
console.log(person1.__proto__.__proto__); // Output: Object {}
console.log(person1.__proto__.__proto__.__proto__); // Output: null

在这个例子中，person1.__proto__指向Person.prototype，Person.prototype.__proto__指向Object.prototype，Object.prototype.__proto__指向null。这就是JavaScript原型链。

三、巧用原型链实现对象继承

原型链在JavaScript中实现了对象的继承。当一个对象被创建时，它会继承其原型对象的所有属性和方法。例如：

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

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

const employee1 = new Employee('Jane Doe', 25, 50000);
employee1.greet(); // Output: Hello, my name is Jane Doe and I am 25 years old.
console.log(employee1.salary); // Output: 50000