javascript - 将代码添加到每个 Canvas 上下文方法

Question

我正在尝试向在 Canvas 上下文中调用的每个方法添加一些代码。我正在尝试这样做，以便我可以将每个命令添加到命令数组中。这是我认为有效(但无效)的代码:

var canvas = Object.getPrototypeOf(document.createElement('canvas').getContext('2d'));
for(p in canvas){
    if(canvas.hasOwnProperty(p)){
        var original = canvas[p];
        canvas[p] = function(){

            //extra code to be run

            return original.apply(this,arguments);
        }
    }
}

在我看来，这似乎应该有效，但实际上没有。如果我在示例中使用此代码，我会得到一个 NOT_SUPPORTED_ERR: DOM Exception 9

演示:http://jsfiddle.net/J3tUD/2/

Answer 1

您遇到的问题是变量不是 block 作用域。

当您的函数运行时，它会更新上下文原型(prototype)，以便每个函数调用相同的函数 original，这是原始原型(prototype)拥有的最后一个元素。在本例中，即 webkitGetImageDataHD。

这意味着当您调用 ctx.beginPath(); 时，您实际上调用了 ctx.webkitGetImageDataHD();。此方法需要 4 个参数，但由于未获取它们，因此抛出 DOM 异常 9。

由于 JavaScript 不支持 block 作用域，您必须使用函数强制更改作用域。修改您的示例，我们可以创建一个新函数，其中 original 是一个固定值:

var context = Object.getPrototypeOf(document.createElement('canvas').getContext('2d'));

function bind(context, p) {
    // context, p, and original never change.
    var original = context[p];
    context[p] = function(){
        console.log(p, arguments);
        return original.apply(this,arguments);
    }
}

// p changes with every iteration.
for(p in context){
    if(context.hasOwnProperty(p)){
        bind(context, p);
    }
}

在这里找到一个工作演示:http://jsfiddle.net/bnickel/UG9gF/