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();
Related
I have two classes in javascript a, b. Class b extends a. Class a calls method in constructor. I wanna override this method in b class. How to call overridable method? when I added to class a, to constructor this.method(), it always calls method from a class.
class a {
constructor() {
this.method();
}
method() {
alert("a");
}
}
class b extends a {
constructor() {
super();
}
method() {
alert("b");
}
}
If you don't know in advance whether the instance is of the subclass or superclass, you can make sure the superclass calls its own method by having the superclass reference itself explicitly:
A.prototype.method.call(this);
class A {
constructor() {
A.prototype.method.call(this);
}
method() {
console.log("a");
}
}
class B extends A {
constructor() {
super();
}
method() {
console.log("b");
}
}
const b = new B();
class A {
constructor(){
this.method()
}
method(){
alert("a");
}
}
class B extends A {
constructor(){
super()
}
method(){
alert("b");
}
}
new B();
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();
Consider this basic custom element:
class XElement extends HTMLElement {
constructor() { super(); }
foo() { console.log( this ); }
} customElements.define( 'x-element', XElement );
Here is the problem:
const xelem = new XElement();
/* `foo` will lose its binding to `xelem`:
*/ someButton.onclick = xelem.foo;
// These will work, but it's too verbose:
someButton.onclick = () => xelem.foo();
someButton.onclick = xelem.foo.bind( xelem );
I see only one solution is to add foo as arrow function in constructor, but it seems to me wrong.
constructor() {
super();
this.foo = () => console.log( this );
}
Is there any right way to create method that will never lose its binding?
That is how JavaScript this binding works.
You can read this: THIS (YDKJS)
Basically, the value of this inside a function depends upon how that function is invoked. So you need to explicitly hard bind the this value to your function foo by using the bind() method or defining foo as arrow function (arrow functions lexically bind their context).
So the solution is what you found.
You can do:
In your constructor:
class XElement extends HTMLElement {
constructor() {
super();
this.foo = this.foo.bind(this);
}
foo() { console.log( this ); }
}
Or (I don't like this one)
class XElement extends HTMLElement {
constructor() {
super();
this.foo = () => console.log(this);
}
}
Or
class XElement extends HTMLElement {
constructor() { super(); }
foo = () => { console.log( this ); }
}
Let's say I have a superclass and a child that overrides one of the super methods.
class Test {
doSomething() {
callsomething({
callback: this.method
})
}
method() {
console.log('parent');
}
}
class A extends Test {
constructor() {
super();
}
method() {
console.log('override');
}
}
new A().method();
There is a way to know inside the Test class if method was overridden?
Inside doSomething, check if this.method refers to Test.prototype.method - if it doesn't, then this.method refers to something else, which means it's been shadowed, quite possibly by a child class method:
class Test {
doSomething() {
if (this.method === Test.prototype.method) {
console.log("Method is native Test's!");
} else {
console.log("Method is not Test's, it's been shadowed!");
}
}
method() {
console.log('parent');
}
}
class A extends Test {
constructor() {
super();
}
method() {
console.log('override');
}
}
new A().doSomething();
new Test().doSomething();
You can also do the same check in Test's constructor:
class Test {
constructor() {
if (this.method === Test.prototype.method) {
console.log("Method is native Test's!");
} else {
console.log("Method is not Test's, it's been shadowed!");
}
}
method() {
console.log('parent');
}
}
class A extends Test {
constructor() {
super();
}
method() {
console.log('override');
}
}
new A()
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);
}
}