JS Bin

100%

✓ Published0🌍 Public

Last edited Feb 7, 2019

Created on Feb 7, 2019

This example demonstrates how to intercept and log method calls on a JavaScript object without altering the original function's behavior. It shows a `User` class with a `trackAction` method, which is replaced with a wrapper that logs the arguments to the console while still invoking the original method using `apply` to preserve context. The code relies on ES6 classes, arrow functions, and `Array.prototype.slice` to handle arguments, with output visible in the browser console.

AI-generated description

Similar vizzes

Loading thumbnail…

JS Bin

This example demonstrates how to intercept and log method calls on a JavaScript object while preserving the original function’s behavior. It shows a `User` class with a `trackAction` method that makes an AJAX request, then overrides that method on an instance to print the function’s arguments to the browser console. The code uses ES6 classes, arrow functions, `Array.prototype.slice` to convert arguments, and `Function.prototype.apply` to maintain the correct `this` context. The output appears in the console, illustrating a common debugging or instrumentation pattern.

Aalessioalex

95% match

Loading thumbnail…

JS Bin

This example demonstrates how to wrap an existing method on a JavaScript object to log its arguments while preserving the original behavior. It shows a `User` class with a `trackAction` method that calls a mock `makeAjaxRequest`, and then replaces that method with a wrapper that uses `console.log` to output the function’s arguments and `this` context. The wrapper invokes the original function via `originalFn.apply(this, args)`, ensuring the correct context and return value. The code relies on ES6 classes, arrow functions, and `Array.prototype.slice` to handle arguments.

Aalessioalex

90% match

Loading thumbnail…

JS Bin

This example demonstrates a JavaScript function-wrapping utility that intercepts and modifies the behavior of existing functions. The code defines a `wrapper` function, which takes a context object, a function name, and an optional modifier function, then replaces the original function with a proxy that logs arguments or applies custom modifications. Two concrete use cases are shown: wrapping the native `JSON.parse` method to display its arguments in the console, and wrapping a custom `logMsg` function to prepend a prefix to its message. The example uses plain JavaScript (ES5) and relies on the browser console for output.

Aalessioalex

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

66% match

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring of objects through a side-by-side comparison of original source code and the compiled output. The `index.html` file contains two script blocks: the first shows transpiled ES5 code using `var` declarations and manual property access, while the second shows the original ES6 source with `const` and destructuring assignment. The code logs names from objects to the console, illustrating how ES6 destructuring patterns translate into traditional variable assignments. The visualization uses plain HTML and JavaScript with no external libraries.

AAlsaxian

60% match

Loading thumbnail…

intercept *.addEventListener for debugging

This example demonstrates how to intercept and log every `addEventListener` call on HTML element prototypes for debugging purposes. It enumerates all `HTML*` interfaces from `window`, then wraps each prototype’s `addEventListener` method to print the event type, listener, and `useCapture` flag, followed by a stack trace via `console.trace()`. The code uses native browser APIs like `Object.getOwnPropertyNames`, `window`, and prototype manipulation, with no external libraries, and is based on a Stack Overflow solution adapted for Firefox.

Aalessioalex

59% match

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring and template literal syntax, contrasting a concise ES6+ implementation with its transpiled ES5 equivalent. The page’s source code includes a hand-written JavaScript version using `const` and arrow functions, alongside a generated `'use strict'` script that employs `var` and helper functions like `printName` to achieve the same console output. The data being processed is a simple inline object literal with a name and age property. The visualization is purely textual, relying on the browser’s console to show the logged results of both code paths.

AAlsaxian

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

58% match