原生js如何实现继承-js教程-PHP中文网

原生js如何实现继承

幻夢星雲

发布： 2024-11-08 09:45:22

原创

610人浏览过

JavaScript 通过原型链和构造函数实现继承。使用原型链，父对象作为子对象的原型，子对象继承父对象的属性和方法。使用构造函数，子构造函数将父构造函数作为原型，并通过覆盖父类方法实现定制化。本例中，Person 是父类，Employee 是子类，Employee 继承了 Person 的属性和方法，并添加了自己的 sayJob 方法。

原生js如何实现继承

在原生 JavaScript 中实现继承

JavaScript 是一种基于原型链的语言，它不直接支持类和继承，但是可以通过使用原型链和构造函数来模拟继承。

使用原型链实现继承

创建父对象：创建一个对象作为父对象，它包含要继承的属性和方法。

const Parent = {
  name: "Parent",
  sayName() {
    console.log(this.name);
  }
};

登录后复制

创建子对象：创建子对象，将父对象的原型链设置为其原型。

const Child = Object.create(Parent);
Child.name = "Child";

登录后复制

使用构造函数实现继承

创建父构造函数：创建一个父构造函数，它包含要继承的属性和方法。

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

Parent.prototype.sayName = function() {
  console.log(this.name);
};

登录后复制

创建子构造函数：创建子构造函数，将父构造函数作为其原型。

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

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

登录后复制

在子类中覆盖父类方法

要覆盖父类中的方法，可以在子类的原型链中重新定义该方法。

Child.prototype.sayName = function() {
  console.log("Child: " + this.name);
};

登录后复制

示例

以下是一个使用构造函数实现继承的示例：

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

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

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

Employee.prototype.sayJob = function() {
  console.log(this.name + " is a " + this.title);
};

const john = new Employee("John", "Software Engineer");
john.sayName(); // 输出："John"
john.sayJob(); // 输出："John is a Software Engineer"

登录后复制

以上就是原生js如何实现继承的详细内容，更多请关注php中文网其它相关文章！