文档章节

JS词法作用域

hming
 hming
发布于 2016/11/30 17:15
字数 1118
阅读 20
收藏 2
点赞 0
评论 0

1.由变量开始谈
习惯性先来段代码:
var x = "globol value";
var getValue = function(){
    alert(x);    //弹出"undefined"
    var x = "local value";
    alert(x);    //弹出"local value";
}
getValue();
代码很简单,首先定义了一个全局变量x并赋了初值,然后写了个getValue的方法,之后我们用alert弹出x的值,但是结果是undefined,不是global value也不是local value,这个我们可能会感觉到奇怪。其实理解这个问题的关键就是要清楚x的作用域。
第一个var x中的x是全局变量,js解释器在执行任何代码之前会先创建一个全局对象(global object),全局变量就是相当于这个全局对象的一个属性。同理,对于getValue这个函数,就会生成一个叫做调用对象的东西,局部变量就是这个调用对象的属性,例子中第二个var x中的x就是局部变量。
2.词法作用域
词法作用域。这个是何方神圣呢?要理解的话,其实我们可以对比传统面向对象的(如JAVA、C#)中的变量的作用域,我们知道C#中的变量作用域是块级的,即这个变量只能活动在定义他的一个直接外界内,如if子句内,for子句内定义的变量外界是无法读取的。而js中呢,变量却不是这样的,在同一个函数内定义的变量其它的成员是可以访问的。看个例子会清楚很多:
function test(o){
    var i = 0;
    if(typeof o == "object"){
        var j = 0;
        for(var k=0; k < 10; k++){
            document.write(k);
        }
        document.write(k);            //k是可以被访问到的,即使它在for子句外
    }
    document.write(j);                //说明j是可以被访问到的,即使它在if子句外
}
清楚了这一点后,就来理解下js中关于词法作用域的含义。
当定义了一个函数后,当前的作用域就会被保存下来,并且成为函数内部状态的一部分,这个是很重要的一个概念。
下面我们回到开篇的那个例子,当getValue函数被定义的时候,他的作用域被保存起来,还有被加到作用域链上,他的上端就是全局执行环境。当调用getValue方法的时候,js解释器首先会把作用域设置为定义函数的时候的那个作用域(即之前保存那个),接下来,他在作用域的前加上调用对象即getValue这个函数,再在他的上端加上全局对象。如下图:


这个作用域链其实和原型链有点相似,也好似在本作用域内找不到就会向上去找。比方说开篇那个例子,找x的时候(js的预定义机制,就是js解释器会先对var定义的变量进行初始化,应该说只是起了定义的作用但没赋值),会先在本作用域内找,由预定义机制知可以找到x,但是没赋值,所以是undefined值。知道了这点我们来知道开篇那个代码其实是等价于下面这个的:
var x = "globol value";
var getValue = function(){
    var x;
    alert(x);    //弹出"undefined"
    x = "local value";
    alert(x);    //弹出"local value";
}
getValue();
当调用 getValue()函数时形成的作用域链为“调用对象”->“全局对象”,执行alert(x)时,首先查找调用对象是否有x的属性,如果有则使用“调用对象”的x,如果没有,就接着查找“全局对象”是否有x的属性。
实际上js解释器做的事情应该是按以上这个例子执行的,所以从另一个角度说,将变量的定义放在开头这个约定是有意义并且有益处的。
3.延伸
清楚了以上关于词法作用域的概念后,我们就不难理解闭包的概念了,它只是用到了作用域链的不可向下性,即下面的作用域可以访问上面的,但上面的不可以访问下面的。当然这只是构成闭包的一个条件,闭包更重要的还是外部函数持有内部函数的一个嵌套函数的引用,看下简单例子:
function foo(){
    var age = 10;
    function boo(){
        age += 10;
        return age;
    }
    return boo;
}
alert(foo()());    //20

//var tx = foo();
//alert(tx());    //20

© 著作权归作者所有

共有 人打赏支持
hming
粉丝 3
博文 88
码字总数 86648
作品 0
深圳
程序员
【前端工程师手册】JavaScript之作用域

【前端工程师手册】JavaScript之作用域 什么是作用域 来一段《你不知道的JavaScript-上卷》中的原话: 几乎所有编程语言最基本的功能之一,就是能够储存变量当中的值,并且能在之后对这个 值...

优惠券活动 ⋅ 05/17 ⋅ 0

【译】【nodeschool】【scope-chains-closures】作用域

作用域链与闭包工作 作用域,作用域链,闭包以及垃圾回收它们有一个共同点:那就是它们通常都是手动执行的。闭包实际上是如何工作的?垃圾回收在什么时候发生?作用域链到底是什么? 通过这次...

小草先森 ⋅ 05/14 ⋅ 0

这一次,我们换种姿势学习 javascript

前言 《你不知道的 javascript》是一个前端学习必读的系列,让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题:“作用...

程序员解决师 ⋅ 05/29 ⋅ 0

深入理解闭包之前置知识→作用域与词法作用域

前言 这两天刚好和朋友讨论到闭包,这个JavaScript中的“神兽”,很多同学会觉得闭包这玩意太闹心了,怎么着都理解不了...其实刚接触JavaScript的时候我也是这样的。 但是呢,闭包却非常重要...

lce_shou ⋅ 05/16 ⋅ 0

深入理解闭包之前置知识---作用域与词法作用域

前言 这两天刚好和朋友讨论到闭包,这个JavaScript中的“神兽”,很多同学会觉得闭包这玩意太闹心了,怎么着都理解不了...其实刚接触JavaScript的时候我也是这样的。 但是呢,闭包却非常重要...

iceman_dev ⋅ 05/15 ⋅ 0

【前端工程师手册】JavaScript作用域拾遗

【前端工程师手册】JavaScript作用域拾遗 昨天总结了一些作用域的知识【前端工程师手册】JavaScript之作用域,但是发表完发现忘记了一些东西,今天拾个遗。 昨天说到了JavaScript中没有块级作...

推荐码发放 ⋅ 05/17 ⋅ 0

前端基础(二):变量声明的6种方法

字数:2869 阅读时间:10分钟 最新的ECMAScript规范中,变量声明有var、function、let、const、import、class六种方法。 var 语法: var varname [= value1 [, vaname1[,valname2 ...]]]; 对...

老司机带你撸代码 ⋅ 06/09 ⋅ 0

JavaScript函数式编程之深入理解纯函数

纯函数是函数式编程的基础,需要重点理解。 纯函数的概念: 纯函数是这样一种函数,即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用。 在说明纯函数的概念之前,先讲两个其...

砖用冰西瓜 ⋅ 06/08 ⋅ 0

javascript js(=>) 箭头函数 详细解说 案例大全

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { } 箭头函数相当于匿...

simpower ⋅ 05/13 ⋅ 0

JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster ⋅ 05/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

中标麒麟(龙芯版)7.0优盘安装

########################################## 制作U盘安装盘: 1.准备U盘: PMON环境下U盘必须格式化成ext3; 昆仑固件环境下可以格式化成ext3,ext4 2.把整个镜像 xxx.iso 复制到U盘下面 3....

gugudu ⋅ 16分钟前 ⋅ 0

老司机写的大数据建模五步走

本文将尝试来梳理一下数据建模的步骤,以及每一步需要做的工作。 01 第一步:选择模型或自定义模式 这是建模的第一步,我们需要基于业务问题,来决定可以选择哪些可用的模型。 比如,如果要预...

gulf ⋅ 25分钟前 ⋅ 0

PacificA 一致性协议解读

PacificA 的 paper 在 08 年左右发出来的,比 Raft 早了 6,7 年。 在 PacificA 论文中,他们强调该算法使用范围是 LAN (Local Area Network),讲白了就是对跨机房不友好。 不管是 ZAB,Raf...

黑客画家 ⋅ 27分钟前 ⋅ 0

盘符图标个性化

设置自己的专属盘符图标 准备ico格式的图片文件一个,在根目录下创建autorun.inf文件 文件内容 [Autorun]icon=logo.ico 重新启动或者插拔U盘即可看到结果...

阿豪boy ⋅ 27分钟前 ⋅ 0

Windows下QQ聊天记录中图片的默认存放位置

Windows下QQ聊天记录中图片的默认存放位置在设置中是没有说明的。 实测位置在:D:\Documents\Tencent Files\974101467\Image 其中: “974101467”为对应的QQ号; “C2C”为个人之间的聊天图...

临江仙卜算子 ⋅ 34分钟前 ⋅ 0

GC 的三种基本实现方式

参考资料《代码的未来》(作者: [日] 松本行弘)。 由于并非本人原著(我只是个“搬运工“),SO 未经本人允许请尽情转载。 另外个人像说明一下这里所说的GC指泛指垃圾回收机制,而单指Jav...

xixingzhe ⋅ 35分钟前 ⋅ 0

Android双击退出

/** * 菜单、返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-generated method stub if(keyCode......

王先森oO ⋅ 39分钟前 ⋅ 0

idea 整合 vue 启动

刚学习Vue 搭建了一个项目 只能命令启动 Idea里面不会启动 尝试了一下修改启动的配置 如下: 1.首先你要保证你的package.json没有修改过 具体原因没有看 因为我改了这个name的值 就没办法启动...

事儿爹 ⋅ 44分钟前 ⋅ 0

redis在windows环境的后台运行方法

在后台运行,首先需要安装redis服务,命令为 redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动,命令为 redis-server --service-start 停止,命令为 redis-...

程序羊 ⋅ 48分钟前 ⋅ 0

比特币现金开发者提出新的交易订单规则

本周,四位比特币现金的四位开发者和研究员:Joannes Vermorel(Lokad),AmaurySéchet(比特币ABC),Shammah Chancellor(比特币ABC)和Tomas van der Wansem(Bitcrust)共同发表了一篇关...

lpy411 ⋅ 51分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部