When a function reads an object’s properties through `this`, how the function is invoked matters. A regular method call gives `this` the object used for the call. Moving that same function into a variable can change what its property reads return—a common problem with callbacks and event handlers. section 3.6.2
One function, two results
With `myObject.greeting` set to `"Hi, there"`, `myObject.writeMessage("It is sunny today")` reads that greeting. Assigning `let myFunction = myObject.writeMessage` and then calling `myFunction("It is sunny today")` loses the method call’s object. In the demonstrated environment, the detached call instead reads `"Hello"` from the global object. section 3.6.2
A stand-alone regular function can also use `this`. In the demonstrated JavaScript environment, an ordinary stand-alone call uses the global object; `writeMessage.call(global, message)` makes that choice explicit. The global object’s name varies by environment: Node.js uses `global`, while browsers may use `window` or `self`. section 3.6.1
Choose how to retain the intended value:
- Use `call` to supply `this` for one invocation. Use `bind` to create a function whose `this` remains fixed when it is later invoked, including through a detached variable. Binding an object’s method requires a second step after creating the object. section 3.6.3
- Use an arrow function when the enclosing function already has the `this` you need. An arrow has no `this` of its own: an arrow returned from a regular method uses the value established when that method was invoked. section 3.6.4
Listing 3.41 Using an arrow function in the index.js file in the primer folder
let myObject = {
greeting: "Hi, there",
getWriter() {
return (message) => console.log(`${this.greeting}, ${message}`);
}
}
greeting = "Hello";
let writer = myObject.getWriter();
writer("It is raining today");
let standAlone = myObject.getWriter;
let standAloneWriter = standAlone();
standAloneWriter("It is sunny today");
Compare `myObject.getWriter()` with calling a detached `getWriter`. The returned arrows read different greetings because their enclosing regular function was invoked differently. section 3.6.4
An arrow placed directly in an object literal is not automatically bound to that object. Replacing `writeDetails` with an arrow caused its property reads to print `undefined`. A regular method followed by `hat.writeDetails = hat.writeDetails.bind(hat)` restored consistent output. section 3.6 section 3.6.5
The choice also appears in TypeScript web components. An arrow event handler on a product item keeps `this` referring to the component, so it can update `quantity` or read `props`; a conventional method used as the handler would instead receive the event-describing object as `this`. Accessing the select element’s value is a separate typing concern handled with an `HTMLSelectElement` assertion. section 16.8.1
