ES6-class

作者: 吴高亮 | 来源:发表于2018-12-19 21:24 被阅读0次

    取值函数和存值函数;

        和ES5一样;同样通过set和get关键字;对某个属性进行存和取得拦截
    

    class MyClass{ constructon(){} get prop(){ return 'getter' } set prop(value){ return console.log('setter:'+value); } };
    var inst=new MyClass();
    inst.prop='123';
    //setter:123
    inst.prop
    //getter;
    上面代码中prop对应有相应的取值函数和存值函数;因此取存都被进行自定义了;


    存值和取值都是定义在Descriptor[描述]属性上的;例如如下代码

    class CustomHtmlElement{
    constructor(element){
    this.element=element;
    }
    get html(){
    return this.element.innerHTML;
    }
    set html(element){
    this.element.innerHTML=value;
    }
    };


    与函数一样;类可以使用表达式的形式定义;
    const MyClass=class Me{
    getClassName(){
    return Me.name;
    }
    };
    这个类的名字是MyClass;不是Me;Me只是在类的内部使用;代替当前这个类;
    let inst=new MyClass();
    inst.getClassName();//Me;
    Me.name//出错;Me is not defined;
    上面的代码说明;Me只是在函数的内部使用;如果内部没用的话;也可以直接省掉;
    const MyClass=class{}
    let person=new class{
    constructon(name){
    this.name=name;
    }
    sayName(){
    console.log(this.name);
    }
    }('张三');
    person.sayName();
    上面代码中,person是一个立即执行的类的实例。

    **注意事项:

    • 类和模块默认为严格模式;所以不需要使用use strict;

    • 不存在声明提升;
      new Foo();//Error;
      class Foo();
      上面个的代码中;Foo类使用在前;定义在后;这样报错;ES6不会把类的声明提升到头部。
      {
      let Foo=class{};
      class Barextends Foo{
      }
      };
      这样代码不会出错;如果存在变量提升就会出错;因为class被提升到代码头部;而let不会;所以导致Bar继承Foo的时候,Foo还没有定义;

    • name属性
      由于本质上;ES6的类只是ES5的构造函数的一层包装;所以函数的许多特性都被class继承,包括name属性
      class Point{};
      Point.name//'Point'

    • Generator方法;
      如果某个方法之前加上了* 就表示Generator函数。
      Class Foo{
      constructor(...args){
      this.args=args;
      }
      *Symbol.iterator{
      for(let arg of this.args){
      yield arg
      }
      }
      }
      for (let x of new Foo('hello','world')){
      console.log(x);
      };
      //hello
      //world;
      上面代码中Foo类的Symbol.iterator方法前面有个iterator前面有一个星号;表示该方法是一个Generator函数;Symbol.iterator方法返回一个Foo类的默认遍历器;for...of循环会自动调节用这个遍历器;

    • this的指向;
      类的方法内部如果含有this;它默认只想这个类的实例;但是必须要非常小心;一旦单独使用该方法,很可能报错
      class Logger{
      printName(name='there'){
      tthis.print(hello ${name})
      }
      print(text){
      console.log(text)
      }
      };
      const logger = new Logger()
      const {printName}=logger;
      printName();//Type

    2静态方法;

    类相当于实例的原型;所有在类中定义的方法;都会被实例继承;如果在一个方法前面加上static;就表示该方法;不会被实例继承;而是只能通过类调用;这就称为静态方法;
    class Foo{
    static classMethod(){
    return 'hello'
    }
    };
    Foo.classMethod();//hello;
    var foo=new Foo();
    foo.classMethod();
    //TypeError:foo.classMethod is ot a function;
    上面代码中,Foo类的classMethod方法前面有static关键字;表明该方法;是一个静态方法;可以直接调用;不能继承使用;
    父类的静态方法;可以别子类继承。
    class Foo{
    static classMethod(){
    return 'hello'
    }
    }
    class Bar extends Foo{
    }
    Bar.classMethod();//hello;
    上面代码中父类Foo有个静态方法;
    this指代的是类而不是实例;

    class Foo {
    static bar() {
    this.baz();
    }
    static baz() {
    console.log('hello');
    }
    baz() {
    console.log('world');
    }
    }

    Foo.bar() // hello

    上面代码中,静态方法bar调用了this.baz,这里的this指的是Foo类,而不是Foo的实例,等同于调用Foo.baz。另外,从这个例子还可以看出,静态方法可以与非静态方法重名。

    class Foo{
    static classMethods(){
    retutn 'hello'
    }
    }
    class Bar extends Foo{
    static class Method(){
    return super.classMothod()+",too";
    }
    }
    Bar.classMethod();//hello ,too;

    3.实例属性的新写法;

    实例属性除了

    相关文章

      网友评论

          本文标题:ES6-class

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