Access class scope within static function ES6 - javascript

How does one access this scope with a static function of a class? Am I missing something here?
class Example {
constructor() {
this.name = 'Johan';
}
static hello(){
// How to access `this` scope here in the static
Example.name; // Undefined
this.name; // Undefined
}
}

The commenters are correct, this in the context of a static class method is the class itself.
When you create an instance of the class using new, that instance is its own this. You can access properties and methods on the instance through this.
See the examples below:
class Example {
constructor() {
this.name = 'Johan';
}
static hello(){
console.log(this);
console.log(this.name);
}
}
Example.hello(); // logs out the above class definition, followed by the name of the class itself.
let x = new Example();
console.log(x.name); // logs out 'Johan'.
x.hello(); // x does not have `hello()`. Only Example does.

Related

How to access the class itself from within a class without using its name [duplicate]

This question already has answers here:
JS call static method from class
(7 answers)
Closed 4 years ago.
Is it possible to access the class itself inside of a classes function:
class MyClass {
static get myFunction() { return "foo"; }
constructor() {
console.log(MyClass.myFunction); // "foo" -- it works when using its name. This is what we want but without using the name
console.log(this.myFunction); //undefined
console.log(this.prototype.myFunction); //Cannot read property 'myFunction' of undefined
}
}
new MyClass();
Is it possible to achieve the same as you do with MyClass.myFunction() and access the static methods without using the name of the class (in this case without using MyClass in this example?
Something like this.master.myFunction() (I’m just making master up here it’s obviously not called master)
JSBin: https://jsbin.com/hawituxosu/1/edit?js,console
Is that even possible? Thank you!
you can use constructor for this
Returns a reference to the Object constructor function that created the instance object
The constructor property has three purposes:
1. Get the class object.
2. Create an new instance
3. Invoke super constructor
class MyClass {
static get myFunction() { return "foo"; }
constructor() {
console.log(this.constructor.myFunction);
}
}
new MyClass();
an option you can do here is to call static method inside an instance method and call that instance method
class MyClass {
static get myFunction() { return "foo"; }
constructor() {
console.log(MyClass.myFunction); // "foo" -- whith using its name it works. This is what we want but without using the name
console.log(this.constructor.myFunction);
}
myFunction2() {
return this.constructor.myFunction();
}
}
const master = new MyClass();
master.myFunction2();
this.constructor.myFoo
The constructor property helps you here
You could work around getting to the class name using:
this.__proto__.constructor.name // MyClass
class MyClass {
static get myFunction() { return "foo"; }
constructor() {
console.log(eval(this.__proto__.constructor.name + ".myFunction")); //foo
}
}
new MyClass();

JavaScript make a class's method static and available to its instances

How can you make a class's method static (available on the class itself) and accessible from its instances in JavaScript?
class MyClass {
constructor() {}
method() {}
}
const myInstance = new MyClass();
myInstance.method(); // calling from instance
MyClass.method(); // calling from class
You can use the static keyword to do so.
class A {
constructor(){}
static method(){}
}
const x = new A();
EDIT:
x.constructor.method(); // this is possible
A.method();
In Javascript, static methods are bound to class and not instances, so they can only be called by atleast using the constructor. A.prototype handles instance methods whereas the function A handles it's attributes.
Static method calls are made directly on the class and are not callable on instances of the class. But you can achieve the calls for static members from inside an instance.
Using syntax:
this.constructor.staticfunctionName();
ES6 Class Example:
class MyClass {
constructor() {}
static staticMethod() {
console.log('Static Method');
}
}
MyClass.staticVar = 777;
var myInstance = new MyClass();
// calling from instance
myInstance.constructor.staticMethod();
console.log('From Inside Class : ',myInstance.constructor.staticVar);
// calling from class
MyClass.staticMethod();
console.log('Class : ', MyClass.staticVar);
For ES5 Function Classes refer to my answer.

js class static method refer to self (like self in php)

Is there a way to refer to the class that a static method is included in without explicitly specifiying the class again. So instead of this:
class User {
static welcome = 'Hello'
static greet() {
console.log(User.welcome)
}
}
Something like this:
class User {
static welcome = 'Hello'
static greet() {
console.log(self.welcome)
}
}
A class is nothing but a function object. Static methods are nothing but function properties on that object. Whenever you call obj.method(), this refers to the object inside that function.
So if you call the method with User.greet(), this will refer to the function object User.
class User {
static get welcome() {
return 'hello';
}
static greet() {
console.log(this.welcome)
}
}
User.greet();
Inside instance methods you can refer to the class via this.constructor.
You can allways use "this":
class User {
static welcome = 'Hello';
static greet() {
alert(this.welcome)
}
}
User.greet();
But in case of static methods it will refer to type itself.
Here is what specs says about value of "this":
When the root declaration is an instance member or constructor of a
class, the ThisType references the this-type of that class.
When the root declaration is a member of an interface type, the
ThisType references the this-type of that interface.
Sadly, there is no such thing as self in JS, since this in JS is basically already a "merge" of this and self as described in other answers.
If you don't like to do this for a static call, you can actually do pretty similar thing as in PHP.
TL;DR Refer to the class by its name e.g. MyClass.myMethod()
class A {
static one () { console.log("I am one"); }
static two () { A.one(); }
}
A.one(); // Outputs/Logs: "I am one"
PHP equivalent could be something like
<?php
class A {
public static function one() { echo "I am one"; }
public static function two() { A::one(); }
}
A::two(); // Outputs: "I am one"
Bonus info: In JS, you can even do static two = () => A.one();, which is not available with arrow functions in PHP since in class static variable implies constant expression.

how to understand "static" in JavaScript?

class Foo {
static get bar() {
return 42;
}
get bar() {
return 21;
}
}
I am confused about static get bar() { return 42; },
what's the purpose of this code? who can give me a clear explantion?
static get bar()
is a getter which is not instance specific. It can be used without creating an instance of class Foo as given below:
alert(Foo.bar);
whereas
get bar()
is an object specific getter. It can only be used after creating object of class as given below:
var obj = new Foo();
alert(obj.bar);
static is similar to the static keyword in other programming languages(like java, .net ...etc)
when ever you have static property(method, variable) in your class that has been created only once, and shared across all your class objects instances.
For example if you want to have total users count inside of your class you can do that by using static keyword
Example:
class User {
Constructor() {
}
set name(name) {
this.name = name;
}
get name() {
return this.name;
}
static userCount;
}
when ever you create new user instances you can increment your users count.any of your users can access the userCount variable.To access static variable you cannot use this keyword.because it does not belongs to any instances.so to access static keyword use the following
User.userCount = 0;

Is there a way to discover if a javascript 6 class defines its own constructor?

Is there any way to determine if a subclass implements a constructor from within a static method (in a base class)?
I'm trying to write a static create method (that acts like the new keyword) that by default works by passing attribute values as a properties object:
class Person extends Class {
greet() { return 'hello from ' + this.name; }
}
var p = Person.create({name: 'world'}; // create a new Person object and set its `name` property to `'world'`
console.log(p.greet()); // => "hello from world"
but hands off to the class' constructor if it has one:
class Person2 extends Class {
constructor(name) {
super();
this.name = name;
}
greet() { return 'hello from ' + this.name; }
}
var p = Person2.create('world');
console.log(p.greet()); // => "hello from world"
I'm stuck at finding out if the subclass defines its own constructor..
class Class {
static create(...args) {
let has_ctor = ?? // true iff the current subclass defines a constructor..
if (has_ctor) {
// let the constructor handle everything
return new this(...args);
} else {
// assume that `args` contains exactly 1 pojo that defines instance variables to be overridden..
var instance = new this();
let props = args[0];
for (let prop in props) instance[prop] = props[prop];
return instance;
}
}
}
is this even possible?
Seems like it would be much easier to do
class Class {
static create(...args) {
// let the constructor handle everything
return new this(...args);
}
constructor(props){
Object.assign(this, props);
}
}
then if things override the constructor, then can choose to pass props to super() or to assign them manually themselves.
Just to answer your original question
Is there a way to discover if a javascript 6 class defines its own constructor?
No, there is not. Every class does have its own constructor, because a "class" basically is just the constructor function.
If a class definition does not include a constructor method, then it is automatically supplied by the language (see §14.5.14); either as
constructor(...args){ super (...args);}
if there is a super class or as
constructor(){ }
if there is none. The result is not distinguishable from a class where such a constructor was explicitly declared.

Categories