JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

下面我将详细讲解JavaScript继承的基础知识，包括原型链继承、借用构造函数继承、混合模式继承、原型式继承、寄生式继承和寄生组合式继承。

原型链继承

JavaScript使用原型链的方式实现继承，通过将一个对象的原型指向另一个对象来实现继承。

示例代码如下：

// 创建一个父对象，包含属性和方法
var parent = {
  name: 'Bob',
  age: 30,
  sayHello: function() {
    console.log('Hello, I am ' + this.name);
  }
};

// 创建一个子对象，将其原型指向父对象，达到继承的效果
var child = Object.create(parent);
child.name = 'Alice';
child.sayHello(); // 打印结果为：Hello, I am Alice

借用构造函数继承

借用构造函数继承是通过调用父类的构造函数来实现继承。

示例代码如下：

// 创建一个父类，包含属性和方法
function Parent(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, I am ' + this.name);
  };
}

// 创建一个子类，借用父类构造函数并传递参数
function Child(name, age) {
  Parent.call(this, name, age);
}

// 创建一个子类实例，其属性和方法都可以从父类继承而来
var child = new Child('Alice', 20);
child.sayHello(); // 打印结果为：Hello, I am Alice

混合模式继承

混合模式继承是基于原型链和借用构造函数的继承模式，通过组合两种继承方式实现继承。

示例代码如下：

// 创建一个父类，包含属性和方法
function Parent(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, I am ' + this.name);
  };
}

// 创建一个子类，继承自父类
function Child(name, age, gender) {
  Parent.call(this, name, age);
  this.gender = gender;
}

// 将子类的原型指向父类的一个实例，实现原型链继承
Child.prototype = new Parent();

// 继承了父类的属性和方法以及原型对象上的属性和方法
var child = new Child('Alice', 20, 'female');
child.sayHello(); // 打印结果为：Hello, I am Alice

原型式继承

原型式继承是基于原型对象的继承模式，实现继承的方式与原型链继承类似，但是它不使用构造函数，而是通过Object.create()方法创建一个新对象，并将其原型指向一个现有的对象。

示例代码如下：

// 创建一个模板对象，包含属性和方法
var template = {
  name: 'Bob',
  age: 30,
  sayHello: function() {
    console.log('Hello, I am ' + this.name);
  }
};

// 创建一个子对象，将其原型指向模板对象，实现继承
var child = Object.create(template);
child.name = 'Alice';
child.sayHello(); // 打印结果为：Hello, I am Alice

寄生式继承

寄生式继承是基于原型式继承，添加了一些额外的代码来增强对象功能或隐藏继承关系。

示例代码如下：

// 创建一个模板对象，包含属性和方法
var template = {
  name: 'Bob',
  age: 30,
  sayHello: function() {
    console.log('Hello, I am ' + this.name);
  }
};

// 创建一个子对象，基于原型式继承，但添加了一个自己的方法
function createChild(name) {
  var child = Object.create(template);
  child.name = name;
  child.sayHi = function() {
    console.log('Hi, I am ' + this.name);
  };
  return child;
}

// 创建一个子对象实例，可以使用父类和子类的方法
var child = createChild('Alice');
child.sayHello(); // 打印结果为：Hello, I am Alice
child.sayHi(); // 打印结果为：Hi, I am Alice

寄生组合式继承

寄生组合式继承是一种常用的继承模式，它通过借用构造函数继承父类的属性和方法，通过原型链继承父类的原型属性和方法，来实现高效、灵活的继承。

示例代码如下：

// 创建一个父类，包含属性和方法
function Parent(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, I am ' + this.name);
  };
}

// 创建一个子类，借用父类构造函数并传递参数
function Child(name, age, gender) {
  Parent.call(this, name, age);
  this.gender = gender;
}

// 将父类的原型属性和方法拷贝到子类的原型上
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

// 使用寄生组合式继承方式创建子类实例
var child = new Child('Alice', 20, 'female');
child.sayHello(); // 打印结果为：Hello, I am Alice

以上就是JavaScript继承基础讲解的完整攻略，通过上述6种继承方式的讲解及应用实例，相信大家对于继承的使用会更加熟练与熟悉。

阅读剩余 71%