ES6--class基本使用

时间 2019-12-11

原文原文链接

类定义es6

　　技术通常水平有限，有什么错的地方，望你们指正。工具

　　之前咱们使用ES5标准定义一个构造函数的过程以下：学习

  function Person(name,age){
      this.name = name;
      this.age = age;
  }
  Person.prototype.say = function(){
      console.log("你好，我是"+this.name)
  }
  Person.prototype.show = function(){
      console.log("年龄"+this.age+"一名小学生！");
  }

　　一般首字母大写的函数咱们称为构造函数(并非一种语法约束，只是一种约定俗成的规律)，属性写在方法里面，函数写在原型上面，这样实例化(new操做)出来的对象既有属性也有方法。this

　　ES6为了更明朗构造函数这个概念了多了一个class语法，它会帮咱们完成上面的一系列操做，咱们能够把它看作是构造函数的变身，一般咱们称为类。JS中的类同函数同样也有两种声明方式：spa

　　类声明：prototype

  class Person{
  }

　　类表达式：code

var Person = class {
}

　　如今咱们利用类来对开始的构造函数进行变形：对象

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("你好，我是"+this.name);
      }
      show(){
          console.log("年龄"+this.age+"一名小学生！");
      }
  }

　　咱们实例化一个Person的对象，是能够正常使用的：blog

  var me = new Person("zt",23);
  me.say();
  me.show();

　　原来的构造函数如今变成了一个类，constructor就是构造函数对参数进行初始化的变形，say和show就是构造函数原型上面的函数。

　　类就是对有一样特征的事物的一个统称，在JS的类里面只能包括函数，不能包含别的，若是咱们须要给类添加一个属性只能经过get/set存取器方法来实现：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      get message()
      {
          return "name:"+this.name+",age:"+this.age
      }
  }
  var me = new Person("zt",23);
  console.log(me.message);

　　constructor函数在类里面最多只能有一个，它的主要职能就是初始化属性，在执行new操做时先经由constructor函数将参数设置为对象的属性，若是不须要存在初始化属性那么constructor能够省略。

函数修饰

　　类里面定义的函数能够被修饰符修饰最多见的就是static。

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      static say(){
          console.log("由类调用");
      }
  }
  Person.say();

　　一旦一个函数被static修饰，那么这个函数就属于类了，能够直接由类名来调用Person.say()。而普通函数是不能直接由类进行调用的，普通函数只能由实例化的对象来调用，被static修饰的函数是不能被实例化的对象调用的只能经过类直接来进行调用，这种函数等价于咱们之前直接利用Person.fn = function(){}定义工具函数同样。

类继承

　　一个类能够继承一个类，被继承的类咱们通常称为父类，另外一个称为子类，经过extends来实现：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      static say(){
          console.log("我是"+this.name);
      }
  }
  class Student extends Person{
  }

　　新建立的Student类是子类，Person类是父类，子类会拥有父类里面的全部函数(constructor和其余函数)，子类继承来的函数都是能够直接使用的：

  var stu = new Student("zt",23)
  stu.say();

　　子类里面没有声明任何函数，仍然能够调用say，say就是经过继承得来的。

　　子类能够定义本身的特有的函数，若是和父类函数同名那么就父类的函数就不会生效而是使用子类自身的函数（就是ES5原型链查找的套路）：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("我是"+this.name);
      }
  }
  class Student extends Person{
      say(){
          console.log("我是子类的say函数！")
      }
      fn(){
          console.log("我是子类函数fn")
      }
  }
  var stu = new Student("asaszt",23)
  stu.say();//我是子类的say函数！
  stu.fn();//我是子类函数fn

在子类中使用super

　　子类会继承父类的constructor函数来初始化自身的属性，一样也能够添加自身特有的属性，可是必须使用super来完成这个操做：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
  }
  class Student extends Person{
      constructor(name,age,sex){
          super(name,age);
          this.sex = sex;
      }
  }
  var stu = new Student("zt",23,"男")
  console.log(stu.sex);//男

　　在子类中使用constructor来初始化属性，首先使用super来对可继承的属性进行初始化，而后在经过this添加自身特有的属性，this只有在调用super()以后才会存在。

　　super一样能够调用父类的非静态函数（此时咱们能够把super看作是一个父类实例化出来的一个对象）：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("我是父类的say函数");
      }
  }
  class Student extends Person{
      constructor(name,age,sex){
          super(name,age);
          this.sex = sex;
      }
      say(){
          super.say();
          console.log("我是子类的say函数");
      }

  }
  var stu = new Student("zt",23)
  stu.say();//我是父类的say函数 我是子类的say函数