javascript - 理解回调和相关的词法范围

Question

我试图通过 setTimeout 函数理解回调。我有两套代码:

for (var i = 1; i <= 10; i++) {
        (function(callback,i){
          setTimeout(function(){
            callback(i)
          }, 0);
         })(function(val){console.log(val)},i);

它可以很好地打印 1,2,3,.... 10

但是当我尝试将setTimeout 的回调函数抽象为:

for (var i = 1; i <= 10; i++) {
        (function(callback,i){
          setTimeout(func, 0);
         })(function(val){console.log(val)},i);
        }
function func(){
    callback(i)
  }

它给我错误说明

Uncaught ReferenceError: callback is not defined

我知道 func 函数声明的词法范围存在一些问题。但无法理解原因。请帮助我理解这一点。

Answer 1

它会抛出引用错误，因为函数 func 有一个作用域，其中没有 callback 的声明。您可以通过将回调作为参数传递给 func 来修复它。

for (var i = 1; i <= 10; i++) {
  (function(callback, i) {
    setTimeout(func, 0, callback.bind(null, i)); //Pass the callback here as a parameter to func. 
                                   //(setTimeout can pass its >2 parameter as 
                                   //its callback parameter)
  })(function(val) {
    console.log(val)
  }, i);
}

function func(callback) { //receive the callback here and use it.
  callback();
}