ECMAScript6中的class关键字

发布于:2022-11-28 ⋅ 阅读:(219) ⋅ 点赞:(0)

  在《JavaScript(13):创建对象的8种方法》中,我总结了8种创建对象的方法,现在几乎都忘记得差不多了,如果不翻看以前的资料,还真想不起来有那些创建方法,Javascript的语言元素看似不多,但要灵活掌握与运用的确比其他语言要费功夫的多,也因为要熟悉各种的语法糖。

  今天在学习ECMAScript6的关键字的时候,想起了以前的创建方法,因为要对比着学,所以就尝试着使用ECMAScript5的方法来创建对象。

    <script>
        {
            //EAMCScript5的对象创建方法
            function Student(name,age){
                this.name=name;
                this.age=age;
                Student.Type='理科生';
                Student.counter;
                this.Subject=function(){
                    console.log("科目:数理化。");
                }
            }

            Student.BaseSubject=function(){
                console.log("语文。");
            }

            Student.Register=function(){
                if( ! ( Student.counter>=0 ) ){  Student.counter=0;}
                Student.counter=Student.counter+1;
                console.log("注册号码:"+Student.counter);
            }

            Student.prototype.SelfIntroduction=function(){
                    console.log("我是"+Student.Type+"的第"+Student.counter+"号学生,我叫"+this.name+",今年"+this.age+"岁。");
            }

            let p1=new Student("小明",12);
            Student.Register();
            p1.Subject();
            Student.BaseSubject();
            p1.SelfIntroduction();

            let p2=new Student("小宋",9);
            Student.Register();
            p2.Subject();
            Student.BaseSubject();
            p2.SelfIntroduction();
        }
    </script>

  输出结果:

  注意点:

  ⑴ 使用ECMAScript5语法在创建对象的时候,需要注意的是静态属性和静态方法的创建,因为它们都只属于类而不属于对象,在具体对象中调用静态属性和静态方法程序会报错。

            p1.BaseSubject();//Uncaught TypeError: p1.BaseSubject is not a function
            console.log(p1.counter);//undefined

  ⑵ 在写对象的属性和方法的时候,将这些属性和方法写到person的函数体中,因为这些都是new动作要执行的。

  (3) 在写类的静态属性和静态方法的时候,最好将这些方法和属性写到person的函数体外,因为这些属性和方法属于类独有的。​​​​​​​

  (4) 在原型链上挂载属性和方法,所有继承都可以使用。​​​​​​​

​​​​​​​

  使用EAMCScript6的class来创建类就很方便了,与其他的语言差不多了。

    class Student{
        static Type='理科生';
        static counter=0;

        constructor(name,age){
            this.name=name;
            this.age=age;
            Student.counter=Student.counter+1;
        }

        static BaseSubject(){
            console.log("基础科目:语文。");
        }

        static Register(){
            Student.counter=Student.counter+1;
        } 

        Subject(){
            console.log("特长科目:数理化。");
        }

        SelfIntroduction(){
            console.log(`我是${Student.Type}的第${Student.counter}号学生,我叫${this.name},今年${this.age}岁。`);
        }
    }

    let p1=new Student("小明",12);
    p1.Subject();
    Student.BaseSubject();
    p1.SelfIntroduction();

    console.log('------------------------------')
    let p2=new Student("小宋",9);
    p2.Subject();
    Student.BaseSubject();
    p2.SelfIntroduction();

  输出结果:

  注意点:

  (1) 使用class来声明类

  (2) 使用constructor来定义初始化函数(只能有一个)

  (3) 使用static定义静态属性和静态方法

  (4) 使用extends继承父类,父类的方法可以重写,使用super调用父类的构造方法

        class Phone{
            constructor(brand,model){
                this.brand=brand;
                this.model=model;
            }
            communication(){
                console.log(`我是${this.brand}的${this.model}手机,可以拨打语音电话和发短信。`);
            }
        }

        class SmartPhone extends Phone{
            constructor(brand,model,price){
                super(brand,model);
                this.price=price;
            }
            playgame(){
                console.log(`我是${this.brand}的${this.model}手机,可以玩游戏。`);
            }
        }

        const RongYao=new SmartPhone('华为','Mate10',2999);
        RongYao.communication();
        RongYao.playgame();

//输出结果:
我是华为的Mate10手机,可以拨打语音电话、视频电话、发短信、上网。
ES6_Class1.html:112 我是华为的Mate10手机,可以玩游戏。

  (5) 私有属性,get和set方法

        class Phone{
            #Type;
            get Type(){
                return this.#Type;
            }

            set Type(value){
                this.#Type=value;
            }

            constructor(brand,model){
                this.brand=brand;
                this.model=model;
            }
            communication(){
                console.log(`我是${this.brand}的${this.model}手机,是${this.#Type},可以拨打语音电话和发短信。`);
            }
        }

        const CECT=new Phone('CECT','800');
        CECT.Type="智能手机";
        CECT.communication();

//输出结果
我是CECT的800手机,是智能手机,可以拨打语音电话和发短信。

本文含有隐藏内容,请 开通VIP 后查看