js是怎么写继承

JavaScript 中的继承主要有以下几种方式：原型继承、构造函数继承、ES6类继承。本文将详细介绍这些继承方式以及它们的应用场景，其中，ES6类继承是最推荐的方式，因为它使代码更加简洁和易读。

一、原型继承

原型继承是JavaScript最早的继承方式，利用对象的原型链来实现继承。JavaScript中的每个对象都有一个原型对象，通过这个原型对象可以访问到父对象的方法和属性。

1、对象原型链

在JavaScript中，每个对象都有一个__proto__属性，指向该对象的原型。原型对象也有它自己的__proto__，这样就形成了一个原型链。理解原型链是掌握原型继承的关键。

2、使用原型继承

通过创建一个对象并将其赋值给另一个对象的原型，可以实现原型继承。示例如下：

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(this.name + ' makes a noise.');
};
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 + ' barks.');
};
let dog = new Dog('Rex', 'Golden Retriever');
dog.speak(); // Rex makes a noise.
dog.bark();  // Rex barks.

二、构造函数继承

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

1、通过构造函数继承属性

在子类的构造函数中使用call或apply方法来调用父类构造函数，使得父类的属性能够在子类实例中被访问。

function Animal(name) {
    this.name = name;
}
function Dog(name, breed) {
    Animal.call(this, name); // 继承属性
    this.breed = breed;
}
let dog = new Dog('Rex', 'Golden Retriever');
console.log(dog.name);  // Rex
console.log(dog.breed); // Golden Retriever

2、组合继承

组合继承是将原型继承和构造函数继承结合起来的继承方式，它既继承了父类的属性，也继承了父类的方法。

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(this.name + ' makes a noise.');
};
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 + ' barks.');
};
let dog = new Dog('Rex', 'Golden Retriever');
dog.speak(); // Rex makes a noise.
dog.bark();  // Rex barks.

三、ES6类继承

ES6引入了class和extends关键字，使继承变得更加简洁和直观。这种方式不仅语法上更接近其他面向对象编程语言，而且还提供了更多的功能。

1、创建类和继承

使用class关键字创建类，使用extends关键字实现继承。子类可以通过super关键字调用父类的构造函数和方法。

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 继承属性
        this.breed = breed;
    }
    bark() {
        console.log(this.name + ' barks.');
    }
}
let dog = new Dog('Rex', 'Golden Retriever');
dog.speak(); // Rex makes a noise.
dog.bark();  // Rex barks.

2、静态方法和私有属性

ES6类还引入了静态方法和私有属性，使得类的功能更加丰富。

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
    static info() {
        console.log('This is an Animal class.');
    }
}
class Dog extends Animal {
    #breed;
    constructor(name, breed) {
        super(name); // 继承属性
        this.#breed = breed; // 私有属性
    }
    bark() {
        console.log(this.name + ' barks.');
    }
    getBreed() {
        return this.#breed;
    }
}
Animal.info(); // This is an Animal class.
let dog = new Dog('Rex', 'Golden Retriever');
dog.speak(); // Rex makes a noise.
dog.bark();  // Rex barks.
console.log(dog.getBreed()); // Golden Retriever

四、混合继承

混合继承是将多个类的功能合并到一个类中，这在JavaScript中可以通过Object.assign实现。

1、实现混合继承

通过将多个类的方法合并到一个类中，可以实现混合继承。

const CanFly = {
    fly() {
        console.log(this.name + ' can fly.');
    }
};
const CanSwim = {
    swim() {
        console.log(this.name + ' can swim.');
    }
};
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
class Duck extends Animal {
    constructor(name) {
        super(name);
    }
}
Object.assign(Duck.prototype, CanFly, CanSwim);
let duck = new Duck('Donald');
duck.speak(); // Donald makes a noise.
duck.fly();   // Donald can fly.
duck.swim();  // Donald can swim.

五、总结

JavaScript的继承机制丰富多样，从原型继承、构造函数继承到ES6类继承，每一种方式都有其独特的应用场景。推荐使用ES6类继承，因为它不仅语法简洁，而且功能强大。通过本文的详细介绍，希望你能对JavaScript的继承机制有一个全面的理解，并能够在实际项目中灵活应用。

在团队协作的项目中，良好的项目管理系统是必不可少的。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够帮助团队更高效地管理和协作，提升整体开发效率。