为什么要获取“Uncaught ReferenceError：$未定义” Chrome开发者控制台错误？ [英] Why getting "Uncaught ReferenceError: $ is not defined" error on Chrome Dev Console?

问题描述

我试图在Chrome开发者控制台中运行一个简单的JQuery脚本，但是我遇到了问题。

这段代码在运行时没有问题Chrome开发者控制台：

  var someValue = $（[name ='Jack']）; 
 if（someValue！== null）{
 console.log（Jack is here！）; 
} 
  

但是，当我尝试在内部运行相同的代码时出现错误 setTimeout 函数如下：

  setTimeout（function（）{
 var someValue = $（[name ='Jack']）; 
 if（someValue！== null）{
 console.log（Jack is here！）; 
} 
}，1000）; 
  

未捕获的ReferenceError：$未定义

这不仅发生在setTimeout函数中，它也发生在一个普通的函数中。

I正在与最新版本的Google Chrome一起工作。如何在 setTimeout 函数中使用类似上面的JQuery？

解决方案

这里的困惑主要集中在 $ 是 Chrome的命令行API 。在代码中使用 $ 时，您指的是名为 $ 的命令行API函数。您可能根本没有加载jQuery：实际上，您的 someValue！== null 代码甚至无法用于jQuery。你需要测试一个非空的jQuery对象（ someValue.length> 0 ），而不是非 - null $ b

至于为什么 Chrome的 $ 可以在控制台中访问，但是不是 setTimeout 回调：这似乎是特定于引擎的魔术，它将命令行API限制为仅用于控制台代码。 setTimeout 执行回调的方式是Chrome无法确定代码来自控制台，因此它不会授予对名为<$ c $的命令行API函数的访问权限C> $ 。奇怪的是，这不是JavaScript的典型特征。无论执行何时何地，使用普通的JavaScript范围规则， setTimeout 回调应该能够访问与周围代码相同的变量。事实上，这个范围在一秒钟之后是不同的，这是非常令人惊讶的 - 你有权感到困惑！

---

好奇心，在vanilla JavaScript中模拟这种方式的一种方法是使用基于对象的范围，通过和在命令完成后发生变化。例如，如果您输入到控制台中的每个片段都包含：

  var chromeConsoleAPI = {$：function（）{。 ..}} 
（chromeConsoleAPI）{
 //您的代码片段
} 
 delete chromeConsoleAPI。$; 
  

在这种情况下， $ 由访问作用域链上的 chromeConsoleAPI 对象。普通代码可以访问 $ ，但是由于 setTimeout 函数在 chromeConsoleAPI。$ 被删除，它找不到任何名为 $ 的东西。请注意，这仍然没有完全复制该行为，因为这会阻止访问任何用户定义的 $ 。实际上，命令行API必须在作用域链的顶部（即最远端）部分注入其功能。

I'm trying to run a simple JQuery script in Chrome Developer Console but I have a problem.

There is no problem in this code when I run it on Chrome Developer Console:

var someValue = $("[name='Jack']");
if(someValue !== null){
   console.log("Jack is here!");
}

But, I'm getting an error when try to run the same code inside a setTimeout function like below:

setTimeout(function(){
   var someValue = $("[name='Jack']");
   if(someValue !== null){
      console.log("Jack is here!");
   }
}, 1000);

Uncaught ReferenceError: $ is not defined

Not only does this happen in setTimeout function, it happens in a normal function as well.

I'm working with latest version of Google Chrome. How can I use JQuery like above in a setTimeout function?

解决方案

The confusion here is centered on the fact that $ is part of Chrome's Command Line API. When you use $ in your code, you're referring to the Command Line API function named $. You are probably not loading jQuery at all: indeed, your someValue !== null code wouldn't even work with jQuery anyway. You'd need to test for a non-empty jQuery object (someValue.length > 0), not a non-null.

As for why Chrome's $ is accessible in the console but not a setTimeout callback: this appears to be engine-specific magic that limits the command line API to console code only. setTimeout executes its callback in such a way that Chrome cannot be sure the code originated from the console, so it does not grant access to the command line API function named $. Curiously, this isn't typical of JavaScript. Using normal JavaScript scoping rules, the setTimeout callback should have access to the same variables as the surrounding code, regardless of when and where it's executed. The fact that the scope is different one second later is very surprising -- you are right to feel confused!

---

As a curiosity, a way to simulate this in vanilla JavaScript would be with an object-based scope via with that mutates after the command completes. For example, if every snippet you typed into the console were wrapped with:

var chromeConsoleAPI = { $: function() { ... } }
with(chromeConsoleAPI) {
    // your snippet here
}
delete chromeConsoleAPI.$;

In this case, $ is supplied by accessing the chromeConsoleAPI object on the scope chain. Normal code can access $, but since the setTimeout function runs after chromeConsoleAPI.$ is deleted, it does not find anything named $. Note that this still doesn't completely replicate the behavior, because this blocks access to any user-defined $. In actuality, the command line API must inject its functions at the very top (i.e., most remote) part of the scope chain.

这篇关于为什么要获取“Uncaught ReferenceError：$未定义” Chrome开发者控制台错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！