Передача области для функции обратного вызова/привязки

Ответ 1

btw, несколько слов о областях в вашем коде:

function lookup() {
    var bar = 'food'; // local var
    MySvcWrap.doWork('thang', myHandler, this); // this here points to window object and not to the function scope
}

так что это то же самое, что и запись:

function lookup() {
    var bar = 'food'; // local var
    MySvcWrap.doWork('thang', myHandler, window); 
}

это так, потому что вы определяете функцию поиска глобально. внутри doWork, когда вы пишете this, он указывает на объект MySvcWrap (потому что эта функция определена внутри этого объекта).

Если ваша функция обратного вызова должна видеть переменную bar, она должна быть определена в той же области, что и

MySvcWrap = {
    doWork: function(p1, callback, scope) {
        var result = {colors: ['red', 'green'], name:'Jones', what: p1};
        if (callback) {
            callback.call(scope||this,result, scope);
        } 
    }
}
function lookup() {
    var bar = 'food'; // local var
    MySvcWrap.doWork('thang', 
        function (data, ctx) {
            console.log('myHandler():  bar: ' + bar); 
            console.log(JSON.stringify(data));
        }, 
        this); // scope object is this
}

lookup();

в этом случае вы отправляете анонимную функцию в качестве обратного вызова, она определяется внутри функции поиска, чтобы она имела доступ к ее локальным переменным; моя консоль показывает мне в этом cae:

myHandler(): bar: food
{"colors":["red","green"],"name":"Jones","what":"thang"}

чтобы упростить поддержку, вы можете определить функцию myHandler внутри функции поиска:

function lookup() {
    var bar = 'food'; // local var
    var myHandler = function(data, ctx) {
        console.log('myHandler():  bar: ' + bar);
        console.log(JSON.stringify(data));
    };
    MySvcWrap.doWork('thang', myHandler, this); // scope object is this
}

С другой стороны, почему одна функция должна иметь доступ к локальным переменным другой функции? Возможно, его можно переделать...

Еще один способ заставить ваш код работать - использовать анонимную функцию вместо поиска (будет работать, если вы просто объявите и выполните эту функцию один раз):

(function() {
   var bar = 'food';

   function myHandler(data, ctx) {
       console.log('myHandler():  bar: ' + bar);  
       console.log(JSON.stringify(data));
    } 
    MySvcWrap = {
       doWork: function(p1, callback, scope) {
           var result = {colors: ['red', 'green'], name:'Jones', what: p1};
           if (callback) {
               callback.call(scope||this,result, scope);
           } 
       }
    }
    MySvcWrap.doWork('thang', myHandler, this);
  }
)();

результат тот же, но никакой функции поиска больше нет...

И еще одна идея, чтобы заставить ее работать... На самом деле вам нужно определить обработчик обратного вызова в той же области, где определена переменная bar, поэтому ее можно сделать немного сложной, но как альтернатива:

function myHandler(bar) { // actually in this case better to call it createHandler 
    return function(data, ctx) {
        console.log('myHandler():  bar: ' + bar); 
        console.log(JSON.stringify(data));
    } 
}
MySvcWrap = {
    doWork: function(p1, callback, scope) {
        var result = {colors: ['red', 'green'], name:'Jones', what: p1};
        if (callback) {
            callback.call(scope||this,result, scope);
        } 
    }
}
function lookup() {
    var bar = 'food'; // local var
    MySvcWrap.doWork('thang', myHandler(bar), this); // scope object is this
}

И немного ресурсов для чтения о области обзора и закрытия JavaScript:

• Объяснение области JavaScript и закрытия
• Поднятие Javascript - Закрытие и лексическое охват
• JavaScript: расширенное определение и другие головоломки - очень хорошая презентация о теме

Ответ 2

Код будет работать, если он был структурирован таким образом.

MySvcWrap = {
    doWork: function(p1, callback, scope) {
        var result = {colors: ['red', 'green'], name:'Jones', what: p1};
        if (callback) {
            callback.call(scope||this,result, scope);
        } 
    }
}
function lookup() {
    var bar = 'food'; // local var

    function myHandler(data, ctx) {
        console.log('myHandler():  bar: ' + bar);  // <- prob: bar undefined 
        console.log(JSON.stringify(data));
    }

    MySvcWrap.doWork('thang', myHandler, this); // scope object is this
}

lookup();

Функция myHandler может обращаться к локальным переменным поиска, поскольку она закрыта им, поэтому закрывается.

Вероятно, я попытался бы достичь такого же результата, структурируя код следующим образом.

function myHandler(data, bar, ctx) {
    console.log('myHandler():  bar: ' + bar);  // <- prob: bar undefined 
    console.log(JSON.stringify(data));
}
MySvcWrap = {
    doWork: function(p1, callback) {
        var result = {colors: ['red', 'green'], name:'Jones', what: p1};
        if (callback) {
            callback(result);
        } 
    }
}
function lookup() {
    var bar = 'food'; // local var
    MySvcWrap.doWork('thang', myHandler.bind(this, bar)); // callback function is bound to the scope
}

lookup();

Вместо того, чтобы передавать область действия, я использую bind внутри метода поиска. Используя bind, я также могу добавить локальные переменные, которые я хочу передать из этой области.

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

Ответ 3

Я был немного уверен в своем первом ответе и оставил некоторые пробелы, как указано Maxym в комментариях ниже, спасибо за то, что сообщил мне:) Это то, что я получаю за попытку опубликовать быстро, прежде чем возвращаться к работе: P

То, что я пытался получить в своем первом ответе, - это если вы хотите использовать привязку для доступа к переменным в функции lookup из функции myHandler (которая выходит за пределы lookup), вам не придется используйте var, но this.

Использование var сделает его доступным только для lookup's частной области видимости и любых функций, вложенных в нее, как показали другие ответы (и, вероятно, лучший маршрут)

Ниже приведен обновленный пример того, как передать область поиска myHandler, оставляя myHandler полностью вне области поиска. Надеюсь, это поможет немного пролить свет на:

"Проблема заключается в том, что я получаю объектную область, которая не предоставляет мне доступ к параметрам и локальным переменным в исходной функции".

Как указано в комментариях к моему предыдущему ответу, this может стать сложным, и вы можете добавить вещи в область global, если не будете осторожны, как это было в моем первом примере.:( Итак, я добавил немного хакерской проверки, чтобы увидеть, какая область this делает это не для window для демонстрационных целей...

Живой пример

function myHandler(data, ctx) {
    console.log('myHandler():  bar: ' + this.bar); // <- must use `this`
    console.log('myHandler():  privateBar: ' + this.privateBar); // <- undefined because it privately scoped
    console.log(JSON.stringify(data));
}
MySvcWrap = {
    doWork: function(p1, callback, scope) {
        var result = {
            colors: ['red', 'green'],
            name: 'Jones',
            what: p1
        };
        if (callback) {
            callback.call(scope || this, result, scope);
        }
    }
}

function lookup() {
    if(this == window) return lookup.call(lookup); // <- my hack'ish check

    var privateBar = 'private food'; // private local var
    this.bar = 'food'; // public local var
    MySvcWrap.doWork('thang', myHandler, this); // scope object is this
}

lookup();

console.log('global space - bar: ' + this.bar);