Question 192078 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can a classless OOP language like TypeScript have static methods?

I’m really confused. If TypeScript transpiles to JavaScript and JavaScript is a classless language, then how can TypeScript have static methods?

As far as I understand, which could be wrong, in OOP languages supporting classes, a static method is part of the class which does not depend in any way on a particular instance of the class. A class is a piece of code, a blueprint, that contains enough information for cloning itself in the memory during runtime and a static method is part of that blueprint from the very beginning.

But JS does not support classes. Everything in JS is an object. So, there’s no blueprint. There is something in memory that is replicated times and times again whenever we use the new keyword in JS/TS. So, the concept of the keyword static is very confusing to me in this case.

I would appreciate if someone clears up these concepts and how they are related to each other and why I’m wrong.

Tags:

3

Answers


  1. 0

    Let’s see how would static look in ES5, before ‘class’ and other cool features were introduced.

    So you have some class (in ES5 that would be a function with accepting arguments like a constructor) e.g. named Person.

    To add static method you would just assign some property to this class, so it will look like:

    Person.getSpecies = function() { return 'Homo sapience' };

    And this is it. getSpecies is a static method of a class Person. It’s a standalone property of an object.

    Using ESNext syntax it will look smth like:

    class Person { static getSpecies() { return 'Homo sapience' } }
    Login or Signup to reply.
  2. 0

    If TypeScript transpiles to JavaScript and JavaScript is a classless language, then how can TypeScript have static methods?

    JavaScript is not a classless language. Here’s the documentation on classes on JavaScript

    You may be confused because JavaScript did not always have classes. But it turns out, you can emulate a class like system with the prototype based system pretty easily. So this difference doesn’t really matter most of the time. Even before official support for classes was added, you could still easily have what most would consider a "static method".

    But all modern JavaScript engines support the class keyword for traditional OOP styles.

    In OOP languages supporting classes, a static method is part of the class which does not depend in any way on a particular instance of the class.

    Correct.

    A class is a piece of code, a blueprint, that contains enough information for cloning itself in the memory during runtime and a static method is part of that blueprint from the very beginning.

    It actually not part of that blueprint at all. It’s part of the factory that produces that blueprint. So it belongs to the constructor, not the instances. An instance does not have direct access to static method.

    If you had a class named Person and a static method to find all person records from a database, then a single Person instance would never need to find all the people from the database. That belongs to the concept that is the collection all Persons and not any instance.

    So static methods aren’t part of the blue print because they are not part of what the instance has to work with.

    It’s simpler than you think. A class is a constructor of object that all have similar interface and behave a certain way. A static member of that class is simply a value that belongs to that constructor and never belongs to instances.

    This is a static method named findAll:

    class Person {
  static async findAll(): Promise<Person[]> { ... }
  instanceMethod() { ... }
}

const people = await Person.findAll()
new Person().instanceMethod

    And so is this: (although this is much hard for poor TypeScript)

    function Person() {
  return this.name = 'Foo'
}
Person.prototype.instanceMethod = () => { ... }
Person.findAll = async (): Promise<Person[]> => { ... }

const people = await Person.findAll()
new Person().instanceMethod

    In both cases here, there is a constructor that can produce instances which have an instance method. And that constructor also has a static method.

    All that changes when you add the static keyword is that the method becomes available on the constructor, and is no longer available on instances.

    Login or Signup to reply.
  3. 0

    Skipping the things like JS has classes since 2015 and others,

    Everything in JS in an object.
    A Function is anso an object
    So the function can have properties
    And a "static" function is a property of the function itself rather then it’s prototype

    function foo(){}

foo.bar = 123 // "static" property of foo
foo.prototype.asd = 999 // prototype property of foo instance

let i = new foo();
i.asd // 999
i.constructor == foo // true
i.constructor.bar // 123
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search