js原生怎么实现继承

JavaScript原生实现继承可以通过原型链、构造函数、Object.create方法等方式实现。这些方法各有优缺点和适用场景，下面将详细介绍其中一种方法——原型链继承。通过使用原型链继承，可以在子类对象中访问父类对象的属性和方法，从而实现代码的复用和扩展。

一、原型链继承

原型链继承是 JavaScript 中最基本的继承方式，通过将子类的原型对象指向父类的实例，从而实现继承。这个方法简单直接，但也有一些缺点，如所有实例共享父类的属性，容易造成修改时的混淆。

1. 基本概念

在 JavaScript 中，每个对象都有一个内部链接指向另一个对象，这个对象称为原型。原型对象也有自己的原型，层层链接直到一个对象的原型为 null。这种结构被称为原型链。

2. 实现过程

首先，定义一个父类构造函数和一个子类构造函数。然后，将子类的原型对象指向父类的实例，实现继承。

// 定义父类构造函数

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};
// 定义子类构造函数
function Child(name, age) {
    Parent.call(this, name); // 调用父类构造函数
    this.age = age;
}
// 子类继承父类
Child.prototype = new Parent();
// 添加子类方法
Child.prototype.sayAge = function() {
    console.log(this.age);
};
// 创建实例
const instance1 = new Child('John', 25);
instance1.colors.push('black');
console.log(instance1.colors); // 输出: ['red', 'blue', 'green', 'black']
instance1.sayName(); // 输出: John
instance1.sayAge(); // 输出: 25
const instance2 = new Child('Jane', 22);
console.log(instance2.colors); // 输出: ['red', 'blue', 'green']
instance2.sayName(); // 输出: Jane
instance2.sayAge(); // 输出: 22

二、构造函数继承

构造函数继承通过在子类构造函数中调用父类构造函数，实现属性的继承。这个方法可以避免原型链继承的引用属性共享问题，但不能继承父类的原型方法。

1. 实现过程

在子类构造函数内部使用 call 或 apply 方法调用父类构造函数。

// 定义父类构造函数

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};
// 定义子类构造函数
function Child(name, age) {
    Parent.call(this, name); // 调用父类构造函数
    this.age = age;
}
// 创建实例
const instance1 = new Child('John', 25);
instance1.colors.push('black');
console.log(instance1.colors); // 输出: ['red', 'blue', 'green', 'black']
const instance2 = new Child('Jane', 22);
console.log(instance2.colors); // 输出: ['red', 'blue', 'green']

三、组合继承

组合继承结合了原型链继承和构造函数继承的优点，通过使用原型链继承父类的原型方法，并在子类构造函数中调用父类构造函数，实现属性和方法的继承。

1. 实现过程

先通过原型链继承父类的原型方法，再在子类构造函数中调用父类构造函数，实现完整的继承。

// 定义父类构造函数

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};
// 定义子类构造函数
function Child(name, age) {
    Parent.call(this, name); // 调用父类构造函数
    this.age = age;
}
// 子类继承父类
Child.prototype = new Parent();
Child.prototype.constructor = Child;
// 添加子类方法
Child.prototype.sayAge = function() {
    console.log(this.age);
};
// 创建实例
const instance1 = new Child('John', 25);
instance1.colors.push('black');
console.log(instance1.colors); // 输出: ['red', 'blue', 'green', 'black']
instance1.sayName(); // 输出: John
instance1.sayAge(); // 输出: 25
const instance2 = new Child('Jane', 22);
console.log(instance2.colors); // 输出: ['red', 'blue', 'green']
instance2.sayName(); // 输出: Jane
instance2.sayAge(); // 输出: 22

四、原型式继承

原型式继承通过创建一个临时构造函数，将其原型指向父类对象的实例，实现继承。这种方法类似于创建一个新对象，并将新对象的原型指向父类对象。

1. 实现过程

使用 Object.create 方法创建一个新的对象，并将其原型指向父类对象。

// 定义父类对象

const parent = {
    name: 'Parent',
    colors: ['red', 'blue', 'green'],
    sayName: function() {
        console.log(this.name);
    }
};
// 创建子类对象
const child = Object.create(parent);
child.age = 25;
child.sayAge = function() {
    console.log(this.age);
};
// 使用子类对象
child.colors.push('black');
console.log(child.colors); // 输出: ['red', 'blue', 'green', 'black']
child.sayName(); // 输出: Parent
child.sayAge(); // 输出: 25

五、寄生式继承

寄生式继承通过创建一个临时构造函数，将其原型指向父类对象的实例，并在这个基础上添加新的属性和方法。

1. 实现过程

定义一个工厂函数，创建一个新的对象，并在其基础上添加新的属性和方法。

// 定义父类对象

const parent = {
    name: 'Parent',
    colors: ['red', 'blue', 'green'],
    sayName: function() {
        console.log(this.name);
    }
};
// 定义工厂函数
function createChild(original) {
    const clone = Object.create(original);
    clone.age = 25;
    clone.sayAge = function() {
        console.log(this.age);
    };
    return clone;
}
// 创建子类对象
const child = createChild(parent);
// 使用子类对象
child.colors.push('black');
console.log(child.colors); // 输出: ['red', 'blue', 'green', 'black']
child.sayName(); // 输出: Parent
child.sayAge(); // 输出: 25

六、寄生组合式继承

寄生组合式继承结合了寄生式继承和组合继承的优点，通过使用 Object.create 方法创建一个新的对象，并在其基础上添加新的属性和方法。

1. 实现过程

先通过 Object.create 方法创建一个新的对象，再在子类构造函数中调用父类构造函数，实现完整的继承。

// 定义父类构造函数

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};
// 定义子类构造函数
function Child(name, age) {
    Parent.call(this, name); // 调用父类构造函数
    this.age = age;
}
// 子类继承父类
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
// 添加子类方法
Child.prototype.sayAge = function() {
    console.log(this.age);
};
// 创建实例
const instance1 = new Child('John', 25);
instance1.colors.push('black');
console.log(instance1.colors); // 输出: ['red', 'blue', 'green', 'black']
instance1.sayName(); // 输出: John
instance1.sayAge(); // 输出: 25
const instance2 = new Child('Jane', 22);
console.log(instance2.colors); // 输出: ['red', 'blue', 'green']
instance2.sayName(); // 输出: Jane
instance2.sayAge(); // 输出: 22

七、总结

在 JavaScript 中，有多种方式实现继承，每种方式都有其优缺点和适用场景。原型链继承和构造函数继承是最基本的两种方式，适用于简单的继承场景。组合继承结合了这两种方式的优点，适用于大多数场景。原型式继承和寄生式继承提供了更加灵活的继承方式，适用于需要动态扩展对象的场景。寄生组合式继承是最推荐的继承方式，它结合了寄生式继承和组合继承的优点，提供了最优的性能和代码可读性。

相关问答FAQs：

1. 什么是JavaScript原生继承？
JavaScript原生继承是指使用JavaScript内置的语法和特性来实现对象之间的继承关系。它不依赖于任何第三方库或框架。

2. 如何在JavaScript中实现原生继承？
在JavaScript中，可以使用原型链、构造函数和对象.assign()等方法来实现原生继承。例如，可以通过将子类的原型指向父类的实例来实现原型链继承，或者使用call()或apply()方法来在子类中调用父类的构造函数来实现构造函数继承。

3. 原生继承和第三方库之间有什么区别？
原生继承是指使用JavaScript内置的语法和特性来实现继承，而第三方库则是指使用其他开发者编写的库或框架来实现继承。原生继承更加轻量级，不需要额外的依赖，但可能需要更多的代码来实现复杂的继承关系。而使用第三方库可以提供更简洁和易于使用的API，但需要引入额外的依赖，并且可能会增加项目的复杂性。选择使用原生继承还是第三方库取决于具体的需求和开发环境。