class

作者: Haiya_32ef | 来源:发表于2018-04-02 15:55 被阅读0次
  • 写法
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
  • 1 注意
    • 类的所有方法都定义在类的prototype属性上面
    • 类的内部所有定义的方法,都是不可枚举的
    • 定义“类”的方法的时候,前面不需要加上function这个关键字
    • 类的方法之间不需要逗号分隔,加了会报错
  • 2 类的constructor方法:
    1 当类没有constructor方法时,会添加空的constructor方法
    2 constructor默认返回this对象,与es5的构造函数是一样的
  • 2.1 类的实例属性
    1 实例属性可以写在constructor中,也可以写在最顶部
    class foo {
      bar = 'hello';
      baz = 'world';
    
      constructor() {
        // ...
      }
    }
    
  • 3 类的实例对象
    • 生成类的实例时必须使用new关键字,且类不能自己调用;
  • 4 类的原型对象
    • get和set关键字对属性设置存取函数,拦截该属性的行为
    class MyClass {
      constructor() {
        // ...
      }
      get prop() {
        return 'getter';
      }
      set prop(value) {
        console.log('setter: '+value);
      }
    }
    
    let inst = new MyClass();
    
    inst.prop = 123;
    // setter: 123
    
    inst.prop
    // 'getter'
    
    • 里面的方法默认绑定this为类的实例,可是如果单独取出该方法,会丢失this指针,在react中就是如此。为了指向正确的this,可以使用箭头函数,bind方法和proxy代理
  • 5.1 静态方法
    • 1 使用static关键字来描述类的静态方法,在静态方法中this指向类本身
    • 2 子类可以继承父类的静态方法
    • 3 在子类的方法中可以使用super来调用父类的静态方法
  • 5.2 静态属性
    • 1 目前只有这种写法,有个提案用static来代表静态属性
    class Foo {
    }
    
    Foo.prop = 1;
    Foo.prop // 1
    
  • 5.3 私有属性和私有方法
    • 有个提案使用#表示私有属性和私有方法
  • 6 new.target属性
    • 1 该属性一般用在构造函数之中,返回new命令作用于的那个构造函数
    class Rectangle {
      constructor(length, width) {
        console.log(new.target === Rectangle);
        this.length = length;
        this.width = width;
      }
    }
    
    var obj = new Rectangle(3, 4); // 输出 true
    
  • 2 如果子类继承父类时,new.target会返回子类
class Rectangle {
 constructor(length, width) {
   console.log(new.target === Rectangle);
   // ...
 }
}

class Square extends Rectangle {
 constructor(length) {
   super(length, length);
 }
}

var obj = new Square(3); // 输出 false
  • 7 类的继承
    • 使用extends关键字实现继承
    • 在继承时,必须在使用this之前调用super方法
      这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法, 然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。
  • 7.1 super关键字
    • super当函数使用,只能在constructor中使用,此时代表父类的构造函数
    • 作为对象使用,在普通方法中指向父类的原型对象(拿不到父类实例对象的属性),在静态方法中,指向父类本身;
    • 子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。在子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例。
    • 由于this指向子类实例,所以如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。
class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();

相关文章

网友评论

      本文标题:class

      本文链接:https://www.haomeiwen.com/subject/owfxhftx.html