教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

原生JS中怎么实现继承关系?

更新时间:2023年12月20日10时45分 来源:传智教育 浏览次数:

好口碑IT培训

  在原生JavaScript中实现继承关系可以使用原型链或者ES6中的类来实现。下面笔者将分别展示这两种方式。

原生JS中怎么实现继承关系

  1.原型链继承

  原型链继承通过将一个对象的原型设置为另一个对象,从而实现继承。这种方法简单,但也存在一些潜在问题。

// 父类构造函数
function Animal(name) {
  this.name = name;
}

// 在父类原型上添加方法
Animal.prototype.makeSound = function() {
  console.log('Some generic sound');
};

// 子类构造函数
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

// 将子类的原型设置为父类的一个实例
Dog.prototype = Object.create(Animal.prototype);

// 修正子类的构造函数指向
Dog.prototype.constructor = Dog;

// 在子类原型上添加方法
Dog.prototype.bark = function() {
  console.log('Woof! Woof!');
};

// 实例化子类
const myDog = new Dog('Buddy', 'Golden Retriever');

// 测试继承方法和属性
myDog.makeSound(); // 输出: Some generic sound
myDog.bark(); // 输出: Woof! Woof!
console.log(myDog.name); // 输出: Buddy
console.log(myDog instanceof Dog); // 输出: true
console.log(myDog instanceof Animal); // 输出: true

  2.ES6类继承

  ES6引入了class关键字,使得面向对象编程更加清晰和易于理解。

// 父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log('Some generic sound');
  }
}

// 子类继承父类
class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

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

// 实例化子类
const myDog = new Dog('Buddy', 'Golden Retriever');

// 测试继承方法和属性
myDog.makeSound(); // 输出: Some generic sound
myDog.bark(); // 输出: Woof! Woof!
console.log(myDog.name); // 输出: Buddy
console.log(myDog instanceof Dog); // 输出: true
console.log(myDog instanceof Animal); // 输出: true

  这两种方式都可以实现继承关系,ES6的类语法更加清晰易懂,并且避免了原型链继承的一些问题。

0 分享到:
和我们在线交谈!