Javascript 实现继承357


在 Javascript 中实现继承有以下几种方式:

1. 传统基于原型的继承

这是 Javascript 中最常见的继承方式,它是通过原型对象实现的。原型对象是每个函数都有的一个特殊对象,它包含该函数创建的所有实例的共享属性和方法。子类通过将自己的原型对象设置为父类的原型对象来继承父类的属性和方法。```javascript
function Parent() {
= "Parent";
}
= function() {
("Hello from Parent!");
};
function Child() {
= "Child";
}
// 将 Child 的原型对象设置为 Parent 的原型对象
= new Parent();
// 创建一个 Child 实例
const child = new Child();
// 调用 Child 实例的 sayHello() 方法,它将继承自 Parent
(); // 输出: Hello from Parent!
```

2. 基于构造函数的继承

这种继承方式类似于基于原型的继承,但它使用构造函数而不是原型对象。子类的构造函数调用父类的构造函数,从而继承父类的属性和方法。```javascript
function Parent(name) {
= name;
}
= function() {
("Hello from Parent!");
};
function Child(name) {
// 调用 Parent 构造函数继承父类属性和方法
(this, name);
}
// 重写 Child 的 sayHello() 方法
= function() {
("Hello from Child!");
};
// 创建一个 Child 实例
const child = new Child("Child");
// 调用 Child 实例的 sayHello() 方法
(); // 输出: Hello from Child!
```

3. 对象冒充继承

这种继承方式涉及创建一个子对象,它将父对象作为其属性。子对象访问父对象的属性和方法就好像它们是子对象自己的属性和方法一样。```javascript
const parent = {
name: "Parent",
sayHello: function() {
("Hello from Parent!");
}
};
const child = (parent);
// 子对象可以访问父对象属性和方法
; // "Parent"
(); // 输出: Hello from Parent!
```

4. 组合继承

组合继承结合了传统基于原型的继承和基于构造函数的继承。子类的原型对象设置为父类的实例,而子类的构造函数调用父类的构造函数。这种方法允许子类继承父类的属性和方法,同时还可以向子类添加自己的属性和方法。```javascript
function Parent(name) {
= name;
}
= function() {
("Hello from Parent!");
};
function Child(name) {
// 创建一个 Parent 实例并将它作为 Child 的原型对象
= new Parent(name);
}
// 调用 Parent 构造函数继承父类属性和方法
(, name);
// 重写 Child 的 sayHello() 方法
= function() {
("Hello from Child!");
// 调用父类的 sayHello() 方法
();
};
// 创建一个 Child 实例
const child = new Child("Child");
// 调用 Child 实例的 sayHello() 方法
(); // 输出: Hello from Child!Hello from Parent!
```

5. ES6 类继承

ES6 引入了类语法,它提供了更简洁的方式来定义和继承类。类使用 extends 关键字继承其他类。```javascript
class Parent {
constructor(name) {
= name;
}
sayHello() {
("Hello from Parent!");
}
}
class Child extends Parent {
constructor(name) {
// 调用父类构造函数
super(name);
}
sayHello() {
// 调用父类 sayHello() 方法
();
("Hello from Child!");
}
}
// 创建一个 Child 实例
const child = new Child("Child");
// 调用 Child 实例的 sayHello() 方法
(); // 输出: Hello from Parent!Hello from Child!
```

2025-01-02


上一篇:如何使用 JavaScript 动态加载页面内容

下一篇:HTML、JavaScript 和 PDF:全面指南