zoukankan      html  css  js  c++  java
  • js-ES6学习笔记-Class(2)

    1、与函数一样,类也可以使用表达式的形式定义。

    const MyClass = class Me {
      getClassName() {
        return Me.name;
      }
    };

    这个类的名字是MyClass而不是MeMe只在Class的内部代码可用,指代当前类。

    如果类的内部没用到的话,可以省略Me,也就是可以写成下面的形式。

    2、采用Class表达式,可以写出立即执行的Class。

    let person = new class {
      constructor(name) {
        this.name = name;
      }
    
      sayName() {
        console.log(this.name);
      }
    }('张三');
    
    person.sayName(); // "张三"

    3、私有方法是常见需求,但 ES6 不提供,只能通过变通方法模拟实现。

    一种做法是在命名上加以区别。

    class Widget {
    
      // 公有方法
      foo (baz) {
        this._bar(baz);
      }
    
      // 私有方法
      _bar(baz) {
        return this.snaf = baz;
      }
    
      // ...
    }

    这种命名是不保险的,在类的外部,还是可以调用到这个方法。

    另一种方法就是索性将私有方法移出模块,因为模块内部的所有方法都是对外可见的。

    class Widget {
      foo (baz) {
        bar.call(this, baz);
      }
    
      // ...
    }
    
    function bar(baz) {
      return this.snaf = baz;
    }

    上面代码中,foo是公有方法,内部调用了bar.call(this, baz)。这使得bar实际上成为了当前模块的私有方法。

    还有一种方法是利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值。

    const bar = Symbol('bar');
    const snaf = Symbol('snaf');
    
    export default class myClass{
    
      // 公有方法
      foo(baz) {
        this[bar](baz);
      }
    
      // 私有方法
      [bar](baz) {
        return this[snaf] = baz;
      }
    
      // ...
    };

    上面代码中,barsnaf都是Symbol值,导致第三方无法获取到它们,因此达到了私有方法和私有属性的效果。

    4、类的方法内部如果含有this,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。

    class Logger {
      printName(name = 'there') {
        this.print(`Hello ${name}`);
      }
    
      print(text) {
        console.log(text);
      }
    }
    
    const logger = new Logger();
    const { printName } = logger;
    printName(); // TypeError: Cannot read property 'print' of undefined

    如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境,因为找不到print方法而导致报错。

    一个比较简单的解决方法是,在构造方法中绑定this,这样就不会找不到print方法了。

    class Logger {
      constructor() {
        this.printName = this.printName.bind(this);
      }
    
      // ...
    }

    另一种解决方法是使用箭头函数。

    class Logger {
      constructor() {
        this.printName = (name = 'there') => {
          this.print(`Hello ${name}`);
        };
      }
    
      // ...
    }

    还有一种解决方法是使用Proxy,获取方法的时候,自动绑定this

    5、类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。

    6、name属性总是返回紧跟在class关键字后面的类名。

    class Point {}
    Point.name // "Point"
  • 相关阅读:
    潘石屹出售上海外滩金融中心股权 4年没新增投资
    【BZOJ4036】【洛谷3175】【HAOI2015】—按位或(FMT+期望dp)
    信托配资清理“逃生通道”隐情
    中国在移动端的营销水平已超国外
    “土豪”们的新人生模型
    苏宁的逆市“O2O进化论”
    信汇中正领导力打造“必读12篇”之路
    你是否真的需要说声“谢谢”?
    新主管如何快速上手
    雷军和黄章又掐架了 不就是“不服跑个分”嘛
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6533651.html
Copyright © 2011-2022 走看看