剖析 JavaScript 中的继承奥秘：突破语言局限

2023-09-26 01:28:08

SEO 关键词：

JavaScript，一门强大而灵活的语言，支持面向对象编程范式，其中继承扮演着至关重要的角色。继承允许我们创建新类，这些类可以从现有类继承属性和方法，从而实现代码重用和可扩展性。然而，JavaScript 中的继承机制与其他面向对象语言略有不同，值得我们深入探究。

类：一种惯用的语法糖

ES6 引入了 class ，为 JavaScript 提供了一种熟悉的类语法，类似于 Java 和 C++ 等其他语言。类使我们能够定义具有私有和公有方法的类，并通过 extends 关键字实现继承。这种语法糖简化了类的创建，但底层仍然是基于原型链的继承机制。

class Parent {
  constructor(name) {
    this.name = name;
  }

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

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  getAge() {
    console.log(`I am ${this.age} years old`);
  }
}

原型链：JavaScript 继承的核心

在 JavaScript 中，继承是通过原型链实现的。每个对象都有一个称为 __proto__（或在较旧的浏览器中称为 prototype）的内部属性，它指向另一个对象，即其原型。原型对象又具有自己的原型，如此递归地向上追溯，直到达到 null，表示继承链的终点。

当我们访问对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。如果在当前对象中找不到，则会在其原型中查找，依此类推。这使得子对象可以访问父对象的所有属性和方法，从而实现了继承。

const parent = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const child = Object.create(parent);
child.name = 'Mary';
child.greet(); // Output: Hello, my name is Mary

构造函数：创建新实例的蓝图

构造函数在 JavaScript 中扮演着至关重要的角色，它是一个特殊函数，负责创建新对象的实例。构造函数可以接收参数，这些参数将作为新实例的属性。构造函数的原型对象是新实例的原型，从而建立了原型链。

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

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

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.getAge = function() {
  console.log(`I am ${this.age} years old`);
};

委托：委派责任以增强灵活性

委托是一种设计模式，允许对象将某些任务委派给其他对象来完成。在 JavaScript 中，委托可以通过使用 call() 或 apply() 方法来实现，这两个方法允许我们以不同的上下文调用函数。

const parent = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const child = {
  name: 'Mary'
};

child.greet = parent.greet;
child.greet(); // Output: Hello, my name is Mary

多态性：根据对象类型表现出不同的行为

多态性是面向对象编程的一个重要特征，它允许对象根据其类型表现出不同的行为。在 JavaScript 中，多态性可以通过重写原型方法来实现，子类的方法可以覆盖父类的方法，从而实现不同的行为。

class Parent {
  greet() {
    console.log('Hello, I am a parent');
  }
}

class Child extends Parent {
  greet() {
    super.greet();
    console.log('...and I am a child');
  }
}

const parent = new Parent();
const child = new Child();

parent.greet(); // Output: Hello, I am a parent
child.greet(); // Output: Hello, I am a parent...and I am a child