我正在尝试将函数作用域传递给回调方法。我遇到的问题是我正在获取对象范围，这不让我可以访问原始函数中的参数和局部变量。我对“this”的理解是指当前上下文(无论是窗口还是某个对象)以及本地声明的变量和参数。 [引用 Richard Cornford 在 http://jibbering.com/faq/notes/closures/ 上的出色工作在“执行上下文”部分]。我还知道 JavaScript 中的变量具有函数作用域(如果它们在函数内部声明，则只能从该函数内部访问)。

基于这种理解，在一个新的环境中，我正在尝试编写一个我为我的前雇主做过很多的模式，调用一个异步方法，指定一个回调处理程序并传递我当前的范围，期望它在回调方法。在我当前的环境中，我发现情况并非如此。 (披露:我在以前的环境中使用的是 ExtJS……让我现在觉得我对这个框架有点太自在了，对正在发生的事情做出假设)。

我的简单测试代码演示了我正在尝试做什么以及什么不起作用。

function myHandler(data, ctx) {
    console.log('myHandler():  bar: ' + bar);  // <- prob: bar undefined 
    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, this); // scope object is this
}

lookup();

这里的问题是传递给 MySvcWrap.doWork 的“this”在这种情况下是 Window 全局对象。我的意图是将函数的执行上下文传递给 myHandler。

我试过的。如果我传递的不是“this”，而是一个有效的对象，例如:

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

function lookup() {
    var bar = 'food'; // local var
    MySvcWrap.doWork('thang', myHandler, {bar: bar}); // scope object is just object
}

我需要有人来解决我的问题...在我的第一个案例中传递“this”时，当然这是全局范围(我在全局定义的函数中)...我的问题是我在传递范围时，我认为我可以在该上下文中访问本地定义的变量和参数......我是否动摇了我以前对 JS 的理解？如何完成这个任务？

最佳答案

顺便说一句，关于代码中范围的几句话:

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 作用域和闭包的阅读资源很少:

1. Explaining JavaScript scope and closures
2. Picking up Javascript - Closures and lexical scoping
3. JavaScript: Advanced Scoping & Other Puzzles - 关于主题的非常好的介绍

关于javascript - 将范围传递给回调函数/绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5044807/