ES6面向对象

constructor  构造函数

 

        // 构造函数就是new 类名  实例化对象时执行的函数

        // 所有类中的构造函数都叫constructor

        // 当我们new 类名()就是执行了constructor这个函数

        // let b=new Box(5,10);

        // 对象中构造函数与当前对象的类是相同

        // console.log(b.constructor===Box);

 

代码演示

 

        // var arr=[1,2,3];
        // console.log(arr.constructor===Array);
        // var date=new Date();
        // console.log(date.constructor===Date);

        // var str="aaaa";
        // console.log(str.constructor===String);

        // var bool=true;
        // console.log(bool.constructor===Boolean);

        // var ul=document.querySelector("ul");
        // ul.addEventListener("click",clickHandler);
        function clickHandler(e){
            // if(e.target.nodeName!=="LI") return;
            // if(e.target.constructor!==HTMLLIElement) return;
            // if(e.target.constructor===HTMLUListElement) return;
            // HTMLDivElement    div
            // var div=new HTMLDivElement();//不可以 因为这是接口
            // HTMLUListElement    ul
            // HTMLTableElement    table
            // HTMLTableRowElement   tr
            // HTMLTableColElement   td
            // HTMLBodyElement   body
            // HTMLDocument    document
            // HTMLElement   所有元素
        }
        

　构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。特别的一个类可以有多个构造函数 ，可根据其参数个数的不同或参数类型的不同来区分它们 即构造函数的重载。

        // let  arr=new Array();
        // let date=new Date();
        // let str=new String();

　

        // 对于语言来说，其他语言的构造函数比较丰富，可以有多个，并且传参可以不同

        // 但是对于js来说，构造函数有且仅有一个，并且任何构造函数的名字固定是constructor

        // 可以认为constructor与类名相等

　

        // class Box{
        //     a=1;
        //     // 如果不需要执行任何内容，类中构造函数可以默认不填写
        //     play(){
        //         console.log(this.a);
        //     }
        // }

        // let b=new Box();
        // b.play();

　　

        class Box{
            // 这种属性叫做对象属性,相对于static来说他就是动态属性
            a=1;
            // static  静态的
            // 通过static设置的静态属性和静态方法，都只能使用类调用这种方式
            static a=2;
            constructor(_a){
                // 构造函数执行时,this就是创建的对象
                this.a=_a;
            }
            play(){
                console.log(this.a);
                // this是什么   this就是执行当前函数的对象
            }
            // 静态方法
            static run(){
                //虽然也可以在这里写this,但是我禁止大家在这里使用this
                // 禁止在静态方法中写this
                console.log(Box.a);
            }
        }

        // let b=new Box();
        // console.log(b.a);
        // console.log(Box.a);

        // 类当中的属性，在实例化时会设置给实例化的对象
        // Box类中的属性a，因为实例化生成了o1和o2两个对象,因此,o1和o2两个对象都拥有了a属性
        // 这个对象的属性现在就属于这两个各自的对象了,他们没有任何关系
        // 他们都有这个a属性,属性值是各自的
        // var o1=new Box(5);
        // var o2=new Box(6);
        // o1.a=100;
        // o2.a=1000;
        // o1.play();
        // o2.play();
        // console.log(o1,o2);

　　ES6面向对象的继承

class A{
            a=0;
            b=0;
            static abc=10;
            constructor(_a,_b){
                this.a=_a;
                this.b=_b;
            }
            sum(){
                this.a++;
                this.b++;
                console.log(this.a+this.b);
            }
            run(){
                console.log("aaaaa");
            }
        }
        class B extends A{
            // 在js中静态属性和方法也可以继承
            c=0;
            constructor(_a,_b,_c){
                // 如果继承后，写构造函数必须写
                super(_a,_b);//超类的构造函数，执行了父类的构造函数，并且传参进入
                this.c=_c;
            }
            count(){
                console.log(this.a*this.b);
            }
            // 因为继承后有sum的方法了，如果这样写，就相当于将这个sum的方法重写覆盖
            // 不会再执行超类的sum方法，而只执行当前sum方法
            sum(){
                this.a+=2;
                this.b+=2;
                console.log(this.a+this.b);
            }
            // 既可以执行超类中原有的run方法，又可以在这个基础上增加自己新内容
            run(){
               super.run();//执行了超类的run方法
               console.log("bbbb");
            }
        }

        
        let o1=new A(3,5);
        // o1.sum();
        // o1.run();

        let o2=new B(6,7,10);
        // o2.sum();
        // o2.count();
        // console.log(B.abc);
        o2.run();

　　

        // 继承后的类,方法有三种处理

        // 1完全继承  不需要重写这个方法,自动就有,超类的方法执行什么,这个类就会执行什么

        // 2重写覆盖  只需要在这个类中重写这个方法就可以覆盖继承过来的内容

        // 3在原方法中增加新的内容   重新该方法,并且执行super.方法名这样就可以执行超类方法,后面可以自己添加