Javascript 如何实现继承?_javascript 编写一个b继承a的方法?-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangyu812/article/details/124557846

本文介绍了JavaScript中实现继承的方法，包括ES5的原型继承、借用构造函数和组合继承，以及ES6通过`class`和`extends`关键字进行的类继承。通过`super()`调用父类方法是ES6继承的一大特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript 如何实现继承?

答：JS 继承实现⽅式也很多，主要分 ES5 和 ES6 继承的实现

1. 先说⼀下 ES5 是如何实现继承的

ES5 实现继承主要是基于 prototype 来实现的，具体有三种⽅法

⼀是实例继承：即 B.prototype=new A() 让 b 的原型等于 a 的实例

function Animal() {
            this.type = "动物";
        }
        Animal.prototype.run = () => {
            console.log("动物都会跑");
        };

        function Dog(name) {
            this.name = name;
        }
        Dog.prototype = new Animal();
        Dog.prototype.constructor = Dog;
        //实例继承后再让constructor指回dog
        Dog.prototype.wang = () => {
            alert("修勾汪汪叫");
        };
        let dog1 = new Dog();
        console.log(dog1.type);
        dog1.run();

⼆是借⽤构造函数继承(call 或者 apply 的⽅式继承)

function B(name,age) {

A.call(ths,name,age)

}

function Animal(type) {
            this.type = type;
        }
        Animal.prototype.run = () => {
            console.log("动物都会跑");
        };
        let cat = new Animal("小猫");
        alert(cat.type)

        function Dog(color, type) {
            Animal.apply(this, [type]) 

        //apply在这里会让animal方法执行并且把this变成了dog的实例
        // 也能写成：
        // Animal.call(this,type) //apply在这里会让animal方法执行并且把this变成了dog的实例
        // 这里 可以用apply和call 都可以 区别是 apply的第二个参数是一个数组，call的参数可以用逗号隔开写
        //让animal里的this指向dog的实例

            this.color = color;
        }

        Dog.prototype.wang = () => {
            alert("修勾汪汪叫");
        };

        let dog2 = new Dog("黄色", "小狗");
        console.log(dog2.type);
        console.log(dog2.color);
        // dog2.run()//报错 因为run不在构造函数里
        // 第二种继承 是借用构造函数继承 这种继承只能继承父类构造函数的里的属性或者方法
        // 第二种比第一种好处是 要继承的父类里的构造函数里的属性也可以自定义

三是组合继承

组合继承是结合第⼀种和第⼆种⽅式

2. 再说⼀下 ES6 是如何实现继承的

ES6 继承是⽬前⽐较新，并且主流的继承⽅式，⽤ class 定义类，⽤ extends 继承类，⽤ super()表示

⽗类,【下⾯代码部分只是熟悉，不⽤说课】

例如：创建 A 类

class A ｛

constructor() {

//构造器代码，new 时⾃动执⾏

}

⽅法 1( ) { //A 类的⽅法 }

⽅法 2( ) { //A 类的⽅法 }