正文

掌握JavaScript中实现继承的多种方式，轻松构建灵活的代码结构

/0 浏览量
0404

在JavaScript中，理解并掌握继承的概念对于构建灵活且可扩展的代码结构至关重要。继承允许我们创建新的对象，这些对象继承并扩展了另一个对象（称为父对象或基类）的功能。以下是一些JavaScript中实现继承的常用方法。

1. 原型链继承

原型链继承是最简单也是最传统的继承方式。在这种方法中，我们创建一个新的构造函数，并将其原型指向父对象的实例。

function Parent() {
    this.parentProperty = true;
}

Parent.prototype.getParentProperty = function() {
    return this.parentProperty;
};

function Child() {
    this.childProperty = false;
}

// 继承
Child.prototype = new Parent();

var child1 = new Child();
console.log(child1.getParentProperty()); // true

这种方法简单易行，但缺点是如果父对象的原型上存在引用类型值，那么所有子对象都会共享这个值，这可能导致一些不可预料的问题。

2. 构造函数继承

构造函数继承通过调用父类构造函数来继承父类的属性。

function Parent(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

function Child(name) {
    Parent.call(this, name); // 继承父类属性
}

var child1 = new Child("Nicholas");
console.log(child1.name); // "Nicholas"
console.log(child1.colors); // ["red", "blue", "green"]

child1.colors.push("black");
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child("Greg");
console.log(child2.colors); // ["red", "blue", "green"]

这种方法可以避免原型链继承中的引用类型共享问题，但缺点是每次创建子类实例时，都会调用一次父类构造函数。

3. 组合继承

组合继承结合了原型链继承和构造函数继承的优点，既能够继承父类原型上的方法，也能够继承父类构造函数中的属性。

function Parent(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

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

function Child(name) {
    Parent.call(this, name); // 继承父类属性
    this.childProperty = false;
}

Child.prototype = new Parent(); // 继承父类方法

var child1 = new Child("Nicholas");
console.log(child1.name); // "Nicholas"
console.log(child1.colors); // ["red", "blue", "green"]

child1.colors.push("black");
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child("Greg");
console.log(child2.colors); // ["red", "blue", "green"]

这种方法是现在最常用的继承方式，因为它解决了原型链继承和构造函数继承的缺点。

4. 原型式继承

原型式继承使用一个现有的对象来提供新对象的原型。

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

function createAnother(original) {
    var clone = Object.create(original);
    clone.sayHi = function() {
        console.log("Hi!");
    };
    return clone;
}

var person2 = createAnother(person);
console.log(person2.name); // "Nicholas"
person2.sayHi(); // "Hi!"

这种方法对于不需要修改原型链的对象来说非常实用。

5. 寄生式继承

寄生式继承通过创建一个用于封装构造函数的函数来实现。

function createAnother(original) {
    var clone = Object.create(original);
    clone.sayHi = function() {
        console.log("Hi!");
    };
    return clone;
}

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var person2 = createAnother(person);

这种方法在创建一个复杂对象时非常有用，尤其是当这个对象需要继承另一个对象时。

6. 寄生组合式继承

寄生组合式继承结合了寄生式继承和组合继承的优点，是一种更高效的继承方式。

function inheritPrototype(child, parent) {
    var prototype = Object.create(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

function Parent(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

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

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

inheritPrototype(Child, Parent);

var child1 = new Child("Nicholas");
console.log(child1.name); // "Nicholas"
console.log(child1.colors); // ["red", "blue", "green"]

这种方法在创建子类原型时，避免了重复调用父类构造函数，从而提高了性能。

通过了解并掌握这些不同的继承方式，你可以根据具体需求选择最合适的方法来构建你的JavaScript代码结构。记住，选择合适的继承方式对于构建可维护、可扩展的代码至关重要。

-- 展开阅读全文 --