Class vs. static method in JavaScript
First off, remember that JavaScript is primarily a prototypal language, rather than a class-based language1. Foo
isn't a class, it's a function, which is an object. You can instantiate an object from that function using the new
keyword which will allow you to create something similar to a class in a standard OOP language.
I'd suggest ignoring __proto__
most of the time because it has poor cross browser support, and instead focus on learning about how prototype
works.
If you have an instance of an object created from a function2 and you access one of its members (methods, attributes, properties, constants etc) in any way, the access will flow down the prototype hierarchy until it either (a) finds the member, or (b) doesn't find another prototype.
The hierarchy starts on the object that was called, and then searches its prototype object. If the prototype object has a prototype, it repeats, if no prototype exists, undefined
is returned.
For example:
foo = {bar: 'baz'};
console.log(foo.bar); // logs "baz"
foo = {};
console.log(foo.bar); // logs undefined
function Foo(){}
Foo.prototype = {bar: 'baz'};
f = new Foo();
console.log(f.bar);
// logs "baz" because the object f doesn't have an attribute "bar"
// so it checks the prototype
f.bar = 'buzz';
console.log( f.bar ); // logs "buzz" because f has an attribute "bar" set
It looks to me like you've at least somewhat understood these "basic" parts already, but I need to make them explicit just to be sure.
In JavaScript, everything is an object3.
everything is an object.
function Foo(){}
doesn't just define a new function, it defines a new function object that can be accessed using Foo
.
This is why you can access Foo
's prototype with Foo.prototype
.
What you can also do is set more functions on Foo
:
Foo.talk = function () {
alert('hello world!');
};
This new function can be accessed using:
Foo.talk();
I hope by now you're noticing a similarity between functions on a function object and a static method.
Think of f = new Foo();
as creating a class instance, Foo.prototype.bar = function(){...}
as defining a shared method for the class, and Foo.baz = function(){...}
as defining a public static method for the class.
ECMAScript 2015 introduced a variety of syntactic sugar for these sorts of declarations to make them simpler to implement while also being easier to read. The previous example can therefore be written as:
class Foo {
bar() {...}
static baz() {...}
}
which allows bar
to be called as:
const f = new Foo()
f.bar()
and baz
to be called as:
Foo.baz()
1: class
was a "Future Reserved Word" in the ECMAScript 5 specification, but ES6 introduces the ability to define classes using the class
keyword.
2: essentially a class instance created by a constructor, but there are many nuanced differences that I don't want to mislead you
3: primitive values—which include undefined
, null
, booleans, numbers, and strings—aren't technically objects because they're low-level language implementations. Booleans, numbers, and strings still interact with the prototype chain as though they were objects, so for the purposes of this answer, it's easier to consider them "objects" even though they're not quite.
Typescript: static method vs function defined outside class
What are the practical differences between a static class method, and a function defined outside a class (at the top of the file) in TypeScript?
Not all that many:
Code using the static method must have access to the class; code using a standalone function must have access to the standalone function instead.
Using the static method technically involves a property lookup on the class's constructor function; using a standalone function doesn't. In practice, this will be optimized such that it doesn't matter.
The code in the static method will have access to the constructor function's parent constructor function via
super
(something that's fairly unique to JavaScript); code in a standalone function does not (because there is no parent constructor).Specifically in regard to your example: Your standalone
shout
function is private to the module in which it appears; the static method onFoo
is accessible from other modules that importFoo
.
Slightly closer to opinion-land:
- A standalone function is standalone, it doesn't provide much context for what it is or where it's defined to someone reading the code. A static method provides more context, via the class name. But, if you're using modules (as you seem to be), the
import
provides some context for the standalone function.
...when should we use static methods rather than functions defined outside any classes.
That's largely a matter of opinion and style, so off-topic for Stack Overflow. If your team feels the need for consistency using some set of rules, agree a set and be consistent.
using static method on javascript class
You can simply use an object literal for AuthServics instead of a class.
export default const AuthServices = {
login: async (data) {}
register: async (data) {}
}
If you want to use class then use static methods and do not instantiate from class.
Access the methods like this
AuthServices.login()
There is no need to create multiple copies of these methods in memory.
Related Topics
Does Every JavaScript Function Have to Return a Value
How to Round Up a Number in JavaScript
Replace Multiple Strings at Once
Is There an Equivalent of the _Nosuchmethod_ Feature for Properties, or a Way to Implement It in Js
Async Function Not Returning Value, But Console.Log() Does: How to Do
Js & Jquery Can't Detect HTML Elements, and Say's They Are Undefined
How to Get JavaScript Caller Function Line Number and Caller Source Url
Cors - How Do 'Preflight' an Httprequest
Google Maps V3 - Limit Viewable Area and Zoom Level
Fast Stable Sorting Algorithm Implementation in JavaScript
Making Sure at Least One Checkbox Is Checked
How to Do Page Numbering in Header/Footer HTMLs with Wkhtmltopdf
Pass a JavaScript Variable Value into Input Type Hidden Value
How to Zoom a Background Image on a Div with Background-Size
Why Are CSS Animations and Transitions Blocked by JavaScript