第十八篇 js高级知识---作用域链
一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后。下面开始说说js的方面的东西,由于自己的能力有现,有点地方说的不明白,还请高手指点。这个文章,如果有时间的话应该会写一个系列,包括js的高级方面的知识,最终希望能够说到js的引擎方面的东西。千里之行,始于足下,下面开始说说最简单的一个东西—js的作用域链,时常也比较容易弄错,也算是自己做一个纪录。
首先看一段代码:
function t(){ var b=1; if(b===1){ var name="test1"; }else{ var name="test2"; } console.log(name); } t();
这段代码,可能很多人认为输出的结果是undefine,但是输出的结果是:
可能有点想不明白,如果是在强类型里面这个肯定是要报错的,但是在js的词法分析和运行中确能运算出来结果,这个是原因是什么呢?原来是js中的作用域是和C++/C中的不一样,js中没有块级作用域,作用域只有函数,只要在一个函数里面,你定义的变量在函数的内部任何地方都可以访问到,包括嵌套的函数。用官方的话说是所谓的函数作用域。所以上面的结果就是一个有值的数据,而不是一个undefine.
再看代码修改:
function t() { var sp = "test1"; if (true) { var sp = "test2"; console.log(sp); } console.log(sp); } t();
这次输出的结果应该很简单了,只要是在函数内部的块级作用域有js里面都不起作用,所以代码可以拆解成:
function t() { var sp = "test1"; // if (true) { var sp = "test2"; console.log(sp); // } console.log(sp); } t();
所以再次输出都是test2;
好了,现在应该是初步了解了js的函数作用域了,这个理解清楚了,作用域链自然也就不攻自破。下面看一个简单的代码:
var _name = "windows"; function t() { var name = "test1"; function t1() { console.log(_name); console.log(name); } t1(); console.log(_name); console.log(name); } t();
如果上面的问题都清楚的话,这个代码应该很简单,因为js是函数的作用域,所以在函数内数据都有能访问,执行顺序如下:
1、在1中,执行console.log(_name);这个_name在当前的函数内没有,到t函数中去寻找,t函数中也没有就会到windows里面去找,找到_name并输出windows,同理2步骤输出”test1”
2、3与4 步骤也是同样的道理,所以结果是
从上面的例子可以看出js作用域特点:1、没有块级的作用域,在一个函数的内部定义都有效 2、如果当前数据在当前的函数里面的没有话,会沿着层级向上找。
t1->t->window,从而形成作用域链。
第十八篇 js高级知识---作用域链的更多相关文章
- 第十九篇 js高级知识---词法分析和AO 链
上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代码: var name = "test"; function t() { var b = ...
- JS高级心法——作用域链
首先我们来看两个js中的代码: <script type="text/javascript"> var c=5; function t1(){ var d=6 f ...
- 第20篇 js高级知识---深入原型链
前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...
- 第十八篇 .NET高级技术之Linq与EF Code-First Fluent API基础讲解
1.FluentApi简介 在这里提供了一个fluentapi基础的DEMO然后咱们在进一步的学习,直接上干货. 第一步在数据库创建一个表:person 第二步:新建控制台程序FluentAPI 第三 ...
- 第十八篇 JS传参数
JS传参数 参数,这是个什么东西呢?简单的说吧,我们去玩别人的网站,一般来个登录,有用户名和密码,当我们输入正确之后,那么这用户名和密码里面的值,就是参数的值,它将这个值传给“参数”,然后提交到后 ...
- Python之路【第十八篇】:Web框架们
Python之路[第十八篇]:Web框架们 Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...
- Egret入门学习日记 --- 第十八篇(书中 8.5~8.7 节 内容)
第十八篇(书中 8.5~8.7 节 内容) 其实语法篇,我感觉没必要写录入到日记里. 我也犹豫了好久,到底要不要录入. 这样,我先读一遍语法篇的所有内容,我觉得值得留下的,我就录入日记里. 不然像昨天 ...
- Bootstrap入门(二十八)JS插件5:工具提醒
Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...
- JS详细图解作用域链与闭包
JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...
随机推荐
- iOS 使用 github
1. 创建 github 账号 登陆官网 https://github.com 进行创建. 2. 创建 github 仓库 3. 添加Pods依赖库所需文件 4. github 之 下载历史版本 5. ...
- UVa 129 困难的串
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- CNTV视频回看下载地址
这其实不是新方法了,这个方法早在五六年前大家就在用,至今也没失效.但是五六年前那时候这个方法可以下载到过去三个月内CNTV直播过的视频,而现在只能下到一个星期的.之所以要下载回看版本,是因为比栏目版本 ...
- HDU 3374 String Problem (KMP+最大最小表示)
HDU 3374 String Problem (KMP+最大最小表示) String Problem Time Limit: 2000/1000 MS (Java/Others) Memory ...
- Java线程:线程中断
interrupt方法可以用来请求终止线程. 当对一个线程调用interrupt方法时,线程的中断状态被置位.这时每个线程都有boolean标志.每个线程都应该不时的检查这个标志,以判断线程是否被中断 ...
- 超棒的30款JS类库和工具
http://www.csdn.net/article/2013-07-01/2816068-best-javascript-libraries-and-tools
- abstract、override、new、virtual、sealed使用和示例
abstract修饰类名为抽象类,修饰方法为抽象方法.如果一个类为抽象类,则这个类智能是其他某个类的基类.抽象方法在抽象类中没有函数体.抽象类中的抽象方法是没有方法体的,继承其的子类必须实现抽象类的抽 ...
- ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译
内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...
- [html5] 学习笔记- 编辑API之Range对象(二)
本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...
- Linux下tomcat的安装与项目部署
最近在linux下安装了jdk,为了圆我以前的心愿,把tomcat也安装了,顺便部署个项目,也算是小又成就感 废话不说了,直接上过程 一.下载安装对应的jdk,并配置Java环境. 有关jdk的安装请 ...