Skip to content

四火的唠叨

一个纯正程序员的啰嗦

Menu
  • 所有文章
  • About Me
  • 关于四火
  • 旅行映像
  • 独立游戏
  • 资源链接
Menu

几道容易出错的 JavaScript 题目

Posted on 07/06/201306/23/2019 by 四火

crazy下面这几道 JavaScript 题目大多来自于周五的一个小分享。都是很小的题目,但是很容易犯错。有一些是语言特性使然,有一些则是语言本身没有设计好而留下的陷阱。结果就是,遇到的人很容易陷进去骂娘,这些东西是略有些反直觉,感兴趣的不妨看看,平时我们还是尽量少些这样似是而非的代码。

1.

function Container( properties ) {
    var objthis = this;
    for ( var i in properties ) {
        (function(){
                var t = properties[i];
                objthis[ "get" + i ] = function() {return t;};
                objthis[ "set" + i ] = function(val) {t = val;};
        })();
    }
}

var prop = {Name : "Jim", Age : 13};
var con = new Container(prop);
console.log(con.getName());

con.setName("Lucy");
console.log(con.getName());
console.log(prop.Name);

这段代码会输出什么?前面两行分别是“Jim” 和“Lucy”,这不会有问题;但是第三行应该输出的是“Jim”,但是有的人会误认为 prop 对象已被修改,故输出“Lucy”。其实在匿名函数中,properties[i] 的值已经赋给了临时变量 t,之后闭包对于外部变量的引用完全由 t 这个媒介来完成,因此 prop 传入以后并未发生任何属性的更改。

2.

function a (x) {
    return x * 2;
}
var a;
console.log(a);

这段代码中,其实 var a 并没有任何影响,输出的是 a(x) 这样的方法签名。

3.

c = 999;
var c = 888;
console.log(this.c); //①
function b (x, y, c) {
    c = 6;
    arguments[2] = 10;
    console.log(c); //②
    console.log(this.c); //③
    
    var c = 6;
    console.log(c); //④
    console.log(this.c); //⑤
}
b(1, 2, 3, 4);

这道题是比较变态的。

  • 第①处,this 指的是 window,在 window 下,c、this.c、var c 在这里指的是同一个东西,看透这一点就好办了。打印的是 888。
  • 第②处,方法体中,参数 c 和 arguments[2] 指的是同一个地址,所以把后者赋为 10 的时候,打印的是 10,不是 6。
  • 第③处,this 指的是 window,打印的是 888。
  • 第④处,打印的是 6。
  • 第⑤处,打印的是 888。

4.

var start = new Date();
setTimeout(
	function(){
		var end = new Date();
		console.log(end - start);
	},
	1000
);
while(new Date() - start < 2000);

JavaScript 因为是单线程工作的,因此虽然回调函数设置了 1000 毫秒后执行,事实上在 1000 毫秒的时候根本得不到执行,等待到 while 循环执行完毕后(因此已经是 2000 毫秒以后了),才去执行,因此输出应该是一个大于 2000 的数字。

5.

(function(){
    console.log(typeof arguments);
})();

很多人会说打印的是 array,其实,typeof 根本不会打印 array 的啊,打印的是 object。

6.

function a(){return a;}
console.log(new a() instanceof a);

应该打印的是 false,其实原因很简单,new a() 的时候,因为 return 语句,得到的不是 a 的实例,而是 a 本身,a instanceof a 当然是 false 啦。

最后,还有一个小题目是关于 Function Invocation Pattern 的,我在这篇文章里有写到,就不单独贴出来了。

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接 《四火的唠叨》

×Scan to share with WeChat

你可能也喜欢看:

  1. Javascript Memoizer
  2. JavaScript 3D 图表
  3. 从 JavaScript 的单线程执行说起
  4. JavaScript 实现继承的几种方式
  5. Function Invocation Patterns

13 thoughts on “几道容易出错的 JavaScript 题目”

  1. 匿名 says:
    07/11/2013 at 4:15 PM

    题目四,会输出两个值,第一个是很小的值,第二个是个大于 2000 的值。

    Reply
    1. Anonymous says:
      07/12/2013 at 1:45 PM

      chrome 和 firefox 下都试了下,确实会输出 2 个值,但是想不到原因

      Reply
      1. Anonymous says:
        07/28/2013 at 10:25 AM

        setTimeout 会返回一个 id

        Reply
  2. Anonymous says:
    07/11/2013 at 2:47 PM

    因为 return a;
    new a() === a   //结果 true
    ———————————————————-
    参见《JavaScript 的 5 种调用函数的方法》http://www.cnblogs.com/lhb25/archive/2009/03/12/1409241.html

    Reply
  3. 玉 says:
    07/11/2013 at 11:42 AM

    所谓的陷阱就是闭包和作用域。。。

    Reply
    1. dohkoos says:
      05/10/2014 at 12:40 PM

      说的太有道理啦。

      Reply
  4. Anonymous says:
    07/10/2013 at 5:11 PM

    所谓的陷阱是相对于不了解 ECMAScript 的人而言。不过大多数用 JS 的人还真不了解。

    Reply
  5. watercold says:
    07/10/2013 at 5:10 PM

    第 6 个表示不理解,为什么呢?

    Reply
  6. 冯大宝 says:
    07/08/2013 at 10:18 AM

    我看到这些题目就想起了中学时候考试的题目,所谓陷阱题。
    仿佛老师出这些题的目的就是让你做错……

    Reply
    1. cjb says:
      07/12/2013 at 4:40 PM

      我认为老师出陷阱题目的不是让你做错,而是让你更深刻的理解。

      Reply
      1. 冯大宝 says:
        07/16/2013 at 2:35 PM

        但是有的时候往往错的那个记得反而更清楚……
        其实我想说的是考试和现实生活中的差距。上面任何一段代码出现在你的现实项目里,你敢说你不会骂人吗?

        Reply
  7. tyeen says:
    07/07/2013 at 1:56 PM

    题目 4
    “ 毁掉” -> “ 回调”

    Reply
    1. 四火 says:
      07/07/2013 at 10:40 PM

      谢谢。已修正。

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

订阅·联系

四火,啰嗦的程序员一枚,现居西雅图

Amazon Google Groovy Hadoop Haskell Java JavaScript LeetCode Oracle Spark 互联网 亚马逊 前端 华为 历史 同步 团队 图解笔记 基础设施 工作 工作流 工具 工程师 应用系统 异步 微博 思考 技术 数据库 曼联 测试 生活 眼界 程序员 管理 系统设计 缓存 编程范型 美股 英语 西雅图 设计 问题 面向对象 面试

分类

  • Algorithm and Data Structure (30)
  • Concurrency and Asynchronization (6)
  • System Architecture and Design (43)
  • Distributed System (18)
  • Tools Frameworks and Libs (13)
  • Storage and Data Access (8)
  • Front-end Development (33)
  • Programming Languages and Paradigms (55)
  • Testing and Quality Assurance (4)
  • Network and Communication (6)
  • Authentication and Authorization (6)
  • Automation and Operation Excellence (13)
  • Machine Learning and Artificial Intelligence (6)
  • Product Design (7)
  • Hiring and Interviews (14)
  • Project and Team Management (14)
  • Engineering Culture (17)
  • Critical Thinking (25)
  • Career Growth (57)
  • Life Experience and Thoughts (45)

推荐文章

  • 聊一聊分布式系统中的时间
  • 谈谈分布式锁
  • 常见分布式系统设计图解(汇总)
  • 系统设计中的快速估算技巧
  • 从链表存在环的问题说起
  • 技术面试中,什么样的问题才是好问题?
  • 从物理时钟到逻辑时钟
  • 近期面试观摩的一些思考
  • RSA 背后的算法
  • 谈谈 Ops(汇总 + 最终篇):工具和实践
  • 不要让业务牵着鼻子走
  • 倔强的程序员
  • 谈谈微信的信息流
  • 评审的艺术——谈谈现实中的代码评审
  • Blog 安全问题小记
  • 求第 K 个数的问题
  • 一些前端框架的比较(下)——Ember.js 和 React
  • 一些前端框架的比较(上)——GWT、AngularJS 和 Backbone.js
  • 工作流系统的设计
  • Spark 的性能调优
  • “残酷” 的事实
  • 七年工作,几个故事
  • 从 Java 和 JavaScript 来学习 Haskell 和 Groovy(汇总)
  • 一道随机数题目的求解
  • 层次
  • Dynamo 的实现技术和去中心化
  • 也谈谈全栈工程师
  • 多重继承的演变
  • 编程范型:工具的选择
  • GWT 初体验
  • java.util.concurrent 并发包诸类概览
  • 从 DCL 的对象安全发布谈起
  • 不同团队的困惑
  • 不适合 Hadoop 解决的问题
  • 留心那些潜在的系统设计问题
  • 再谈大楼扔鸡蛋的问题
  • 几种华丽无比的开发方式
  • 我眼中的工程师文化
  • 观点的碰撞
  • 谈谈盗版软件问题
  • 对几个软件开发传统观点的质疑和反驳
  • MVC 框架的映射和解耦
  • 编程的未来
  • DAO 的演进
  • 致那些自嘲码农的苦逼程序员
  • Java 多线程发展简史
  • 珍爱生命,远离微博
  • 网站性能优化的三重境界
  • OSCache 框架源码解析
  • “ 你不适合做程序员”
  • 画圆画方的故事

近期评论

  • Ticket: TRANSACTION 1.922915 BTC. Go to withdrawal >> https://yandex.com/poll/enter/BXidu5Ewa8hnAFoFznqSi9?hs=20bd550f65c6e03103876b28cabc4da6& on 倔强的程序员
  • panshenlian.com on 初涉 ML Workflow 系统:Kubeflow Pipelines、Flyte 和 Metaflow
  • panzhixiang on 关于近期求职的近况和思考
  • Anonymous on 闲聊投资:亲自体验和护城河
  • 四火 on 关于近期求职的近况和思考
  • YC on 关于近期求职的近况和思考
  • mafulong on 常见分布式基础设施系统设计图解(四):分布式工作流系统
  • 四火 on 常见分布式基础设施系统设计图解(八):分布式键值存储系统
  • Anonymous on 我裸辞了
  • https://umlcn.com on 资源链接
© 2025 四火的唠叨 | Powered by Minimalist Blog WordPress Theme