ES6 classes(类)

我们在编程过程中常常用到面向对象,对象创建实例这个方法,但是es6中给我封装了一个class类
下边给大家介绍一下!

Ecmascript5方法

//万事万物皆对象
        //1.类是由对象(抽象)泛化出来的
        //2.对象是由类创建出来的
        //3.对象叫类的具体实例
        function Person(name,age){
            this.name=name,
            this.age=age
        }
        Person.prototype.run=function(){
            console.log(this.name+" 我会跑")
        }

        var weiwei=new Person("weiwei",21);
        console.log(weiwei)
        
        function SuperMan(name,age,sex,body){
            //Person.apply(this,arguments);//继承了父类的属性
            Person.call(this,name,age,sex)//apply 传进来的是数组集合,call传进来的是数组

            //自己的属性
            this.body=body;
        }


        SuperMan.prototype=Object.create(Person.prototype);//继承了父类的方法

        //自己的方法    多态
        SuperMan.prototype.fly=function(){
            console.log("我会飞");
        }
        var chaoren=new SuperMan("大刚",24,"男","大")

es6方法

ES6 中有 class 语法。值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法糖表现形式。

//1.es6提供了类来创建面向对象编程
        class Student{
            constructor(name,age){
                this.name=name;
                this.age=age;
                }
                run(){
                    console.log(this.name+" 跑啊跑")
                }
        }
       
        class SuperMan extends Student{
            constructor(name,age,xh){
                super(name,age);  //同上call
                this.xh=xh;
            }
            eat(obejectName){
                    console.log(this.name+" 喜欢吃"+obejectName)
                }
            get  xm(){
                return this.name
            }
            set  xm(value){
                //console.log(value)      //设置xm属性
                this.name=value;
            }
            static shangxue(){
                console.log("快快上学去");   //类的方法(只能类用),静态方法,对象实例不能用
            }
        }   
        let student1 = new Student('咪咪',18);
        let student2 = new SuperMan("小明",21,007)
        student2.eat("苹果");  
         //set  get  方法  
        console.log(student2.xm)    //get  调用方法不用括号();  get获取
        student2.xm="小红"
        console.log(student2.xm)
       // student2.shangxue()
        SuperMan.shangxue();

函数中使用 static 关键词定义构造函数的的方法和属性:
ES6 中有 class 语法。值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性

上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

关键字 class, extends, super


青石巷
259 声望10 粉丝

js/jq/node/es6/vue/react/Angular