Deep Analysis of this vs. self in JavaScript: From Global Objects to Service Workers

Basic Concepts of this and self

In JavaScript, this and self are two often-confused but fundamentally distinct concepts. this is a keyword whose value depends on the execution context of a function, dynamically bound to the object that invokes it. In contrast, self typically refers to window.self, a property of the global window object that points to window itself in browser environments. This relationship can be verified with: window.self === window; // true. JavaScript allows omitting the window. prefix when accessing its properties, so self is commonly used as shorthand for window.

Behavior in Global Context

In non-strict mode, when a function executes in the global scope, this defaults to window. At this point, both this and self reference the same object, window. For example:

function foo() {
    console.log(
        window.self === window, // true
        window.self === this,   // true
        this === window         // true
    );
}
foo(); // Output: true true true

This shows that in global functions, this and self can be used interchangeably, but only in this specific context.

Differences in Various Contexts

When a function is called in different contexts, the value of this changes dynamically, while self remains window. For instance, using the call method to alter this:

foo.call({}); // Output: true false false

Here, this is bound to an empty object {}, so this === window is false, whereas self still points to window. This difference highlights the context sensitivity of this and the global fixity of self.

self in Service Worker Environments

In Web Worker or service worker environments, self has a different meaning. It points to WorkerGlobalScope, the global object in Worker threads, not window. For example, commonly seen in service worker scripts:

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

Here, self is used to reference the Worker's global scope, ensuring code works correctly in both window and Worker contexts. According to Mozilla documentation, self provides a unified way to reference the global scope across environments.

Summary and Best Practices

In summary, this and self serve different roles in JavaScript: this is dynamic and context-dependent, while self in browsers is usually shorthand for window.self, pointing to the global window object, and in Worker environments, it points to WorkerGlobalScope. In practice, clearly distinguish between them: use this for object methods and context binding, and self for scenarios requiring cross-environment global references, such as service worker event listeners. Avoid mixing them without understanding the context to prevent unintended behavior.