js实现继承常用的几种方式

最新推荐文章于 2025-02-13 11:17:46 发布

一枚攻城狮

最新推荐文章于 2025-02-13 11:17:46 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： js实现继承

本文链接：https://blog.youkuaiyun.com/qq575792372/article/details/83624238

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了JavaScript中实现继承的多种方法，包括原型链、call、apply及ES6的class语法。通过具体示例，展示了如何使用这些技术创建继承自基类的子类，并保留或扩展基类的方法。

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

js实现继承的方式，有原型链，call，apply，es6的class，个人感觉这几个用的最多，随着es6以及后续版本的不断发展，这种偏向后台的语法糖写法博主最为喜欢，博主也是做java出身的哈。

<!DOCTYPE html>
<html>
<head>
    <meta chart="utf-8" />
    <title>js实现继承常用的几种方式</title>
</head>
<body>
    <script>
        // 定一个Animal的基类，子类会继承say()方法输出自己的信息
        function Animal(name) {
            this.name = name || "Animal";
            this.say = function() {
                console.log("i'm ", this.name, " 来自对象：", this)
            }
        }

        // 原型链实现继承
        function Cat1() {}
        Cat1.prototype = new Animal();
        Cat1.prototype.name = "Cat1";
        // 运行
        var cat1 = new Cat1();
        cat1.say();

        // 使用call来实现继承
        function Cat2(name) {
            Animal.call(this, name);
        }
        // 运行
        var cat2 = new Cat2("Cat2");
        cat2.say();

        // 使用apply来实现继承
        function Cat3(name) {
            Animal.apply(this, [name]);
        }
        // 运行
        var cat3 = new Cat3("Cat3");
        cat3.say();

        // 使用es6的语法class来实现继承，需要包含构造函数
        class Cat4 extends Animal {
            constructor(props) {
                super(props);
            }
        }
        // 运行
        var cat4 = new Cat4("Cat4");
        cat4.say();

    </script>
</body>
</html>

下面是运行效果：