ES6面向对象类,静态和动态

本文将探讨ES6中引入的面向对象编程特性,重点解析类的概念,包括类的声明、实例化,以及静态和动态方法的使用,帮助开发者更好地理解和应用ES6的面向对象特性。

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

ES6面向对象-类

创建类:
     class Box{
        a=1;
        constructor(a,b){
            console.log(a,b);
        }
        play(){

        }
    }
构造函数:constructor
    
    1.构造函数就是实例化对象时执行的函数,即new 类名()
    2.所有类中的构造函数都叫constructor
    3.当我们new 类名()时,就是执行了constructor这个函数
        如let b=new Box(5,10);
    4.对象中构造函数与当前对象的类是相同
        (1)console.log(b.constructor===Box);//true
        (2)var arr=[1,2,3];
            console.log(arr.constructor===Array);//true
        (3)var date=new Date();
            console.log(date.constructor===Date);//true
        (4)var str="aaaa";
            console.log(str.constructor===String);//true
        (5)var bool=true;
            console.log(bool.constructor===Boolean);//true
        用法举例:
            var ul=document.querySelector("ul");
            ul.addEventListener("click",clickHandler);
            function clickHandler(e){
                //此时想要判断点击的具体对象时,下行可以排除LI
                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   所有元素
    5.但是对于js来说,构造函数有且仅有一个,并且任何构造函数的名字固定是constructor,可以认为constructor与类名相等
    6.如果不需要执行任何内容,类中的构造函数可以默认不填写
        class Box{
            a=1;
            play(){
                console.log(this.a);
            }
        }
        let b=new Box();
        b.play();//打印1
        
        即,当需要在实例化对象时就需要初始化一些内容或者执行一些内容时就需要设置constructor函数;如果实例化时不需要执行任何内容,可以默认不填写。
    7.类中通过static设置的静态属性和静态方法,都只能使用类调用这种方式
     (1)class Box{
            a=1;
            static a=2;
        }
        let b=new Box();
        console.log(b.a);//打印1
        console.log(Box.a);//打印2
     (2)class Box{
            a=1;
            static a=2;
            constructor(_a){
                this.a=_a;
            }
            play(){
                console.log(this.a);
            }
        }
        var o1=new Box(5);
        var o2=new Box(6);
        console.log(o1,o2);//打印:Box {a: 5} Box {a: 6}
        类当中的属性,在实例化时会设置给实例化的对象
        Box类中的属性a,因为实例化生成了o1和o2两个对象,因此,o1和o2两个对象都拥有了a属性
        这个对象的属性现在就属于这两个各自的对象了,他们没有任何关系
        他们都有这个a属性,属性值是各自的

        当执行:
        o1.play();//打印5
        因为,play()中的this就是执行当前函数的对象,即是o1。
        同样的,构造函数执行时,this就是创建的对象,即constructor下的this也是o1。
        例如:var arr=new Array();
                arr.push(1);
                arr.push(2);

        而:Array.from();
            Array.isArray();
        则是静态方法。
        所有的静态属性和静态方法都不能通过实例化的对象调用;
        需要通过类来调用,静态属性和静态方法和实例化的对象没有任何关系,是类的专属属性和方法;
        因此对于类来说这个属于独立属性和方法;
        一般静态的方法是用来解决一系列该类型的方法;
        解决具体类型的方法,不是解决某个具体对象的方法;
        静态属性,一般用于存储该类型的一系列通用的属性变量;
        这种存储,在类创建的时候就已经变成全局的了,可以在任何地方调用,并且不会被自动销毁。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值