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.方法名这样就可以执行超类方法,后面可以自己添加

posted @ 2020-04-11 21:26 cruor 阅读(189) 评论(0) 收藏举报

刷新页面返回顶部

下个村

ES6面向对象

公告