常让人误解的一道js小题
一道小题引发的深思
今天无意中看到一个js笔试题,不由得想起初学js那会被各种题目狂虐的心酸,虽说现在也会被笔试题所虐,但毕竟比之前好了很多,下面就是我的个人理解,欢迎拍砖、指正:
var x = 1;
function printx(){
console.log(x); } function show(f){
var x = 2;
(function(){
f();
})()
} show(printx); //1
结果后台会打印1,而不是2。这有些不合常理,因为很多人会错误的认为:函数show中的f()在执行时,由于本作用域中没有x,所以会向上层作用域寻找x,当找到上层函数show的作用域中时发现 var x=2,这时就把x确定为2,否则会继续向上找,直至window。。。终于用到所谓的“作用域链”啦!大喜,其实这样想你就错了!
第一:首先有这么一个名词叫“自由变量”,自由变量是指:如果作用域(函数)A中使用到了变量x,而x并不是在作用域(函数)A中定义,那么对于作用域(函数)A来说,x就是A的自由变量。
第二:理解这么一句话:js没有块级作用域,仅有的块级作用域是用函数来实现的,也就是说只有函数能创建出一块独立的作用域。if、for代码块都不行!所以本文中一个作用域可以理解为一个函数。
第三:函数的作用域在函数定义时就已经确定,而不是在执行时确定。
对于嵌套函数来说按照上述:寻找自由变量是沿作用域链向上一层层查找,这样理解是对的。但是这样理解太片面,甚至会产生错误,就比如上面这道题。正确的理解应该是:寻找自由变量时会到创建这个函数(作用域)的那个作用域中寻找。而创建这个函数的作用域并不一定是它位置上的父级作用域,(并不是在代码结构上包含,就是子父关系)上面这道题就是这种情况:函数show中把printx函数作为参数传入执行,在执行时会寻找创建它的那个作用域,很明显创建printx函数的作用域并不是show,而是全局window(因为printx函数在window中创建),所以它会寻找全局window中的x,此x为1。 所以会打印1,这才是正解。
不知道我解释的清不清楚,总之:函数使用自由变量时,会到创建这个函数的那个作用域中寻找。“向父级作用域中寻找”可能会存在偏差。(不足之处欢迎指正!)
再补充两道,加深理解
本文的评论里还有两道更加通俗易懂的两道题,征得热心博友theWalker的同意,把他给出的两个demo也展示给大家,希望对你有所帮助:
function a(){
console.log(b)
}
function c(){
var b = 1;
a()
}
c() //b is not defined
/****************************************/
var b = 2;
function a(){
console.log(b)
}
function c(){
var b = 1;
a()
}
c() //
常让人误解的一道js小题的更多相关文章
- 一些js小题(一)
一些js小题,掌握这些对于一些常见的面试.笔试题应该很有帮助: var a=10; function aa(){ alert(a); } function bb(){ aa(); } bb();//1 ...
- 一道常被人轻视的前端JS面试题
前言 年前刚刚离职了,分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多 ...
- 一道常被人轻视的前端JS面试题(转)
分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过 ...
- js排序--一道js数据结构题
给一个数组: [{ GroupMark: "", GroupName: "hao", SendTime: '123', SendContent: "1 ...
- 第24篇 js小知识和“坑”
前面说了说了js的相关知识,基本上除了语法外,把项目常用的知识做了一个梳理,现在说下js的其它方面的知识,这些知识不成体系,属于不理解对于一般开发没什么太多影响,但如果理解清楚,可以更好去开发. js ...
- React.js 小书介绍
React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...
- 一个js小游戏----总结
花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...
- React.js 小书 Lesson25 - 实战分析:评论功能(四)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
随机推荐
- Java多线程系列--“JUC原子类”01之 框架
根据修改的数据类型,可以将JUC包中的原子操作类可以分为4类. 1. 基本类型: AtomicInteger, AtomicLong, AtomicBoolean ;2. 数组类型: AtomicIn ...
- 构建自己的PHP框架--抽象Controller的基类
上一篇博客中,我们将简单的路由解析和执行,从入口文件public/index.php中移入到框架中.入口文件顿时变得清爽无比-- 但是,去我们的controller里看一下,会看到如下的code: p ...
- Cordova webapp实战开发:(4)Android环境搭建
在<Cordova webapp实战开发:(3)后面可能会学到的东西>中我们说了一下后续大致包括的内容,今天我们继续.上周我在掌中广材集成了友盟的社交分享,今天想集成iOS应该很顺利的,但 ...
- Windows Azure Service Bus (6) 中继(Relay On) 使用VS2013开发Service Bus Relay On
<Windows Azure Platform 系列文章目录> 注意:本文介绍的是国内由世纪互联运维的Windows Azure服务. 项目文件请在这里下载. 我们在使用Azure平台的时 ...
- CentOS7 SonarQube安装
CentOS7 SonarQube安装 CentOS7 SonarQube安装 Download 从sonarqube下载sonarqube-5.0.zip 从sonarqube下载sonar-run ...
- tornado--SESSION框架,一致性hash,分布式存储
预备知识 tornado框架session要自己写 cookie存储在客户端浏览器上,session数据放在服务器上 session依赖cookie 扩展tornado,返回请求前自定义session ...
- SQL--Having
Having--对分组信息进行过滤,因为分组之后的信息和原来的表信息没有关系了, Having可以用的之后,出现在Group子句中的列,还有聚合函数 SELECT s_Age ,COUNT(s_I ...
- 使用HTML.ActionLink实现一个图片链接
学习ASP.NET MVC 的Razor的语法,尝试把一段普能的图片链接<a ...><img ... />改为HTML.ActionLink实现. 最原始的代码: <a ...
- matlab 调用dos命令和文件操作
第一.利用!直接调用,简单方便,可以带操作对象:!del A.bat 第二.调用system函数或者dos函数,既可以实现功能,又返回参数,能检查执行情况,方便后面程序的开发,推荐这个 [status ...
- MVC中几种常用ActionResult
一.定义 MVC中ActionResult是Action的返回结果.ActionResult 有多个派生类,每个子类功能均不同,并不是所有的子类都需要返回视图View,有些直接返回流,有些返回字符串等 ...