什么是js继承怎么用

JavaScript 继承是一种机制，通过这种机制，一个对象可以从另一个对象继承属性和方法，从而实现代码的重用和模块化。在 JavaScript 中，继承的实现方式主要包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承。其中，最推荐使用的是寄生组合式继承，因为它最有效地避免了继承中的问题。

一、原型链继承

原型链继承是通过将一个对象的原型指向另一个对象，从而实现继承。此方法的核心思想是利用 JavaScript 的原型链机制。

function Parent() {
    this.name = 'Parent';
}
Parent.prototype.getName = function() {
    return this.name;
};
function Child() {}
Child.prototype = new Parent();
const child = new Child();
console.log(child.getName()); // 输出: Parent

优点：

简单易懂，代码量少。

缺点：

子类实例共享父类的引用属性，修改其中一个实例的引用属性会影响所有实例。

二、构造函数继承

构造函数继承通过在子类构造函数中调用父类构造函数来实现属性的继承。

function Parent() {
    this.names = ['John', 'Jane'];
}
function Child() {
    Parent.call(this);
}
const child1 = new Child();
child1.names.push('Jim');
console.log(child1.names); // 输出: ['John', 'Jane', 'Jim']
const child2 = new Child();
console.log(child2.names); // 输出: ['John', 'Jane']

优点：

解决了原型链继承中引用属性共享的问题。

缺点：

方法无法复用，每次创建子类实例时，父类的方法都会被重新创建一次。

三、组合继承

组合继承结合了原型链继承和构造函数继承，既解决了引用属性共享的问题，又可以复用父类的方法。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function() {
    return this.name;
};
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child1 = new Child('John', 18);
child1.colors.push('black');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'black']
console.log(child1.getName()); // 输出: John
const child2 = new Child('Jane', 20);
console.log(child2.colors); // 输出: ['red', 'blue', 'green']
console.log(child2.getName()); // 输出: Jane

优点：

综合了原型链继承和构造函数继承的优点，解决了引用属性共享问题和方法复用问题。

缺点：

调用了两次父类构造函数，产生了不必要的开销。

四、原型式继承

原型式继承通过 Object.create 方法实现。

const parent = {
    name: 'Parent',
    getName: function() {
        return this.name;
    }
};
const child = Object.create(parent);
child.name = 'Child';
console.log(child.getName()); // 输出: Child

优点：

简单，易于实现。

缺点：

子类实例共享父类的引用属性，修改其中一个实例的引用属性会影响所有实例。

五、寄生式继承

寄生式继承是在原型式继承的基础上，创建一个新的对象，然后在这个对象上添加新的方法。

function createObj(o) {
    const clone = Object.create(o);
    clone.sayHello = function() {
        console.log('Hello');
    };
    return clone;
}
const parent = {
    name: 'Parent',
    getName: function() {
        return this.name;
    }
};
const child = createObj(parent);
child.sayHello(); // 输出: Hello

优点：

简单，易于实现。

缺点：

方法无法复用，每次创建子类实例时，父类的方法都会被重新创建一次。

六、寄生组合式继承

寄生组合式继承是目前最推荐的继承方式，它结合了组合继承的优点，同时避免了组合继承的缺点。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function() {
    return this.name;
};
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
const child1 = new Child('John', 18);
child1.colors.push('black');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'black']
console.log(child1.getName()); // 输出: John
const child2 = new Child('Jane', 20);
console.log(child2.colors); // 输出: ['red', 'blue', 'green']
console.log(child2.getName()); // 输出: Jane

优点：

解决了组合继承中重复调用父类构造函数的问题。
既可以复用父类的方法，也解决了引用属性共享的问题。

结论：JavaScript 的继承机制多种多样，其中寄生组合式继承被认为是最合理和高效的方式。无论是简单的原型链继承，还是复杂的组合继承和寄生组合式继承，选择适合自己项目的继承方式尤为重要。通过合理的继承机制，可以有效地提高代码的复用性和可维护性。

什么是js继承 怎么用