Reusable object methods
A shared method needs to operate on whichever object calls it.
JS Puzzles · Const
Dynamic this
JavaScript's regular-function this is determined by how the function is called, not where it is defined. Method calls provide the receiver, while standalone calls, explicit binding, constructors, and arrow functions follow different rules.
How it works
For a regular function, this is supplied by the call rather than fixed by where the function was written. A method call such as obj.method() supplies obj; detaching the method removes that receiver. Arrow functions do not provide their own this and instead capture it lexically.
Syntax
thisKey points
- In a method call, this lets one method implementation read or modify the receiver object.
- The object immediately before the method in the call supplies the regular function's this value.
- bind returns a callable function that keeps the selected receiver when invoked later.
- Use call or apply when the receiver should be selected separately for an individual invocation.
- Strict-mode regular functions can receive primitive values as this instead of automatic object coercion.
Common mistakes
- Do not determine this from a function's definition site; inspect the call expression that invokes it.
- Detaching a method can change this to undefined in strict mode or to the global object in non-strict mode.
- An object literal does not itself establish a this context; the function call does.
Example: Invocation determines this
const user = {
name: "Ada",
greet() {
return `Hello, ${this.name}`;
},
};
const greet = user.greet;
console.log(user.greet()); // Hello, Ada
console.log(greet()); // Hello, undefined (or throws in strict mode)The same regular function receives different this values because it is called in different ways.
When to use it
Stable callback context
A callback must preserve a particular receiver after being passed elsewhere.
Explicit invocation control
The same function must run with different receivers or argument lists.
Interview questions
QHow is this determined for a regular function?
For a regular function, this is determined at runtime by invocation. In obj.method(), it is obj; in a standalone call, it is undefined in strict mode and usually the global object otherwise.
Follow-up: How can a method retain its receiver when passed as a callback? Use bind to create a function whose this binding does not change.
QHow does arrow-function this differ from regular-function this?
An arrow function does not have its own this binding. It uses the surrounding lexical this, so calling it as an object method does not make the object its this value.
Follow-up: What is a practical alternative when a callback needs the object as this? Use a regular function and bind the desired receiver, or call it through that object.
QHow can this be explicitly controlled?
call and apply can explicitly provide this for one invocation, while bind creates a new function with a fixed this binding. These mechanisms are useful when a function is reused with different objects.
Follow-up: What happens if the same regular function is accessed through another object? Its this value changes to the object used for that call.
Related
thisFunction.prototype.bind()Function.prototype.apply()Function.prototype.call()globalThisstrict modearrow functions