JavaScript-ES6之面向对象，子类的继承，关键字super.

最新推荐文章于 2022-09-15 17:12:33 发布

最好的人啊

最新推荐文章于 2022-09-15 17:12:33 发布

阅读量702

点赞数 3

分类专栏： JavaScript 文章标签：大数据 css3 前端 javascript visual studio code

本文链接：https://blog.csdn.net/qq_52499703/article/details/125666017

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

面向对象

说明：使用class关键词声明类，constructor为构造方法，一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加，this关键字则代表实例对象，getstr()为普通方法，不要用“function”，getstr()存在 prototype上。

p1.constructor === p1.prototype.constructor // true

    <script>
        //基础语法 通过class关键字
        class Person{

                 //我们可以定义一些公共的属性
                 title ='人的信息'

                 //定义一个静态的变量
                 static heigeht = 180;

                //定义属性 初始化属性 constructor用来定义属性
                 constructor(name,age){
                this.name = name;//this 指向的是当前的实列对象
                this.age = age;
            }
            // 定义方法/函数
            say(){
                // console.log(this.name+'能说话');
                // 函数是有返回值的
                return this.name+'能说话';//this指向当前的实列对象

            }
        }

        //1对象都是 new关键词 new出来的
        var p2 = new Person('李四',19);
        // 2类的方法使用
        var p2say = p2.say();
        console.log(p2say);
        //4类的属性使用 属性是打点调用
        console.log(p2.name);
        console.log(p2.title);

        //5静态变量的使用
        console.log(p2.height);//undefined
        console.log(Person.heigeht);//180
        //总结 static静态成员 不能被实列继承 所以实列大点是获取不到的 需要原型打点获取
        //总结 定义的这个 Person对象 我们称为  原型对象
        //p2 我们称它为 实列对象 指的就是 具体的实在对象

        // 6.继承
        //定义子类使用extends关键字  ManPerson 是子类 Person
        class ManPeerson extends Person{
            //私有属性
            #p = 123;
            //定义属性
            constructor(name,age,sex){
                this.name = name;
                this.age  = age;
                //因为name和age属性父类已经有了 这里就不需要像上面两行那样再重新写一遍
                //直接把name和age属性写在super里面就行
                this.sex = sex;
                super(name ,age);
            }
            //定义自己的方法
            say (){
                var str = '姓名'+this.name+'年龄:' + this.age + '能说话';
                console.log(str);
            }
        }
  </script>

子类的继承

Class 可以通过extends关键字实现继承，让子类继承父类的属性和方法。

ES6 规定，子类必须在constructor()方法中调用super()，否则就会报错。

除了私有属性，父类的所有属性和方法，都会被子类继承，其中包括静态方法。私有属性前面加#；

    <script>
        // class Father{
        //     constructor(){

        //     }
        //     money(){
        //         console.log(100);
        //     }
        // }

        // class Son extends Father{

        // }
        // var son  = new Son();
        // son.money();

            // 定义一个父类
            class father {
                constructor(name,age,sex){
                    this.name = name;
                    this.age = age;
                    this.sex = sex
                }
                information(){
                    console.log('姓名：'+this.name+'年龄:'+this.age+'性别'+this.sex);
                }
            }
            //定义一个子类
            class son extends father{
                constructor(name,age ,sex){
                    super(name,age,sex)//调用父类中的构造函数
                }
            }
            var son1 = new son("张三",19,'男')
            son1.information();
    </script>

子类继承父类方法同时扩展自己方法

利用super关键字调用父类的构造函数,
且必须在子类this之前调用

    <script>
        //父类有加法方法
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        //子类继承父类加法方法，同时，拓展减法方法
        class Son extends Father {
            constructor(x, y) {
         //利用super关键字调用父类的构造函数,
        // 且必须在子类this之前调用
                super(x,y)
                this.x = x;
                this.y = y;
            }
            subtract(){
                console.log(this.x - this.y);

            }
        }
        var son = new Son(9,6)
        son.subtract();
        son.sum();
    </script>

使用类的注意事项

//小结: 1.在ES6中类没有变量提升，所以必须先定义一个类，才能通过实例化对象
// 2.类里面的共有的属性和方法一定要加this使用
// 3.类里面的this指向问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <script>
        var that;
        var that1;
        var that2;
        class person {
            constructor(name, age) {
                // constructor 里面的this指向的是创建的实例对象
                that = this;
                this.name = name;
                this.age = age;
                this.btn = document.querySelector('button')
                this.btn.onclick = this.say;//点击之后调用函数say
            }
            say() {
                //这个say方法里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
                that2 = this;
                console.log(this);
                console.log(that.name);//that里面存储的是constructor里面的this
            }
            sport() {
                //这个sport里面的this 指向的是实例对象myname 因为myname调用了这个函数
                that1 = this;
                console.log(this);
            }
        }
        var myname = new person('张三', 19);
        myname.say();
        console.log(that === myname);
        myname.sport();
        console.log(that1 ===myname );
        //小结:  1.在ES6中类没有变量提升，所以必须先定义一个类，才能通过实例化对象
        //       2.类里面的共有的属性和方法一定要加this使用
        //       3.类里面的this指向问题
        //
    </script>
</body>

</html>

super关键字调用父类普通函数

// 小结：1.继承中，如果实例化子类输出一个方法，先看子类中有没有这个方法，如果有就执行子类的方法。
// 2.继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有就执行父类这个方法
// 3.继承中的属性或者方法查找原则-----就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //super 关键字调用父类普通函数
        // 1.定义一个父类
        class Father{

            say(){
                    return '我是父亲'
                }
        }
        //2.定义一个子类
        // class son{

        //     say(){
        //             console.log('我是儿子')
        //         }
        // }
        // var son1 = new son();
        // son1.say(); 
        //3.定义一个继承的子类son2
        class son2 extends Father{
            say(){
                console.log('我是儿子1');
                console.log(super.say()+'的儿子');//实例化的是儿子的say，通过super关键字调用了父类中的普通函数say
                // super.say() 就是调用父类中的普通函数 say()
            }
        }
        var son1 = new son2();
        son1.say();
        // 小结：1.继承中，如果实例化子类输出一个方法，先看子类中有没有这个方法，如果有就执行子类的方法。
        //       2.继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有就执行父类这个方法
        //       3.继承中的属性或者方法查找原则-----就近原则
        
    </script>
</body>
</html>