ES6中class类的示例分析

这篇文章主要介绍了ES6中class类的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

class 类

通过class可以定义类，新的class写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。

• 1 class　　声明类

• 2 constructor　　定义构造函数初始化

• 3 extends　　继承父类

• 4 super　　调用父级构造方法

• 5 static　　定义静态方法和属性

• 6 父类方法可以重写

es5通过 构造函数实例化 对象的方法

    // 人    function People(name, sex) {      this.name = name;      this.sex = sex;    }    // 这个height这种添加方式是属于函数对象的，不属于实例对象，这样的属性称之为静态成员    People.height = '180';    People.prototype.height1 = '100';    // 添加方法    People.prototype.play = function(){      console.log('打篮球');    }    let zn = new People('zhangning', '男');    zn.play();// 输出 打篮球    console.log(zn);    console.log(zn.height);// 输出 undefined     console.log(zn.height1);// 输出 100，必须通过prototype添加才能添加到实例对象上

通过class实现

    class People{      // 静态属性 static，对于static 标注的方法属于类，不属于实例对象      static height = '100';      static change(){        console.log('我可以改变世界');      }      // 构造方法 名字不能更改（在使用new People的时候会自动执行实例对象上的constructor方法）             constructor(name, sex){        this.name = name;        this.sex = sex;      }      // 添加方法必须使用该语法，不能使用es5的完整形式（play: function(){} 这种形式不支持，必须使用play()形式）      // 成员属性      play(){        console.log('打篮球');      }    }    let zn = new People('zhangning', '男');    console.log(zn);    console.log(zn.height);// undefined  static 标注的方法属于类，不属于实例对象    console.log(People.height);// 100

使用es5构造函数实现继承

    // 举例 chinese 继承 People 属性    function People(name, sex) {      this.name = name;      this.sex = sex;    }    People.prototype.play = function(){      console.log('打LOL');    }    function Student(name, sex, like, height){      // 通过call方法，改变this值，this指向chinese中的this，也就是chinese的一个实例对象      People.call(this, name, sex);      this.like = like;      this.height = height;    }    // 设置子集构造函数原型    Student.prototype = new People;// 这样就会有父级的一个方法    Student.prototype.constructor = Student;// 做一个校正，没有这行代码也无所谓    // 声明子类方法    Student.prototype.photo = function(){      console.log('去拍照');    }    // 实例化    const zn = new Student('zhangning', '男', '打篮球', '187');    console.log(zn)

使用es6 class 类 实现继承 及 父类方法的重写

    // 声明父类    class People{      // 父类构造方法      constructor(name, sex) {        this.name = name;        this.sex = sex;      }      // 父类成员属性      play(){        console.log('打LOL');      }    }    // 声明子类 使用extends 继承父类    class Student extends People {      // 构造方法      constructor(name, sex, like, height){        super(name, sex);// super 就是父类的constructor构造函数，这样调用        this.like = like;        this.height = height;      }      photo(){        console.log('去拍照');      }      // 对父类中的play方法进行重写，子类是不能去调用父类的同名方法的，      play(){        // super(); 不允许，在普通的成员方法里面是不能出现super()去调用父类的同名方法的，会报错，只能完全重写        console.log('我会打LOL，还会打篮球');      }    }    const zn = new Student('zhangning', '男', '打篮球', '187');    console.log(zn)

class 中 getter 和 setter 设置

    class People{      get like(){        return '打篮球';      }      set like(newVal){        // 通过传过来的newVal值，进行操作，改变 like        console.log('改变like值');      }    }    let p = new People();    console.log(p.like)// 输出 打篮球    p.like = 'LOL';// 然后通过 set like 进行操作

感谢你能够认真阅读完这篇文章，希望小编分享的"ES6中class类的示例分析"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!