有趣的Js Quiz,测测你的Core Js内功

最近看国外同行的技术博客, 看到一篇有关"javascript小测试"的博文, 很有意思, 其中每个题目短小精悍, 却能很好的考察对 Core Javascript的掌握深度.如果你感兴趣,可以点击JavaScript Quiz查看原文, 为了做个记录, 我准备在下文罗列出这些题目, 并给出解释, 如果有解释不到位的地方, 欢迎园友指出.

首先有几个要注意的地方:

• 以下题目采用ECMA3标准(不是5)

• quirks模式的实现不予考虑

• 每个代码片段的running context都是global

• 除了代码中声明的变量, 没有其他的变量被声明

• 答案根据表达式/语句(或最后一行)返回的值而定

    // 第一题
    (function() {
        return typeof arguments;
    })();
    // "Object"，好像没什么解释的，firebug下log下。


    // 第二题
    var f = function g() { return 23; };
    typeof g();
    // Runtime Error, 注意到第一行“=”右边是一个声明函数，如function funcName() {}，
    // “=”左边是var f即声明变量f，而整个语句对f进行了声明并初始化, 这种形式下funcName只能在函数体内做为函数本身的引用, 
    // 外部是无法访问的, 所以g是undefined, g()出错, 这里可以做下引申, 在ECMA5中arguments.callee已经deprecated, 
    // 所以我们能用以上特性来代替它, 如下面代码:
    (function funcName() {
        // ... some tasks here
        
        // then, after 1s do more
        // here we use funcName to replace arguments.callee which now is deprecated in ECMA5
        setTimeout(funcName, 1000)
    })();


    // 第三题
    (function(x) {
        delete x;
        return x;
    })(1);
    // 1, x在一个函数作用域中, 只是个变量, 这里delete x没什么实际意义, 关于delete操作也能引出 不少有趣的问题, 
    // 这里有篇博文详细阐述了delete操作, 点击understanding delete查看原文


    // 第四题
    var y = 1, x = y = typeof x;
    x;
    // "undefined", 主要是赋值语句从右向左执行, 首先y = typeof x, 此时x还未定义, 则y为"undefined", 再x = y, x初始化为"undefined"


    // 第五题
    (function() f(f) {
        return typeof f();
    })(function() { return 1; });
    // "number", 如果函数名和参数名一样, 那么参数名的"优先级"更高, 覆盖同名函数名


    // 第六题
    var foo = {
        bar: function() { return this.baz; },
        baz: 1
    };
    (function() {
        return typeof arguments[0]();
    })(foo.bar);
    // "undefined", 我们看到foo.bar做为参数传入, foo.bar是个函数, 实际上arguments[0]是个指向此函数的引用, 
    // 当通过 arguments[0]()执行此函数时, 其running context并不是foo, 所以函数中的this.baz为"undefined", 
    // 再深入分析, 你便会发现在runtime, this指向return typeof arguments[0]();中的arguments


    // 第七题
    var foo = {
        bar: function(){ return this.baz; },
        baz: 1
    }
    typeof (f = foo.bar)();
    // "undefined", 解释如上一题, f是指向foo.bar函数的引用, 执行时不涉及foo, runtime时, this指向window


    // 第八题
    var f = (function f(){ return "1"; }, function g(){ return 2; })();
    typeof f;
    // "number", 此题主要是"逗号"表达式, 记住一点就行了: "逗号"表达式的值, 由其中最后一个表达式来定. 
    // 这样一来问题就很简单了, "逗号"表达式返回函数g, 执行函数g返回2, 便是"number"了.


    // 第九题
    var x = 1;
    if (function f(){}) {
        x += typeof f;
    }
    x;
    // "1undefined", 主要是如何看待function f() {}, 这里这个函数声明被用作if的一个条件表达式, 而不是声明在global context下. 
    // 函数名f, 在函数外部依然无法访问, 所以typeof f为"undefined"


    // 第十题
    var x = [typeof x, typeof y][1];
    typeof typeof x;
    // "string", 可以简单的看成: var x = ["undefined", "undefined"][1]


    // 第十一题
    (function(foo){
        return typeof foo.bar;
    })({ foo: { bar: 1 } });
    // Runtime Error, 看清楚传入的是{ foo: { bar: 1} }, 所以应该是foo.foo.bar, 这样代码才能正常通过


    // 第十二题
    (function f(){
        function f(){ return 1; }
        return f();
        function f(){ return 2; }
    })();
    // 2, 记住一点:javascript引擎的在处理代码过程中,会预先把变量,函数的声明放到作用域头部,
    // 所以以上代码等价如下代码:
    (function f(){
        function f(){ return 1; }
        function f(){ return 2; } // override previous function declaration
        return f();
    })();


    // 第十三题
    function f(){ return f; }
    new f() instanceof f;
    // false, 虽然用了new操作符, 但是函数f会返回其本身的引用, 所以这里的new没起到作用


    // 第十四题
    with (function(x, undefined){}) length;
    // 2, with表达式基本很少用, 或者根本不推荐使用, with用于绑定其块级代码的context, 
    // 这里length可以看做 this.length, 而this指向的就是函数function(x, undefined) {}, 很明显有2个形参