美文网首页
承接上篇博文es6中的面向对象

承接上篇博文es6中的面向对象

作者: 追key | 来源:发表于2018-04-10 21:59 被阅读0次

    ES6对象与ES5对象的差别

    晴-小雨 微风 温度 12-24°C

    在es6中的面相对象与es5中的面向对象的区别是极大的,ea6中的面相对象则更像原汁原味的后端语言像java,c++等,而且在es5中的class保留字,在es6中也成了实际有效的关键字。

    我们来做个对比,

    es5中创建一个对象需要用函数的形式去仿造后段语言中对象的形式去造对象:

    function ren(name,age){
    
        this.name=name;
    
        this.age=age;
    
    }
    
    ren.prototype.aet = function(foot){
    
        console.log(this.name+"aet"+foot);
    
    }
    
    var xiaoming = new ren("xiaoming",24);
    
    xiaoming.aet("面包");
    
    /*这是es5中 主流创建对象的方法之一,方法写在原型链中*/
    
    
    
    
    
    
    
    
    
    而es6中造对象则更为直观与简便,
    
    class  ren(){
    
        //先创建构造函数
    
        constructor(name,sex,age,id){
    
            this.name=name;
    
            this.sex=sex;
    
            this.age=age;
    
            this.id=id;
    
    }    
    
    //ES6中的对象的方法不需要单独写在原型链中
    
         say(){
    
            console.log(this.name+"说话");
    
        }
    
        //ES6中多了静态方法的声明与使用,静态方法是实例对象无法调用的,是通过原型.方法名进行调用,静态方法 多数用于存储 公共方法,比如说要给 这一批 同类对象 进行排序等
    
        static paixu(){
    
            console.log(this);
    
        }
    
    }
    
    let ren1=new ren("小王","男",18,"10010");
    
    //输出一下该对象
    
    console.log(run1);
    
    //调用ren1对象的say方法
    
    ren1.say();
    
    //调用原型中的排序方法,该方法在此处并没有实际作用
    
    ren.paixu();
    
    
    
    //ES6中的对象继承,与ES5不同,ES6中的继承 是与后端语言十分相像,
    
    // 但是这里的继承  格式 是   class + 子类名 + extends + 基类 {};
    
    class student extends ren{
    
    //这里需要注意  构造函数的继承  需要 这样写
    
    // constructor (参数){
    
        super(基类参数);
    
        ***************
    
    }
    
        constructor(name,sex,age,id,sid){
    
        super(name,sex,age,id);
    
        this.sid=sid;
    
    }
    
        kaoshi(){
    
        console.log(this.name+"考试");
    
    }
    
    let student1 = new student();
    
    student1.name="xiaoming";
    
    student.say();
    
    console.log(studnet1);
    
    }
    

    相关文章

      网友评论

          本文标题:承接上篇博文es6中的面向对象

          本文链接:https://www.haomeiwen.com/subject/uikohftx.html