JS 继承

67 阅读2分钟

在 JavaScript 中,继承是一种通过一个对象来创建另一个对象的方式,允许子类对象共享父类对象的属性和方法。

使用原型链来实现继承

// 定义一个父类
function Animal(name) {
  this.name = name;
}

// 给父类添加方法
Animal.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

// 定义一个子类
function Dog(name) {
  this.name = name;
}

// 通过将子类的原型设置为父类的实例来实现继承
Dog.prototype = new Animal();

// 给子类添加方法
Dog.prototype.bark = function() {
  console.log('Wang! Wang!');
};

// 创建一个子类实例并调用方法
var dog = new Dog('Tom');
dog.sayHello();   // 输出:Hello, my name is Tom
dog.bark();       // 输出:Wang! Wang!

在上述代码中,我们定义了一个名为 Animal 的父类,并给它添加了一个 sayHello 方法。接着,我们定义了一个名为 Dog 的子类,并将其原型设置为 Animal 的一个实例,从而实现了通过原型链继承 Animal 类的属性和方法。最后,我们给 Dog 子类添加了一个 bark 方法,并创建了一个 Dog 实例并调用了其方法。

通过使用原型链继承,可以很方便地实现面向对象编程中的继承。但在实际开发中,需要注意继承链的层次不要过深,否则可能出现性能和内存占用的问题。

使用 class 关键字来实现继承

// 定义一个父类
class Animal {
  constructor(name) {
    this.name = name;
  }

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

// 定义一个子类
class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  bark() {
    console.log('Wang! Wang!');
  }
}

// 创建一个子类实例并调用方法
let dog = new Dog('Tom');
dog.sayHello();   // 输出:Hello, my name is Tom
dog.bark();       // 输出:Wang! Wang!

在上述代码中,我们定义了一个名为 Animal 的父类,并使用 constructor 关键字定义其构造函数。接着,我们在父类中定义了一个 sayHello 方法。然后,我们定义了一个名为 Dog 的子类,并使用 extends 关键字将其继承自 Animal 父类,并在子类中定义了一个 bark 方法。

在 class 中,使用 super 关键字来调用父类的构造函数(constructor)和方法。这里,在子类的构造函数中,我们调用了父类的构造函数。

最后,我们创建了一个 Dog 类的实例并调用了其方法。

使用 class 关键字来实现继承能够进一步简化代码,增强了可读性。但实现本质还是基于原型链的机制,只是在语法上做了更为优雅的封装。