JavaScript中如何拦截对象的方法？（以CanvasElement的toDataURL为例）

Great question! The key difference here is that document.createElement is a method directly attached to the document object, while methods like toDataURL() belong to the prototype of the element's class (in this case, HTMLCanvasElement.prototype). All instances of that class inherit methods from this prototype, so we need to modify the prototype to intercept these methods globally, or override the method on a specific instance if you only want to target one element.

1. Global Interception (Affects All Canvas Instances) #

To intercept toDataURL() for every canvas element (existing and future ones), modify the HTMLCanvasElement prototype:

// Store the original method reference
const originalToDataURL = HTMLCanvasElement.prototype.toDataURL;

// Override the prototype method
HTMLCanvasElement.prototype.toDataURL = function(...args) {
  // Your custom interception logic here
  console.log(`toDataURL was called with arguments: ${JSON.stringify(args)}`);
  alert("Canvas toDataURL() intercepted!");

  // Call the original method with the correct context (the canvas instance itself)
  // Using apply() ensures `this` points to the right canvas element
  return originalToDataURL.apply(this, args);
};

Why this works: #

Every <canvas> element inherits its toDataURL() method from HTMLCanvasElement.prototype. By replacing this prototype method, all existing and newly created canvas instances will use your overridden version. The apply() method ensures the original function runs with the correct this context (the specific canvas instance), which is critical for the method to work as intended.

2. Intercept Only a Specific Instance #

If you don't want to affect all canvas elements, you can override the method directly on a single instance:

// Get the specific canvas element
const targetCanvas = document.getElementById("my-target-canvas");

// Store the original method for this instance
const originalInstanceToDataURL = targetCanvas.toDataURL;

// Override the method on just this instance
targetCanvas.toDataURL = function(...args) {
  console.log("Specific canvas's toDataURL() was called!");
  // Call the original method with the correct context
  return originalInstanceToDataURL.apply(this, args);
};

Generalizing to Other Instance Methods #

This pattern works for any prototype-based method. For example, to intercept methods on image elements, you'd modify HTMLImageElement.prototype, and for audio elements, target HTMLAudioElement.prototype. Just make sure you target the correct prototype for the element type you're working with.

内容的提问来源于stack exchange，提问作者Bathooman