javascript - Chrome DevTools 命令行 API、jQuery、美元符号变量

Question

对标题感到抱歉，因为在撰写本文时我不知道如何定义确切的问题...

我刚才看到的问题是，在某些特定条件下，加载 jQuery 后，DevTools Console 中的美元符号变量 ($) 不会被覆盖。

环境:

• 在未加载 jQuery 的页面上打开 DevTools 控制台。
• 在 DevTools 控制台中运行测试用例。
• 在每个测试用例后重新加载页面，以便卸载 jQuery。
• Chrome 版本:37.0.2062.120 m

准备代码:

function loadJqueryThenFire(func) {
    if (!window.jQuery) {  
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = '//code.jquery.com/jquery-1.11.1.js';
        s.onload = function() {
            func();
            this.parentNode.removeChild(this);
        };
        document.getElementsByTagName('head')[0].appendChild(s);
    } else {
        func();
    }
}

测试用例 1_{(匿名函数表达式)}:

test = function() { console.log($); };
// this returns Console's "$" object
loadJqueryThenFire(test);

测试用例 2_{(命名函数表达式)}:

test = function test() { console.log($); };
// this returns Console's "$" object
loadJqueryThenFire(test);

测试用例 3_{(作为参数传递的匿名函数表达式)}:

// this returns Console's "$" object
loadJqueryThenFire(function() { console.log($); }); 

测试用例 4_{(作为参数传递的命名函数表达式)}:

// this returns Console's "$" object
loadJqueryThenFire(function test() { console.log($); }); 

测试用例 5_{(函数声明)}:

function test() { console.log($); };
// this returns jQuery's "$" object (which is what I am expecting)
loadJqueryThenFire(test); 

这种行为也会发生在最新的 jQuery 稳定版本 (2.1.1) 上。

我的问题是:任何人都可以解释为什么 $ 没有被覆盖吗？这与 jQuery 声明她 $ 的方式有关吗？

编辑:

发现一些更奇怪的行为...

测试用例 6_{(立即调用的函数表达式)}:

(function() {
    function test() { console.log($); };
    // this returns Console's "$" object
    loadJqueryThenFire(test);
})()

测试用例 7_{(嵌套函数声明)}:

function tc7() {
    function test() { console.log($); };
    // this returns jQuery's "$" object (which is what I am expecting)
    loadJqueryThenFire(test); 
}
tc7();

Answer 1

我使用 Chrome 版本 61.0.3163.100 进行了测试，并且在所有情况下 DevTools Console $ 都被 jQuery 覆盖。