原型原型链：掌握JavaScript继承的奥秘

2024-02-08 13:08:50

在JavaScript的世界中，原型原型链的概念是至关重要的。它就像一棵家族树，每个对象都是一个成员，它们之间通过原型链连接起来，形成一个层级结构。了解原型原型链，可以帮助我们更深入地理解JavaScript中的继承机制。

1. 原型：对象的灵魂

原型是JavaScript对象的一个固有属性，它是一个普通对象，包含着对象的属性和方法。每个对象都可以通过原型属性访问其原型对象，从而继承原型对象中的属性和方法。

例如：

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

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

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

在这个例子中，Person.prototype.greet是一个原型方法，person1可以通过原型链继承这个方法，并将其作为自己的方法使用。

2. 原型链：家族树

原型链是一条连接对象和原型对象的链，它允许对象访问原型对象中的属性和方法。原型链从对象本身开始，然后依次向上追溯到其原型对象，再追溯到原型对象的原型对象，依此类推，直到达到原型链的顶端——Object.prototype。

Object.prototype
    |
    Person.prototype
        |
        person1

在这个例子中，person1的原型对象是Person.prototype，Person.prototype的原型对象是Object.prototype。因此，person1可以访问Object.prototype中的属性和方法，也可以访问Person.prototype中的属性和方法。

3. 继承：家族传承

在JavaScript中，继承是通过原型链来实现的。当一个对象被创建时，它会自动继承其原型对象中的属性和方法。这种继承是动态的，这意味着子对象可以随时继承父对象的新属性和方法，而父对象的变化也不会影响子对象。

例如：

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

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

const employee1 = new Employee('Mary', 10000);
employee1.greet(); // Output: Hello, my name is Mary.
console.log(employee1.salary); // Output: 10000