Why is the reference of `this` pointing to `o` in this scenario (o.method)() rather than the global object?

Question

Why is the reference of `this` pointing to `o` in this scenario (o.method)() rather than the global object?

Let's consider the scenario with an object:

var o = {
    prop: 3,
    method: function() {return this.prop}
}

My expectation was that calling

(o.method)()

would result in undefined, but instead it returned 3, indicating that the reference of this is set to o inside the method. Why does this happen? When I evaluate (o.method) separately, it appears as a standalone function, leading me to believe that this would refer to the global object. The distinction becomes apparent in the following comparison:

(o.method)() vs (o.method || true)()

I am aware that o.method() will use o as the context; my question specifically pertains to initially accessing the function like this (o.method) before invoking it.

javascript

Answer 1

Answer №1

That's just how the rules of JavaScript operate. Unless you perform some specific actions, this typically refers to the object before the dot when you access the method before calling it. In this scenario, that would be o.

The following statements all have the same effect:

(o.method)();
o.method();
o.method.call(o);
o["method"]();

However, if you assign the method to a different object, it will then refer to that specific object:

var p = {prop: 42, method: o.method};
p.method(); // returns 42

var method = o.method;
var prop = 13;
method(); // returns 13

Note: As JavaScript evolved beyond its original purpose, it became clear that the behavior of this may not be the most intuitive. In ES6, with the introduction of "Arrow Functions" (also known as Lambda Functions), this will no longer be rebound.

Answer 2

That's just how the rules of JavaScript operate. Unless you perform some specific actions, this typically refers to the object before the dot when you access the method before calling it. In this scenario, that would be o.

The following statements all have the same effect:

(o.method)();
o.method();
o.method.call(o);
o["method"]();

However, if you assign the method to a different object, it will then refer to that specific object:

var p = {prop: 42, method: o.method};
p.method(); // returns 42

var method = o.method;
var prop = 13;
method(); // returns 13

Note: As JavaScript evolved beyond its original purpose, it became clear that the behavior of this may not be the most intuitive. In ES6, with the introduction of "Arrow Functions" (also known as Lambda Functions), this will no longer be rebound.

Why is the reference of `this` pointing to `o` in this scenario (o.method)() rather than the global object?

Answer №1

Similar questions

JavaScript Routing with Multiple Files

Confirm that one input falls within a specified range of two inputs

Typehead.js on Twitter is displaying the full query instead of just the value

Error: FileReader is not defined in Node.js (Nest.js) environment

Using AngularJS to dynamically swap out {{post.title}} with a different HTML file

Leveraging AngularJS for retrieving the total number of elements in a specific sub array

display saved data from ajax request

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

`Is there a specific location for this code snippet?`

Is the latest Swiper JS version compatible with outdated web browsers?

Sharing specific props with deeply nested components in React

Hovering triggers the appearance of Particle JS

Electron Web Workers do not have compatibility with NodeJS modules

Is there a specific HTML tag available to instruct the browser to cache my HTML and/or CSS files for future use?

Changing text array to field identifiers with JavaScript

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

JQuery form serialize not triggering in Internet Explorer

Although everything appears to be running smoothly in Express, my request is returning null

Continuous Load More: Loads content infinitely until a page is fully loaded

Issue with Highcharts: Border of stacking bar chart not visible on the right side