Переопределение функции JavaScript при обращении к оригиналу - PullRequest
153 голосов
/ 17 ноября 2008

У меня есть функция a(), которую я хочу переопределить, но при этом оригинал a() должен выполняться в порядке, зависящем от контекста. Например, иногда, когда я генерирую страницу, я хочу переопределить это так:

function a() {
    new_code();
    original_a();
}

и иногда так:

function a() {
    original_a();
    other_new_code();
}

Как мне получить это original_a() из-за перегрузки a()? Это вообще возможно?

Пожалуйста, не предлагайте альтернатив для переезда таким образом, я знаю многих. Я специально спрашиваю об этом.

Ответы [ 11 ]

177 голосов
/ 17 ноября 2008

Вы можете сделать что-то вроде этого:

var a = (function() {
    var original_a = a;

    if (condition) {
        return function() {
            new_code();
            original_a();
        }
    } else {
        return function() {
            original_a();
            other_new_code();
        }
    }
})();

Объявление original_a внутри анонимной функции не дает ей загромождать глобальное пространство имен, но доступно во внутренних функциях.

Как упоминал в комментариях Nerdmaster, обязательно добавьте () в конце. Вы хотите вызвать внешнюю функцию и сохранить результат (одну из двух внутренних функций) в a, а не сохранять саму внешнюю функцию в a.

81 голосов
/ 17 ноября 2008

Шаблон Proxy может помочь вам:

(function() {
    // log all calls to setArray
    var proxied = jQuery.fn.setArray;
    jQuery.fn.setArray = function() {
        console.log( this, arguments );
        return proxied.apply( this, arguments );
    };
})();

Вышеприведенное оборачивает свой код в функцию, чтобы скрыть переменную «прокси». Это сохраняет setArray-метод jQuery в замыкании и перезаписывает его. Затем прокси регистрирует все вызовы метода и делегирует вызов оригиналу. Использование apply (this, arguments) гарантирует, что вызывающая сторона не сможет заметить разницу между оригинальным и проксируемым методом.

27 голосов
/ 16 ноября 2009

Спасибо, ребята, шаблон прокси действительно помог ..... На самом деле я хотел вызвать глобальную функцию foo На определенных страницах мне нужно сделать несколько проверок. Поэтому я сделал следующее.

//Saving the original func
var org_foo = window.foo;

//Assigning proxy fucnc
window.foo = function(args){
    //Performing checks
    if(checkCondition(args)){
        //Calling original funcs
        org_foo(args);
    }
};

Спасибо, это действительно помогло мне

9 голосов
/ 31 января 2010

Вы можете переопределить функцию, используя такую ​​конструкцию как:

function override(f, g) {
    return function() {
        return g(f);
    };
}

Например:

 a = override(a, function(original_a) {
      if (condition) { new_code(); original_a(); }
      else { original_a(); other_new_code(); }
 });

Редактировать: Исправлена ​​опечатка.

4 голосов
/ 31 января 2012

Передача произвольных аргументов:

a = override(a, function(original_a) {
    if (condition) { new_code(); original_a.apply(this, arguments) ; }
    else { original_a.apply(this, arguments); other_new_code(); }
});
1 голос
/ 17 ноября 2016

Ответ, который дает @Matthew Crumley, заключается в использовании немедленно вызванных выражений функции, чтобы закрыть старую функцию 'a' в контексте выполнения возвращаемой функции. Я думаю, что это был лучший ответ, но лично я предпочел бы передать функцию «а» в качестве аргумента IIFE. Я думаю, что это более понятно.

   var a = (function(original_a) {
        if (condition) {
            return function() {
                new_code();
                original_a();
            }
        } else {
            return function() {
                original_a();
                other_new_code();
            }
        }
    })(a);
1 голос
/ 19 сентября 2012

Приведенные выше примеры неправильно применяют this или передают arguments правильно для переопределения функции. Подчеркивание _.wrap () оборачивает существующие функции, применяет this и правильно передает arguments. Смотри: http://underscorejs.org/#wrap

0 голосов
/ 30 августа 2018

Таким образом, мой ответ оказался решением, которое позволяет мне использовать переменную _this, указывающую на исходный объект. Я создаю новый экземпляр «Квадрата», но ненавидел то, как «Квадрат» генерировал его размер. Я думал, что это должно следовать моим конкретным потребностям. Однако, чтобы сделать это, мне нужно было, чтобы в квадрате была обновленная функция «GetSize» с внутренними компонентами этой функции, вызывающими другие функции, уже существующие в квадрате, например this.height, this.GetVolume (). Но для этого мне нужно было делать это без каких-либо сумасшедших взломов. Итак, вот мое решение.

Некоторые другие инициализаторы объектов или вспомогательные функции.

this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(
  this.viewerContainer)
var viewer = this.viewer;
viewer.updateToolbarButtons =  this.updateToolbarButtons(viewer);

Функция в другом объекте.

updateToolbarButtons = function(viewer) {
  var _viewer = viewer;
  return function(width, height){ 
blah blah black sheep I can refer to this.anything();
}
};
0 голосов
/ 12 сентября 2016

По моему мнению, топовые ответы не читабельны / не подлежат сопровождению, а остальные ответы неправильно связывают контекст. Вот читаемое решение, использующее синтаксис ES6 для решения обеих этих проблем.

const orginial = someObject.foo;
someObject.foo = function() {
  if (condition) orginial.bind(this)(...arguments);
};
0 голосов
/ 25 ноября 2015

Я создал небольшой помощник для аналогичного сценария, потому что мне часто приходилось переопределять функции из нескольких библиотек. Этот помощник принимает «пространство имен» (контейнер функции), имя функции и переопределяющую функцию. Он заменит исходную функцию в указанном пространстве имен новой.

Новая функция принимает исходную функцию в качестве первого аргумента, а исходные функции - в качестве остальных. Это сохранит контекст каждый раз. Он также поддерживает функции void и non void.

function overrideFunction(namespace, baseFuncName, func) {
    var originalFn = namespace[baseFuncName];
    namespace[baseFuncName] = function () {
        return func.apply(this, [originalFn.bind(this)].concat(Array.prototype.slice.call(arguments, 0)));
    };
}

Использование, например, с Bootstrap:

overrideFunction($.fn.popover.Constructor.prototype, 'leave', function(baseFn, obj) {
    // ... do stuff before base call
    baseFn(obj);
    // ... do stuff after base call
});

Хотя я не создавал никаких тестов производительности. Это может добавить некоторые нежелательные накладные расходы, которые могут или не могут иметь большое значение, в зависимости от сценариев.

...