5 js的继承是怎么实现的

5 JS的继承是怎么实现的

JavaScript的继承主要通过原型链、构造函数、ES6的class语法、Object.create()、混合模式实现。其中，原型链是一种常见的继承方式。原型链实现继承的方式是通过将一个对象的原型指向另一个对象，从而使前者可以访问后者的属性和方法。通过这种方式，我们能够创建出更为复杂和多层次的对象关系。

一、原型链继承

原型链继承是JavaScript最基本的继承方式。它的实现原理是通过将子类的原型对象指向父类的实例，这样子类便能访问父类的属性和方法。

function Parent() {
    this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
    console.log('Hello from Parent');
};
function Child() {
    this.age = 10;
}
Child.prototype = new Parent();
let child = new Child();
console.log(child.name); // 'Parent'
child.sayHello(); // 'Hello from Parent'

优点

简单易懂，逻辑清晰。
子类可以访问父类的所有属性和方法。

缺点

父类的引用属性会被所有子类实例共享，容易引起意料之外的错误。
无法向父类构造函数传参。

二、构造函数继承

构造函数继承通过在子类的构造函数中调用父类的构造函数来实现。这种方式可以解决原型链继承中的一些问题，如共享引用属性的问题。

function Parent(name) {
    this.name = name;
}
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
let child = new Child('Child', 10);
console.log(child.name); // 'Child'
console.log(child.age); // 10

优点

可以向父类构造函数传参。
解决了原型链继承中引用属性共享的问题。

缺点

父类的方法不能被子类访问，需要在子类中重新定义。
代码重复度高。

三、组合继承

组合继承结合了原型链和构造函数继承的优点，既能解决引用属性共享的问题，又能让子类访问父类的方法。

function Parent(name) {
    this.name = name;
}
Parent.prototype.sayHello = function() {
    console.log('Hello from Parent');
};
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Child.prototype = new Parent();
let child = new Child('Child', 10);
console.log(child.name); // 'Child'
console.log(child.age); // 10
child.sayHello(); // 'Hello from Parent'

优点

解决了引用属性共享的问题。
子类可以访问父类的方法。

缺点

父类的构造函数会调用两次，导致性能开销较大。

四、原型式继承

原型式继承通过创建一个临时构造函数，将对象实例化后返回。它是原型链继承的一种简化版本。

function createObj(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
let parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello from Parent');
    }
};
let child = createObj(parent);
console.log(child.name); // 'Parent'
child.sayHello(); // 'Hello from Parent'

优点

简单易懂，代码量少。

缺点

引用属性共享问题依旧存在。
无法向父类构造函数传参。

五、寄生式继承

寄生式继承是在原型式继承的基础上进一步扩展，通过一个工厂函数创建对象并增强其功能。

function createEnhancedObj(o) {
    let clone = Object.create(o);
    clone.sayGoodbye = function() {
        console.log('Goodbye from Child');
    };
    return clone;
}
let parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello from Parent');
    }
};
let child = createEnhancedObj(parent);
console.log(child.name); // 'Parent'
child.sayHello(); // 'Hello from Parent'
child.sayGoodbye(); // 'Goodbye from Child'

优点

代码简洁，易于扩展。

缺点

引用属性共享问题依旧存在。
无法向父类构造函数传参。

六、ES6 Class 继承

ES6 引入了 class 关键字，使得创建类和继承更加直观和简洁。通过 extends 关键字实现继承。

class Parent {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log('Hello from Parent');
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}
let child = new Child('Child', 10);
console.log(child.name); // 'Child'
console.log(child.age); // 10
child.sayHello(); // 'Hello from Parent'

优点

语法简洁，易于理解。
可以向父类构造函数传参。
支持静态方法和getter/setter。

缺点

需要ES6支持，在一些旧浏览器中可能不兼容。

七、Object.create()实现继承

Object.create() 方法创建一个新对象，使用现有的对象来提供新创建的对象的 __proto__。

let parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello from Parent');
    }
};
let child = Object.create(parent);
child.age = 10;
console.log(child.name); // 'Parent'
console.log(child.age); // 10
child.sayHello(); // 'Hello from Parent'

优点

简单直观，易于理解。
灵活性高，可以动态添加属性和方法。

缺点

引用属性共享问题依旧存在。
无法向父类构造函数传参。

八、混合模式继承

混合模式继承结合了多种继承方式的优点，通常使用Object.assign()来组合多个对象的属性和方法。

function mixin(target, ...sources) {
    Object.assign(target.prototype, ...sources);
}
let canEat = {
    eat: function() {
        console.log('Eating');
    }
};
let canWalk = {
    walk: function() {
        console.log('Walking');
    }
};
function Person(name) {
    this.name = name;
}
mixin(Person, canEat, canWalk);
let person = new Person('John');
person.eat(); // 'Eating'
person.walk(); // 'Walking'

优点

组合多种功能，灵活性高。
代码简洁易读。

缺点

可能会引起命名冲突，需要小心处理。

总结

JavaScript 提供了多种实现继承的方式，包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、ES6 的 class 继承、Object.create() 继承以及混合模式继承。每种方式都有其优缺点和适用场景。在实际开发中，选择合适的继承方式能够提高代码的可读性和维护性。对于复杂的项目管理和团队协作，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高开发效率和团队协作能力。