Core JavaScript Runtime Mechanisms

Key Insight

Closure is a fundamental and widespread programming concept, defining how a function retains and accesses variables from its surrounding scope, even when executed in a different context. This characteristic is inherent to functions, not objects, and is observed when a function is invoked outside its original definition scope. For example, `greeting("Hello")` returns an inner function `who` that 'closes over' the `msg` variable; subsequent calls to `hello("Kyle")` remember and use "Hello." Importantly, closures preserve direct links to variables, not mere snapshots of their values, allowing updates to be observed over time. An `increaseCount` function returned by `counter(step)` will continuously update and remember its `count` variable, where `incBy1()` returns 1 then 2, and `incBy3()` returns 3, 6, then 9. Closure is especially crucial in asynchronous operations, such as an Ajax `onResponse` callback preserving a `url` parameter from its outer function until the network request completes, or in `for (let [idx,btn] of buttons.entries()) { /* ... */ }` where `let` creates a new block-scoped `idx` for each iteration, preserving it for the inner `onClick` handler.

The `this` keyword is a powerful yet frequently misunderstood JavaScript mechanism; it does not refer to the function itself or a traditional object instance. Unlike static scope, which is fixed at function definition, `this` represents a dynamic execution context determined by how the function is called. This dynamic context makes an object's properties available during function execution. A 'this-aware' function, like `study()` inside `classroom(teacher)`, depends on this context. When `assignment()` (the returned `study` function) is called without an explicit context, `this` defaults to the global object (e.g., `window` in browsers), causing `this.topic` to resolve to `undefined`. However, if called as a method, `homework.assignment()`, `this` binds to `homework`, allowing `this.topic` to resolve to "JS." The `call(..)` method provides a direct way to specify `this`, as in `assignment.call(otherHomework)`, forcing `this.topic` to be "Math." This dynamic nature of `this` is key to flexible function reuse across different objects, distinguishing it from closure's static scope binding.

A prototype is a characteristic inherent to objects, governing property access resolution through a hidden linkage between objects. This linkage, formed during object creation, connects to an already existing object, creating a 'prototype chain.' The primary purpose of this chain is delegation: if an object `B` lacks a requested property or method, the access is delegated to its linked prototype object `A`. For instance, `var homework = { topic: "JS" };` automatically links to `Object.prototype`, so calling `homework.toString()` delegates to `Object.prototype.toString()`. Object linkage can be explicitly defined using `Object.create(..)`, where `var otherHomework = Object.create(homework);` establishes `homework` as `otherHomework`'s prototype. Critically, while property lookups delegate, property *assignments* apply directly to the target object; `otherHomework.topic = "Math"` creates a new `topic` property on `otherHomework`, 'shadowing' the one on `homework`. The dynamic `this` keyword is essential for prototype-delegated function calls to work correctly. When `jsHomework.study()` delegates its call to the `study()` function defined on `homework`, `this` inside `study()` correctly refers to `jsHomework`, ensuring `this.topic` resolves to "JS." This dynamic `this` behavior allows methods on prototypes to operate on the specific object that initiated the call, a critical distinction from how `this` might behave in other languages and fundamental for JavaScript's object model, including ES6 classes.