小白学 VUE 系列Class类使用

Class类

JavaScript语言的传统方法是通过构造函数，定义并生成新对象。function既是对象，对象既是function，没有class的概念。ES6提供了更接近传统语言的写法，比如:JAVA、PHP等后端语言，引入了Class( 类 ) 这个概念，作为对象的模板。通过class关键字，可以定义类。可以实现:单例模式、访问器属性、静态方法、extends继承

ES5类定义写法

  //定义类
    function Person(name,age){
        //属性
        this.name=name;
        this.age=age;
    }
    //定义方法
    Person.prototype.show=function(){
        console.log(this.name,this.age);
    }
    //使用
    var p1=new Person("张三",30);
    p1.show();
    var p2=new Person("李老五",35);
    p2.show();

ES6写法

 class Person{
       //构造函数
       constructor(name,age){
           this.name=name;
           this.age=age;
       }
       //方法
       show(){
           console.log(this.name,this.age);
       }
   }
   //使用
   var p1=new Person("张三",30);
   p1.show();
   var p2=new Person("李老五",35);
   p2.show();

表达式形式定义

   let Person = class {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        show() {
            console.log(this.name, this.age);
        }
    }
    //使用
    var p1=new Person("张三",30);
    p1.show();
    var p2=new Person("李老五",35);
    p2.show();

单例模式

  //单例模式
    let Person=new class{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
    }("张三",30);
    console.log(Person.name)

监听属性值变化

class Person{
        //构造函数
        constructor(name,age){
            this.name=name;
            this.age=age;
            this.ageText="";
        }
        set age(val){

            if(val>18){
                this.ageText="成年人";
            }else{

                this.ageText="未成年";
            }

        }
        get age(){

            return this.ageText;
        }
    }
    var p1=new Person("张三",30);
    p1.age=10;
    console.log(p1.age);

静态方法

  class Person{
        static show(){
            console.log("静态调用方法");
        }
    }
    Person.show();

继承

  //继承
    class Person{
        constructor(name){
            this.name=name;
        }
        run(){
            console.log(this.name+"在跑步");
        }
    }
    class SuperMan extends Person{
        constructor(name){
            super(name);//调用父类的构造函数
        }

    }
    let s1=new SuperMan("夏松");
    s1.run();

 class Person{
        constructor(name){
            this.name=name;
        }
        run(){
            console.log(this.name+"在跑步");
        }
    }
    class SuperMan extends Person{
        constructor(name){
            super(name);//调用父类的构造函数
        }
        run(){
                        super.run();
            console.log(this.name+"在唱歌")
        }

    }
    let s1=new SuperMan("夏松");
    s1.run();