ES6 Class & super All In One

合集 - ES6(82)

1.如何使用 js 实现一个 ES6 中 class 的 extends 功能 All In One2023-03-072.ECMAScript 2023 & Temporal All In One2022-11-273.js ES5 arguments & arguments.callee & this & ES6 new.target All In One2022-10-184.ES6 Map Object index All In One2022-06-055.TypeScript Decorator Metadata All In One2022-04-136.js ES6 Proxy All In One2022-02-137.js ES6 Reflect All In One2022-02-138.js @decorator All In One2021-12-039.Vue warn All In One2021-09-1710.ES6 解构赋值 All In One2021-09-0311.ES6 & export & export default All In One2021-07-2012.ES6 Async Await bug All In One2021-06-1013.ES6 destructuring assignment & default value & rename All In One2021-05-3114.ES6 Symbol All In One2021-03-0715.ES6 Map & WeakMap All In One2021-03-0716.ES6 Reflect All In One2021-03-0717.ES6 Proxy & Reflect All In One2021-03-0718.composition-api & setup2021-03-0519.ES6 Arrow Function & this bug2021-03-0320.ES5 arguments vs ES6 ...rest params All In One2021-02-2721.ES6 export & export.default All In One2021-02-2222.es6 string html2021-02-2023.js create Array ways All In One2021-02-1624.ES6 version repeatify2021-01-0525.es6 curry function2020-12-2926.JavaScript convert ES6 Map to Array All In One2020-12-2327.JavaScript string repeat methods All In One2020-12-0828.ES6 Set All In One2020-11-1829.ES6 Map All In One2020-11-1830.ES6 Arrow Function All In One2020-10-2831.如何用 js 实现一个 ES6 class 类函数 All In One2020-10-2032.ES6 进制字面量 All In One2020-10-1933.redux 中间件 redux-saga 使用教程2020-10-1234.how to convert Map to Object in js2020-10-0135.ES6 Set vs ES5 Array2020-10-0136.ES6 getter & setter2020-10-0137.ES6 arrow function vs ES5 function All In One2020-09-3038.ES6 Class vs ES5 constructor function All In One2020-09-3039.ES6 Generator vs ES6 async/await2020-09-3040.ES6 Map vs ES5 Object All In One2020-09-3041.js swap array2020-09-2242.ES6 ...rest In Action2020-09-1843.Webpack 4.x 默认支持 ES6 语法2020-08-1244.2020 面经(大前端，算法，设计模式，架构)2020-07-1745.js ES5 inheritance All In One2020-07-1046.JavaScript Learning Paths(ES5/ES6/ES-Next)2020-07-0947.ES5 function & ES6 class & method type2020-06-0448.Unicode & \u2028 & \u2029 & ES6 Template literals All In One2020-05-2749.random array & shuffle 洗牌算法 / 随机算法2019-12-0350.js in depth: ES6 destructuring assignment2019-11-2851.gradient text & gradient background2019-11-1852.V8 & ECMAScript & ES-Next2019-09-0853.js 数据劫持 (应用场景) All In One2019-08-2854.ES6 Arrow Function return Object2019-08-22

55.ES6 Class & super All In One2019-08-21

56.ES6 & tagged-template-literals & template strings All In One2019-08-1657.Enums & JavasScript & TypeScript2019-08-1358.es6 & map & set2019-07-2459.ES6 & import * & import default & import JSON All In One2019-07-0860.vue @ path2019-06-1761.ES6 & Classes & Interface2019-06-0662.ES6 & class extends All In One2019-06-0563.Google Advanced Search operators All In One2019-05-2064.React Native & ES6 & emoji All In One2019-04-2565.ES6 & Map & hashMap2019-04-0766.array to object2018-12-1867.ES6 Set & Map2018-12-1168.ES6 Destructuring Assignment All In One2018-11-1469.vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug2018-11-1470.HTML Imports & polyfill2018-10-2371.yarn & vue-cli & hui-cli All In One2018-09-1372.ES6 Map & WeakMap & ES6 Set & WeakSet2018-07-1973.ES6 polyfills & String.includes() & Array.includes()2018-06-2874.ES6 Arrow Function & this bug2018-06-2075.ES6 Proxies2018-06-1176.ES6 import json2018-06-0877.disable VS Code auto format javascript when save codes2018-06-0878.how to create a javascript components framework using HTML5, CSS3, ES6 All In One2018-05-2979.eslint es6 syntax & object rest spread2018-05-0380.!function() & IIFE2017-10-2581.React.createClass vs. ES6 Class Components2017-02-1982.ES2015 (ES6) 新特性： 20 个2016-07-10

收起

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, 禁止转载 🈲️，侵权必究⚠️！

---