2019-04-02(class)

    =======================ES5==============================

    /*

    //函数名和实例化构造名相同且大写

    function Person(name,age) {

      this.name = name;

      this.age = age;

    }

    Person.prototype.say = function() {

      return `我的名字叫${this.name}今年${this.age}岁了`

    }

    var obj = new Person('小白',12)  // 通过构造函数创建对象,必须使用new运算符

    console.log(obj.say())  // 我的名字叫小白今年12岁了

    */


2019-04-02(class)_第1张图片
es5

==========================ES6==============================

    /*

    class Person {  // 定义名为Person的类

      constructor(name,age) {  // 构造方法,用来接收参数

        this.name = name;

        this.age = age;

      }

      say() { // 这是一个类的方法,注意不要加上function

        return `我的名字叫${this.name}今年${this.age}岁了`

      }

    }

    var obj1 = new Person('小黑',13);

    console.log(obj1.say())  // 我的名字叫小黑今年13岁了

    */

    // 注意项:

    // 1、在类中声明方法的时候,千万不要给该方法加上function关键字

    // 2、方法之间不要用逗号分隔,否则会报错

   1、==================super 关键字================================

    // super 作为函数调用时,代表父类的构造函数

    // super 作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类

    /*

      class Person {

      constructor(name) {

        this.name = name;

      }

      height() {

        console.log(1,'height')

      }

      static weight() {

        console.log(2,'weight')

      }

    }

    class Student extends Person {

      constructor(name,age) {

        super()  // 代表父类的构造函数

        this.age = age;

      }

      height() {

        super.height() // 指向父类的原型对象

      }

      static weight() {

        super.weight()  // 指向父类

      }

    }

    */

    // super 关键字用于调用一个对象的父对象上的函数

    // super.prop 和 super[expr] 表达式在类 和 对象字面量 任何方法中都是有效的

    // 在构造函数中使用时,super关键字单独出现,必须在可以使用this关键字之前使用。此关键字也可以调用父对象上的函数


  2、=======================static 关键字==========================

  // 类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前面加上static关键字,

  // 就表示该方法不会被实例继承,而是直接通过类类调用,这就称为‘静态方法’

  // 静态方法调用直接在类上进行,而在类的实例上不可被调用。

  // 静态方法通常被用于创建 实用/工具 函数

  /*

    class Person {

      constructor(name) {

        this.name = name;

      }

      height() {

        console.log(1)

      }

      static weight() {

        console.log(2)

      }

    }

    class Student extends Person {

      constructor(name,age) {

        super() // 代表父类的构造函数

        this.age = age;

      }

      height() {

        super.height() // 指向父类的原型对象

      }

      static weight() {

        super.weight()  // 指向父类

      }

    }

    var obj2 = new Student('bai',12)

    Student.weight() // 可以知道静态方法是通过类名直接调用的

    */

  // 静态方法中也可以调用另外一个静态方法,使用关键字this(此时this指向类Person),普通方法中只能使用类来调用

  class Person {

    static staticMethods() {

      return `我是第一个静态方法`

    }

    static staticAnotherMethods() {

      return `${this.staticMethods()}-----我调用你啦哈哈哈哈哈`

    }

  }

  console.log(Person.staticMethods())  // 我是第一个静态方法

  console.log(Person.staticAnotherMethods()) // 我是第一个静态方法-----我调用你啦哈哈哈哈哈


2019-04-02(class)_第2张图片
es6

你可能感兴趣的:(2019-04-02(class))