ES6 Inject in an extended class - javascript

I am curious can I call a extended class and have it still import the things it needs specifically.
Welcome Class:
import { ErrorLevel } from './error-level.js';
export class Welcome extends ErrorLevel {
constructor() {
super();
}
}
Error-Level Class:
import { Notification } from 'aurelia-notification';
export class ErrorLevel {
static inject() {
return [Notification];
}
constructor(notification) {
this.notification = notification;
}
}
I know once I call super() it will call the extended class and pass in 0 arguments. Is there a way for my ErrorClass constructor to pull in Notification when I call super()?

super([arguments]); // calls the parent constructor.
super.functionOnParent([arguments]);
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
Passing an argument in Welcome's super function calls the parent class constructor with that argument. You will see the log of this contains notification which is set to the argument we pass into super.
http://jsbin.com/raguqopesu/1/edit?js,console,output
class ErrorLevel {
constructor(notification) {
this.notification = notification;
}
}
class Welcome extends ErrorLevel {
constructor() {
super(Notification);
console.log(this);
}
}
const yo = new Welcome();

export class Welcome extends ErrorLevel {
constructor(notification) {
super(notification);
}
}

Related

Pass parameters through scene.switch() in phaser 3?

Is there a way to pass data through the scene.switch() function? I've seen this in other scene changing functions, but not this one and I don't know how to receive the data. How could I do that if my code looks something like this, where message is the second parameter passed through scene.switch() function.
class MyScene1 extends Phaser.Scene {
constructor() {
super('scene1')
}
create() {
this.scene.switch('scene2', 'greetings from scene 1')
}
}
class MyScene2 extends Phaser.Scene {
constructor() {
super('scene2')
}
create() {
// Set message to the value that was passed through scene.switch()
console.log(message)
}
}
Ok, so I did some research and it turns out you can do this in the init() function, like so:
class MyScene1 extends Phaser.Scene{
constructor(){
super('scene1')
}
create(){
this.scene.switch('scene2', 'greetings froms scene 1')
}
}
class MyScene2 extends Phaser.Scene{
constructor(){
super('scene2')
}
init(message){
console.log(message)
}
}

How to call a function defined inside react component in a typescript class?

export class abc extends React.Component<IProps, IState> {
function(name: string) {
console.log("I wish to call this function"+ name);
}
render() {
return (
<div>Hello</div>
);
}
}
Now I wish to call the function method of the above-defined component into another xyz.ts class (which is not a react component) is it possible to do the same?
You could use the listener pattern like this:
export interface IListener {
notify: (name:string) => void;
}
export class Listener {
listener : IListener[] = [];
addListener(listener: IListener) {
this.listener.add(listener)
}
notifyListener() {
this.listener.forEach((listener) => {
listener.notify("abc");
});
}
}
export class abc extends React.Component<IProps, IState> implements IListener {
componentDidMount() {
// register this class as a listener
new Listener().addListener(this);
}
public notify(name:string) {
this.test(name);
}
test(name: string) {
console.log("I wish to call this function"+ name);
}
render() {
return (
<div>Hello</div>);
}
}
You should definitely move the function out of the component and export it if you want to use it in a different ts file.

Calling parent constructor in javascript

Wonder if anyone can help?
I'm trying to call a parent's constructor or at a minimum get a reference to the parent class in some way without hardcoding anything.
class A {
static foo(options) {
parent::__construct(options); <- this is how you would get the parent in php
}
}
class B extends A {
}
Is this possible?
In a javascript class (and OOP in general), a static method is not part of an instance and therefore the object it resides in does not have a constructor.
You should avoid using static method for this sort of thing and use a standard constructor and call super() to call the parent constructor.
class A {
constructor(options) {
console.log('Options are:');
console.log(options);
}
}
class B extends A {
constructor(options) {
super(options);
}
}
const item = new B({item1: 'abc'});
Further reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
You can use super() to call parent constructor
class A {
constructor() {
console.log('I\'m parent ');
}
foo(){
console.log('Class A: Called foo');
}
}
class B extends A {
constructor() {
super();
}
foo(){
super.foo()
}
}
const b = new B();
b.foo();

'this' returns undefined in extended Classes in Javascript

I am trying to run the code below, but it is not working. I think this is a scope problem, but I'm not sure how to fix this.
import CommonController from './CommonController';
import CategoryService from './category/Service.js';
class CategoryController extends CommonController {
constructor() {
super(CategoryService);
}
}
export default new CategoryController();
// ===================CommonController==========================
export default class CommonController {
constructor(service) {
this.service = service;
}
async get () {
console.log(this); // it returns undefined
}
}
// ===================CategoryService==========================
import Category from './Category'
import dto from './dto'
class CategoryService extends CommonService {
constructor() {
super(Category, dto);
}
}
export default new CategoryService();
// ===================CommonService==========================
export default class CommonService {
constructor(model, dto) {
this.model = model;
this.dto = dto;
}
}
if a run:
import CategoryController from './CategoryController';
CategoryController.get()
the console.log in CommonController get function will print undefined
Am I doing something wrong?
The issue is that you are calling get() on the class itself, instead of calling it on an instance of the class. Try creating an instance of CategoryController, like so:
cc = new CategoryController();
Then, you should be able to call:
cc.get();
Demo in the code below (same as yours, just slightly modified to reflect my point).
// ===================CommonController==========================
class CommonController {
constructor(service) {
this.service = service;
}
async get () {
console.log(this); // it returns undefined
}
}
// ===================CommonService==========================
class CommonService {
constructor(model, dto) {
this.model = model;
this.dto = dto;
}
}
// ===================CategoryService==========================
class CategoryService extends CommonService {
constructor() {
super(Category, dto);
}
}
class CategoryController extends CommonController {
constructor() {
super(CategoryService);
}
}
cs = new CategoryController();
cs.get();

call function at extends constructor

class PathController {
constructor(){
}
getMainPage(){
alert("getMainPage");
}
setPushState(){
alert("setPushState");
}
}
class MainMenu extends PathController {
constructor (){
// call my PathController here
super();
getMainPage();
setPushState();
}
}
let aMainMenu = new MainMenu();
my intention is to call my getMainPage and setPushState at my MainMenu constructor , i tired this.getMainPage and this.setPushState and it is not working as well. can anyone tell me how to call it ?
Your super is your "this" since we are currently in the constructor. Here's how it should look:
class PathController {
constructor(){
}
getMainPage(){
alert("getMainPage");
}
setPushState(){
alert("setPushState");
}
}
class MainMenu extends PathController {
constructor (){
// call my PathController here
super();
super.getMainPage();
super.setPushState();
}
}
let aMainMenu = new MainMenu();
However once you are outside of the constructor, then you would use "this.getMainPage();"
One approach would be to pass property names to super() which call the functions at PathController parent constructor
class PathController {
constructor(fromMainMenu, ...props) {
if (fromMainMenu) {
for (let fn of props) {
this[fn]()
}
}
}
getMainPage(){
alert("getMainPage");
}
setPushState(){
alert("setPushState");
}
}
class MainMenu extends PathController {
constructor () {
// call my PathController here
super(true, "getMainPage", "setPushState");
}
}
let aMainMenu = new MainMenu();

Categories

Resources