Изменить собственные функции CanvasRenderingContext2D - PullRequest
Новая
       14

Изменить собственные функции CanvasRenderingContext2D

2 голосов
/ 17 октября 2011

Итак, вы можете сделать это: 

window.alert=function(a) {
    return function(b) {
        a(b+'!')
    }
}(window.alert)

Теперь внезапно alert('Hi') предупредит Hi!.Итак, функция оповещения окна была успешно изменена.Fun.

Теперь у меня проблема с применением этой же концепции к HTML5 CanvasRenderingContext2D (canvas).Я не уверен, если prototype является проблемой или это что-то еще, но он возвращает ошибку «незаконного вызова», когда я пытаюсь вызвать недавно измененную функцию lineTo. 

CanvasRenderingContext2D.prototype.lineTo=function(a) {
    return function(b,c) {
        a(b,c)
        return this
        }
    }(CanvasRenderingContext2D.prototype.lineTo)

Может кто-нибудь получитьчтобы это работало или, по крайней мере, выяснило, что именно это вызывает?

Кроме того, если вам интересно, моя причина для этого - создать цепочку с помощью функций canvas (например, context.lineTo(10,15).lineTo(20,15).lineTo(20,20)).

1 Ответ

3 голосов
/ 17 октября 2011

Прежде всего, обязательное предупреждение против изменения хост-объектов .

Теперь, когда вы знаете, во что ввязываетесь, вот проблема с вашим фрагментом:

Новая функция, назначенная CanvasRenderingContext2D.prototype.lineTo, вызывает старую функцию просто как a(b, c). Когда функция вызывается так - a(b, c) - также известная как «вызывается как функция», она выполняется с this глобальным объектом.

Поэтому context.lineTo(10, 15) теперь будет выполнять старую функцию lineTo (с псевдонимом a), где this будет глобальным объектом, а не context. Когда lineTo не имеет возможности работать с context, он, очевидно, мало что может сделать, поэтому возникает ошибка.

Как это исправить?

Ну, мы можем вызвать функцию с правильным this значением: 

CanvasRenderingContext2D.prototype.lineTo = function(a) {
  return function(b,c) {
    a.call(this, b, c);
    return this;
  };
}(CanvasRenderingContext2D.prototype.lineTo);

Обратите внимание a.call(this, b, c), который вызывает a функцию с правильным this.

...