ES6 Class & super All In One

ES6 Class & super

ES6 class extends

// 父类
class Human {
  constructor (name) {
    this.name = name ?? Human.name;
    // this.name = name ?? Human.constructor.name;
  }
}

// 子类继承父类
class Person extends Human {
  constructor (name, age) {
    super(name ?? Person.name);
    // 在调用 this 前，必须先调用 super ✅
    this.age = age;
  }
  static getClassName () {
    console.log('Person.name =', Person.name);
    return Person.name;
  }
  getName () {
    console.log('this.name =', this.name);
    return this.name;
  }
  getAge () {
    console.log('this.age =', this.age);
    return this.age;
  }
}


const person = new Person('eric', 18);

// static method 静态方法
Person.getClassName();

// instance methods 实例方法
person.getName();
person.getAge();
// Person.name = Person
// this.name = eric
// this.age = 18

override 覆盖

abstract class Animal {
  constructor() {}
  // 抽象方法
  abstract speak(): void;
  // 代码复用，定义公用方法并实现
  eat(food: string): void{
    console.log("eat =", food);
  }
}

class Dog extends Animal {
  food: string = '';
  // override 字类覆盖父类方法
  constructor(food: string) {
    super();
    // super
    super.eat(food);
  }
  override speak() {
    console.log("wang!");
  }
}
const puppy = new Dog('meat');
puppy.speak();
puppy.eat('🐶');

class categories extends Animal {
  food: string = '';
  // override 字类覆盖父类方法
  constructor(food: string) {
    super();
    // this
    this.eat(food);
  }
  override speak() {
    console.log("wang!");
  }
}
const kitty = new Dog('fish');
kitty.speak();
kitty.eat('😸');

"use strict";
class Animal {
    constructor() { }
    // 代码复用，定义公用方法并实现
    eat(food) {
        console.log("eat =", food);
    }
}
class Dog extends Animal {
    // override 字类覆盖父类方法
    constructor(food) {
        super();
        this.food = '';
        // super
        super.eat(food);
    }
    speak() {
        console.log("wang!");
    }
}
const puppy = new Dog('meat');
puppy.speak();
puppy.eat('🐶');
class categories extends Animal {
    // override 字类覆盖父类方法
    constructor(food) {
        super();
        this.food = '';
        // this
        this.eat(food);
    }
    speak() {
        console.log("wang!");
    }
}
const kitty = new Dog('fish');
kitty.speak();
kitty.eat('😸');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

ES6 Class name

class Human {
  constructor (name) {
    this.name = name ?? Human.name;
    // this.name = name ?? Human.constructor.name;
  }
}

class Person extends Human {
  constructor (name) {
    super(name, alias);
    this.alias = alias ?? Person.name;
    // this.alias = alias ?? Person.constructor.name;
  }
}

https://bobbyhadz.com/blog/javascript-get-class-name-of-object

Typescript

interface Animal {
  speak(): void;
}

class Dog implements Animal {
  food: string = '';
  // override 字类覆盖父类方法
  constructor(food: string) {
    // super();
    this.food = food;
  }
  speak() {
    console.log("wang!");
  }
  eat(food: string) {
    // ?? => !== null && !== void 0 ? : 
    // void 0 === undefined
    console.log(food ?? this.food);
  }
}
const puppy = new Dog('meat');
puppy.speak();
puppy.eat('🐶');

"use strict";
class Dog {
    // override 字类覆盖父类方法
    constructor(food) {
        this.food = '';
        // super();
        this.food = food;
    }
    speak() {
        console.log("wang!");
    }
    eat(food) {
        // ?? => !== null && !== void 0 ? : 
        // void 0 === undefined
        console.log(food !== null && food !== void 0 ? food : this.food);
    }
}
const puppy = new Dog('meat');
puppy.speak();
puppy.eat('🐶');

https://www.typescriptlang.org/play?ssl=24&ssc=1&pln=1&pc=1#

EventEmitter

// 5.实现一个 EventEmitter类，这个类包含以下方法：
// on（监听事件，该事件可以被触发多次）
// once（也是监听事件，但只能被触发一次）
// fire（触发指定的事件）
// off（移除指定事件的某个回调方法或者所有回调方法）

class EventEmitter {
    constructor() {
        this.events = {};
    }
    on(name, callback) {
        this.events[name] = {
            callback,
            once: false,
        };
    }
    once(name, callback) {
        this.events[name] = {
            callback,
            once: true,
        };
    }
    off(name) {
        let keys = Object.keys(this.events);
        if (keys.includes(name)) {
            delete this.events[name];
        }
    }
    fire(name, person) {
        // dispatchEvent
        let keys = Object.keys(this.events);
        if (keys.includes(name)) {
            let fun = this.events[name].callback;
            let once = this.events[name].once;
            fun(person);
            if (once) {
                delete this.events[name];
            }
        }
    }
}

const event = new EventEmitter()

event.on("drink", (person) => {
    log(person + "喝水");
});

event.on("eat", (person) => {
    log(person + "吃东西");
});

event.once("buy", (person) => {
    log(person + "买东西");
});

event.fire("drink", "我");
// 我喝水
event.fire("drink", "我");
// 我喝水
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("buy", "其它人");
//其它人买东西
event.fire("buy", "其它人");
//这里不会再次触发buy事件，因为once只能触发一次

event.off("eat") //移除eat事件
event.fire("eat", "其它人");
//这里不会触发eat事件，因为已经移除了

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---