Method/Function invocation pattern

100%

Method/Function invocation pattern

✓ Published0🌍 Public

Last edited Jul 23, 2011

Created on Jul 23, 2011

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.

AI-generated description

Similar vizzes

Loading thumbnail…

this, that and module pattern

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.

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

64% 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

59% 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

56% match

Loading thumbnail…

JS Partials

This example demonstrates partial function application in JavaScript, showing how functions can be pre-bound with arguments to create specialized callable functions. It defines two helper functions, `callFirst` and `callLast`, which use the native `Array.prototype.slice` method to manipulate arguments. The code creates a `greet` function that takes two parameters, then uses these helpers to generate `sayHelloTo` and `beGreetedBy`, which pre-fix either the first or last argument. The output shows two example invocations that produce greeting messages with the bound argument applied in the respective position.

Aapburnes

54% 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

53% match

Loading thumbnail…

Classes

This example shows how JavaScript classes can be constructed using three different patterns: functional, prototypal, and pseudoclassical. It uses plain JavaScript functions, the `Object.create` API, and the `new` keyword to demonstrate object creation and method delegation through the `Car.prototype` object. The code defines a `Car` class with a `move` method that increments a `loc` property, illustrating how each pattern achieves the same behavior with varying levels of syntactic convenience.

MMurithi

53% 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

52% match