有趣的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个形参
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。