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

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

callback 未在 func 中定义。您可以将 func 作为参数传递给 IIFE，使用 Function.prototype.bind() 将 i 传递给 callback ：func

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

function func(val) {
  console.log(val)
}

Answer 2

它抛出引用错误，因为函数 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();
}

Answer 3

在 func 中，您没有引用在 IIFE.So 中声明的 callback，它开始查找当前范围，即您的 func scope.then 它试图在全局范围内查找，它也没有定义 there.Finally 它抛出一个错误

您需要将引用传递给引用该函数的回调参数以消除此错误。

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

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

Understanding callbacks and related lexical scoping

javascript

callback

lexical-scope