6,、面向对象Javascript的继承和多态，构造函数的继承和ECMA6class的继承笔记

本文链接：https://blog.youkuaiyun.com/qq_41877422/article/details/103741821

本文深入探讨了JavaScript中继承和多态的概念与实现方式，包括构造函数继承、原型链继承和ECMAScript 6的class及extends关键字使用，展示了如何创建和继承类，以及子类如何重写和扩展父类的方法。

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

Inheritance.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>继承和多态</title>
    <script>
        function Dog({name, type, age}){
            this.name = name;
            this.type = type;
            this.age = age;
        }
        //通过构造函数的原型添加方法
        Dog.prototype = {
            run : function(){
                alert(this.name + "会飞快的奔跑。");
            },
            showSelf : function(){
                alert(`这是一个${this.type}的，${this.age}岁的，叫${this.name}的小狗`);
            }
        }
        //分类更加细分的构造函数，继承
        function Teddy({name, type, age, color}){
            //this = new Object();
            //继承一级构造函数所有的属性
            //.call的方法强制将后面的this改成xiaohong
            //构造函数的伪装
            Dog.call(this, {
                name: name,
                type: type,
                age: age
            })
            //添加自己的属性
            this.color = color;
            //return this;
        }

        //Teddy.prototype = Dog.prototype;  //错误的写法子一级的函数添加方法的同时父一级也添加了，这不叫继承叫共享
        //正确写法（原型链继承），利用for in遍历让不同的对象拥有独立的原型 
        for(var funcName in Dog.prototype){
            Teddy.prototype[funcName] = Dog.prototype[funcName];
        }
        //在子一级 构造函数重写showSelf方法只在子一级生效，不影响父一级的构造函数的方法。
        //继承和多态是同一件事的两种完全不同的侧重
        //继承：侧重从父一级构造函数，集成到的属性和方法。
        //多态：侧重子一级自己重写和新增的属性和方法。
        Teddy.prototype.showSelf = function(){
            alert(`这是一个${this.type}的，${this.age}岁的，是${this.color}的，叫${this.name}的小狗`);
        }

        Teddy.prototype.showColor = function(){
            alert(this.color);
        }

        var xiaohong = new Teddy({
            name : "小花",
            type : "泰迪",
            age : 10,
            color : "红色"
        })

        //alert(xiaohong.name);
        // alert(xiaohong.type);
        //alert(xiaohong.age);
        // alert(xiaohong.color);

        xiaohong.showSelf();
        //xiaohong.showColor();

        var xaiohei = new Dog({
            name: "黑",
            type: "布拉多",
            age: 5
        });
        //alert(xaiohei.showColor); //共享的时候，小黑有color。继承的时候显示undefined
        xaiohei.showSelf();
    </script>

</head>
<body>
    
</body>
</html>

ECMA6中应用了class和extends继承方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>calss</title>
    <script>
        // function Person(name, sex, age){
        //     this.name = name;
        //     this.sex = sex;
        //     this.age = age;
        // }
        // Person.prototype.showSelf = function(){
        //     alert(`我是一个叫${this.name},今年${this.age}岁的${this.sex}孩`);
        // }
        //构造函数的继承
        //公务员Worker
        // function Worker(name, sex, age, job){
        //     //1、通过构造函数的伪装，继承父一级的属性.call或者.apply
        //     Person.call(this, name, sex, age);
        //     this.job = job;
        // }
        //2、原型链继承父一级的方法
        //<1>通过for....in....遍历
        // for(var funcName in Person.prototype){
        //     Worker.prototype[funcName] = Person.prototype[funcName];
        // }
        //<2>ECMA6新做的Object.create()
        //Worker.prototype = Object.create(Person.prototype)
        //<3>调用构造函数去继承
        // Worker.prototype = new Person();
        // Worker.prototype.showJob = function(){
        //     alert("我的工作是" + this.job);
        // }
        // var w1 = new Worker("张三","男", 28, "公务员");
        // w1.showSelf();
        // w1.showJob();





        //ECMA6class语法：封装class类
        class Person{
            //class属性添加在构造器中
            constructor(name, sex, age){
                this.name = name;
                this.sex = sex;
                this.age = age;
            }
            //之间添加函数
            showSelf(){
                alert(`我是一个叫${this.name},今年${this.age}岁的${this.sex}孩`);
            }
        }

        var p1 = new Person("张三", "男", 18);
        p1.showSelf();

        //extends继承
        class Worker extends Person{
            constructor(name, sex, age, job){
                //1、继承父一级的属性
                super(name, sex, age);
                this.job = job;
            }
            //extends已经继承了所有的方法，在这里直接写自己的方法就行
            showJob(){
                alert("我的工作是" + this.job);
            }
        }

        var p2 = new Worker("李四", "男", 28, "公务员");
        p2.showSelf();
        p2.showJob();



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