ES6–class基本用

类定义

  ES6完好无缺学习阮先生的ECMAScript6抱帮派。

  技术一般水平有限,有什么错的地方,望大家指正。

  以前我们采用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操作)出来的靶子既出总体性也发出方法。

  ES6为更明朗构造函数这个概念了大多了一个class语法,它见面支援咱做到点的平等多样操作,我们好管其看成是构造函数的变身,通常咱们称为类。JS中的接近和函数一样啊产生少数种植声明方式:

  类声明:

  class Person{
  }

  类表达式:

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的靶子,是足以健康下的:

  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函数

  欢迎关注自己的民众号互相交流:

图片 1