有趣的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个形参