JavaScript method vs function vs member
I’ve always been unclear about these three concepts, so I decided to organize my understanding.
Method
A method is a function which is a property of an object. There are two kind of methods: Instance Methods which are built-in tasks performed by an object instance, or Static Methods which are tasks that are called directly on an object constructor.
A method is a function that is a property of an object. There are two types of methods: Instance Methods are built-in tasks performed by an object instance, and Static Methods are tasks called directly on an object constructor.
From MDN
Function
Generally speaking, a function is a “subprogram” that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.
In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.
From MDN
Member
The concept of a member is reflected in an interface or abstract class. A member can be a method or a variable value.
Personal understanding
Difference between Function, Method and Constructor calls
In the book Effective JavaScript, there’s a section that states:
If you’re familiar with object-oriented programming, you’re likely accustomed to thinking of functions, methods, and class constructors as three separate things. In JavaScript, these are just three different usage patterns of one single construct: functions.
This means that functions, methods, and class constructors are just three different usage patterns of a single construct: functions.
Important Notes
- Method calls use the object that contains the method property as the call receiver.
- Function calls use the global object (or undefined in strict mode) as their receiver. Function calls are rarely used to call methods.
- Constructors need to be called with the new operator and produce a new object as their receiver.
nonmethod
Some methods are not called on a specific object - these are called nonmethods, as shown below:
function hello() {
return "hello, " + this.username;
}
hello(); // "hello, undefined"
tslint - prefer-function-over-method
In tslint rules, there’s a rule that warns when methods don’t use this, suggesting to change them to functions.
Why? There’s a great explanation on StackOverflow.
Example
// TypeScript
class A {
fn1() {}
fn2 = () => {}
}
// JavaScript
var A = (function () {
function A() {
this.fn2 = function () { };
}
A.prototype.fn1 = function () { };
return A;
}());
If we inherit from this class and want to override the fn2 function, what do we do?
class B extends A {
private oldFn2 = this.fn2;
fn2 = () => {
this.fn2();
}
}
Now let’s change fn2 to a method and see how to override it:
class A {
fn1() {}
fn2() {}
}
class B extends A {
fn2() {
super.fn2();
}
}
Conclusion
- Methods and functions are different after compilation.
- From a performance perspective,
functions are oriented towards the class object rather than each instance of the class, making them more memory-friendly. - The rule’s meaning is that if a method in a class instance doesn’t use
this, it means every instance is the same, which is wasteful in terms of overhead, so it’s recommended to switch to functions.
Implement Members vs Override methods
IDEA or WebStorm’s code generation features can improve efficiency. In TypeScript classes, when invoking the generation shortcut, you’ll notice two options: Implement Members and Override methods.
So what’s the difference between these two?
As mentioned in the member section, members are more reflected in abstract classes and interfaces. When we write implementations, they become useful. For example, when we declare an interface class with properties A and B, and instantiate an interface variable.
When writing component classes, such as wanting to override hooks, we need to choose override methods because React.Component is a class, not an interface, and it has complete implementations.
Final Thoughts
At this point, my understanding seems to have been further enhanced.
