this

100%

✓ Published0🌍 Public

Last edited Mar 22, 2017

Created on Mar 22, 2017

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`.

AI-generated description

Similar vizzes

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

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

56% match

Loading thumbnail…

Gist 97d75332d2b298eab79a8849008bce9c

This example demonstrates how a closure in JavaScript can capture a mutable variable, causing a seemingly pure function to change behavior over time. The code defines `fn1`, which returns an object with `get` and `set` methods that share access to the parameter `a`. Initially, `get()` returns the string `"hello"`, but after calling `set()`, the same `get()` returns `"Good bye!"`, and the outer variable `a` is also updated. The visualization shows this state change through console output, using plain JavaScript without external libraries.

RRestuta

55% match

Loading thumbnail…

Gist 5ef57ecbfb116e6b42706fb6a30b0987

This example demonstrates a common JavaScript scoping pitfall with the `var` keyword, contrasting it with `let`. It shows that declaring multiple variables in a single statement like `var i, r = 0;` only initializes the last variable (`r`), leaving `i` as `undefined`. Consequently, while loops testing `i < 10` never execute, while loops on `r` run ten times, printing "chau". The visualization, presented as a code gist, uses plain JavaScript console output via `console.log` within `while` loops, relying on the browser's or Node.js runtime rather than any external libraries. The gist highlights the importance of explicit initialization for each variable.

MMistyBlunch

55% match

Loading thumbnail…

.call()

This example demonstrates the JavaScript `.call()` method within a D3.js context, showing how a custom function can be invoked with an explicit `this` binding and arguments. An SVG element is selected using `d3.select` and then passed to the function via the selection’s `.call()` method, along with a data object containing numeric properties. The function logs the selected DOM element, the passed object, and concatenated property values to the console. The visualization itself renders a blank SVG canvas, with the primary output being console-based rather than graphical, using D3 v6 and plain JavaScript.

Hhanulik.ondrej@gmail.com

54% match

Loading thumbnail…

JavaScript Basics

This example demonstrates the foundational syntax and core concepts of JavaScript through a series of commented-out code snippets. It shows variable declarations, arithmetic operations, control flow with loops, and function definitions, including ES6 arrow functions. The visualization uses a simple SVG canvas with a script tag, and the code is written directly within an HTML file. It covers object literals and constructor functions, illustrating how to create and manipulate objects. The rendering is achieved through the SVG API, and the file includes no external libraries, relying solely on native JavaScript.

Aandu006@gmail.com

52% match

Loading thumbnail…

JavaScript Basics

This example demonstrates basic JavaScript syntax and concepts through a series of commented-out examples, including variables, arithmetic, functions, arrow functions, and object literals. The active code defines an arrow function `person` that returns an object with `first` and `last` properties, then logs the result to the console. It uses an SVG element for structure but relies entirely on the browser's developer console for output. The visualization is rendered without any external libraries, focusing purely on core programming fundamentals rather than data-driven graphics.

KKerotyzzzmo

52% match

Loading thumbnail…

React, removeEventListener and bind(this) gotcha

This example demonstrates a common memory-leak pitfall in React ES6 components: using `bind(this)` directly inside `addEventListener` and `removeEventListener` calls. The code shows a `resize` listener attached to `window` in `componentDidMount` and removed in `componentWillUnmount`, but because each `bind()` creates a new function reference, the removal fails. It then illustrates three fixes: binding once in the constructor, reassigning the method to its bound version, or using a class-level arrow function, highlighting how context binding affects cleanup in lifecycle methods.

RRestuta

52% match