this, that and module pattern

100%

this, that and module pattern

✓ Published0🌍 Public

Last edited Aug 5, 2011

Created on Aug 4, 2011

This example illustrates JavaScript’s `this` binding rules across different invocation patterns, using plain console output rather than a visual dataset. It demonstrates how `this` behaves in object methods, immediately invoked function expressions, and module patterns, with the `module.js` file showing a revealed-module approach where a helper function loses its object context. The code relies solely on native JavaScript and the console API, with no external libraries or rendering. The key contrast is between caching `this` into `that` (as in `init.js`) versus relying on implicit binding, which yields either the object or the `DOMWindow` depending on the call site.

AI-generated description

Similar vizzes

Loading thumbnail…

Method/Function invocation pattern

This example illustrates the distinction between method invocation and function invocation patterns in JavaScript, focusing on how the `this` binding changes context. It shows that calling a function as a property of an object (e.g., `o.incr()`) binds `this` to that object, while invoking a standalone helper function (e.g., `helper()`) binds `this` to the global object, requiring a workaround like storing `this` in a variable (`that`). The code defines an object `o` with a `value` property and demonstrates both patterns through custom functions, using plain JavaScript without any external libraries.

Aabernier

74% match

Loading thumbnail…

this

This example explains the JavaScript parameter `this`, contrasting it with ordinary function parameters. It shows how binding is determined by calling context, such as a method call with an object left of the dot. The code demonstrates the five binding rules, including implicit binding through dots, explicit binding via `fn.call(r,g,b)`, and behavior in callbacks like `setTimeout()`. It clarifies how passing a method like `r.method` to a callback still binds `this` to the global object, requiring a wrapper function to preserve the intended object, and how the `new` keyword creates a fresh object for `this`.

MMurithi

69% match

Loading thumbnail…

Gist d4a6d55663d524237c14

This example demonstrates a JavaScript module that automatically instruments an object’s methods to log their arguments and return values to the browser console. It uses the `underscore` library to chain through the object’s functions, wrapping each method with `console.group` and `console.log` calls. The wrapper takes a module and an identifier, replacing each original method with a logging version that preserves the original behavior. The code shows the pattern for debugging or tracing method calls in a modular JavaScript application.

TThomasG77

67% match

Loading thumbnail…

Arrow functions and "this"

This example demonstrates how arrow functions bind `this` to their enclosing lexical scope, unlike regular functions. The JavaScript code defines `Foo` and `Bar`, each with a `setTimeout` callback that logs `this` to the console. A regular function in `Foo` causes `this` to refer to the global `window` object, while the arrow function inside `Bar` preserves the constructor instance, printing `Bar`. The example uses native JavaScript `setTimeout` and `console.log` to illustrate the difference in behavior.

RRestuta

67% match

Loading thumbnail…

JS tips

This example demonstrates common JavaScript programming patterns and techniques through concise code snippets. It covers assignment shortcuts, existential checks, JSONP implementation with jQuery’s `getJSON`, a polyfill for `Object.create`, function proxying, reserved words, and the `array.indexOf` method. The code is presented as a gist, showing practical APIs like `Object.create`, `func.apply`, and `Array.indexOf`, with comments explaining each pattern and equivalent syntax in CoffeeScript.

Aabernier

64% match

Loading thumbnail…

JS modules Learner

This example demonstrates the JavaScript module system for importing and exporting variables between files. It shows how to share constants (`aThing`, `someThing`) across script files and how to load D3’s `select` API. The page renders a static HTML message with an inline `<style>` rule for large centered text, then logs imported values and the D3 `select` object to the console. It uses `d3.v7` from a CDN and relies on the browser’s native ES module support.

KKamalabot

63% match

Loading thumbnail…

Gist d80bd46ed04fa250a647

This example demonstrates a minimal JavaScript function, `foo`, which logs the current execution context using `console.log(this)`. It shows the behavior of `this` when the function is invoked, but does not include any data visualization or rendering code. The implementation relies solely on the JavaScript runtime’s `console` API, with no external libraries or visual elements present. The gist serves as a bare code snippet for testing or demonstrating context binding, not a graphical chart or interactive display.

VVictorHom

62% match

Loading thumbnail…

JS local scope definition

This example illustrates the distinction between global and local scope in JavaScript, showing how function declarations behave differently depending on their context. The first script defines a `bla()` function in the global scope, making it accessible via `window.bla()`, while the second script wraps a `foo()` function inside an immediately invoked function expression (IIFE) with `(function() { ... })()`, preventing external access. The code uses the browser's `console.log` to demonstrate execution order and visibility. No external libraries or data sources are involved; the example relies solely on native JavaScript scope rules within a plain HTML document.

RRestuta

61% match