首页 > > 网页制作 > css >

ES6--class基本使用

2018-06-24 00:45:30来源：未知阅读 ()

类定义

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