原型继承

继承方式

1. 原型链继承

function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating`);
};

function Dog(name) {
    Animal.call(this, name);
}

// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog('Rex');
dog.eat(); // 'Rex is eating'

2. 构造函数继承

function Animal(name) {
    this.name = name;
}

function Dog(name, breed) {
    // 继承属性
    Animal.call(this, name);
    this.breed = breed;
}

const dog = new Dog('Rex', 'German Shepherd');
console.log(dog.name); // 'Rex'
console.log(dog.breed); // 'German Shepherd'

3. 组合继承

function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating`);
};

function Dog(name, breed) {
    // 继承属性
    Animal.call(this, name);
    this.breed = breed;
}

// 继承方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 添加子类方法
Dog.prototype.bark = function() {
    console.log(`${this.name} is barking`);
};

const dog = new Dog('Rex', 'German Shepherd');
dog.eat(); // 'Rex is eating'
dog.bark(); // 'Rex is barking'

4. 原型式继承

const animal = {
    eat() {
        console.log(`${this.name} is eating`);
    }
};

const dog = Object.create(animal, {
    name: { value: 'Rex' },
    bark: {
        value: function() {
            console.log(`${this.name} is barking`);
        }
    }
});

dog.eat(); // 'Rex is eating'
dog.bark(); // 'Rex is barking'

5. 寄生式继承

function createDog(name) {
    const dog = Object.create(animal);
    dog.name = name;
    dog.bark = function() {
        console.log(`${this.name} is barking`);
    };
    return dog;
}

const dog = createDog('Rex');
dog.eat(); // 'Rex is eating'
dog.bark(); // 'Rex is barking'

6. 寄生组合式继承

function inheritPrototype(subType, superType) {
    const prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating`);
};

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

inheritPrototype(Dog, Animal);

Dog.prototype.bark = function() {
    console.log(`${this.name} is barking`);
};

const dog = new Dog('Rex', 'German Shepherd');
dog.eat(); // 'Rex is eating'
dog.bark(); // 'Rex is barking'

ES6 类继承

1. 基本类继承

class Animal {
    constructor(name) {
        this.name = name;
    }

    eat() {
        console.log(`${this.name} is eating`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    bark() {
        console.log(`${this.name} is barking`);
    }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.eat(); // 'Rex is eating'
dog.bark(); // 'Rex is barking'

2. 静态成员继承

class Animal {
    static create(name) {
        return new Animal(name);
    }
}

class Dog extends Animal {
    static create(name, breed) {
        const dog = new Dog(name, breed);
        return dog;
    }
}

const dog = Dog.create('Rex', 'German Shepherd');

最佳实践

1. 优先使用 ES6 类语法
2. 使用组合而不是继承
3. 正确设置 constructor 属性
4. 使用 Object.create() 创建原型链
5. 避免多重继承
6. 使用 super() 调用父类构造函数
7. 使用 instanceof 检查类型
8. 使用 Object.getPrototypeOf() 获取原型