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类的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!