JavaScript中对象的拦截方法

Question

我知道如何在JavaScript中拦截本机函数。 例如，我使用下面的代码来拦截document.createElement ：

var origParseFloat = document.createElement;
document.createElement = function(str) {
     alert("Called");
     return origParseFloat(str);
}

我的问题是如何截获对象的方法。 我的意思是如果我想拦截toDataURL()这是CanvasElement的方法，上面的代码在这种情况下不起作用。 所以现在的主要问题是在以下情况下如何拦截toDataURL() ：

canvas = document.createElement('canvas');
var tdu = canvas.toDataURL();

Answer 1

您需要对该方法出现的prototype进行猴子修补，以HTMLCanvasElement.prototype.toDataURL 。

 var origToDataURL = HTMLCanvasElement.prototype.toDataURL; HTMLCanvasElement.prototype.toDataURL = function() { var r = origToDataURL.apply(this, arguments); console.log('toDataURL:', r); return r; }; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillRect(25, 25, 50, 50); canvas.toDataURL(); 

 <canvas id="canvas" width="100" height="100"></canvas> 

或者，如果您知道canvas元素是使用document.createElement创建的，那么我想您可以在该实例上定义一个新方法，但是该方法的可靠性较差，因为会丢失使用HTML创建的元素，并且对象结构在技术上有所不同。

您也可以对getter函数执行类似的操作。

 // Function to find the prototype chain object that has a property. function findPrototypeProperty(obj, prop) { while (!obj.hasOwnProperty(prop)) { obj = Object.getPrototypeOf(obj); } return obj; } var property = 'sampleRate'; var proto = findPrototypeProperty(AudioContext.prototype, property); var desc = Object.getOwnPropertyDescriptor(proto, property); var getter = desc.get; desc.get = function() { var r = getter.apply(this, arguments); console.log(property, r); return r; }; Object.defineProperty(proto, property, desc); var audioCtx = new AudioContext(); void(audioCtx.sampleRate);