一直对Js的作用域有点迷糊，今天偶然读到JavaScript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。

一：函数作用域

先看一小段代码：

  1. var scope="global";
  2. function t(){
  3. console.log(scope);
  4. var scope="local"
  5. console.log(scope);
  6. }
  7. t();

(PS: console.log()是firebug提供的调试工具，很好用，有兴趣的童鞋可以用下，比浏览器+alert好用多了）

第一句输出的是： "undefined"，而不是 "global"

第二讲输出的是："local"

你可能会认为第一句会输出："global",因为代码还没执行var scope="local",所以肯定会输出“global"。

我说这想法完全没错，只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。

在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.

所谓函数作用域就是说：-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

所以根据函数作用域的意思，可以将上述代码重写如下：

  1. var scope="global";
  2. function t(){
  3. var scope;
  4. console.log(scope);
  5. scope="local"
  6. console.log(scope);
  7. }
  8. t();

我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。

为什么说Js没有块级作用域呢，有以下代码为证：

  1. var name="global";
  2. if(true){
  3. var name="local";
  4. console.log(name)
  5. }
  6. console.log(name);

都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。

现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值，所以输出：”undefined“。

所以下面的代码也就很好理解了。

  1. function t(flag){
  2. if(flag){
  3. var s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. console.log(s);
  9. }
  10. t(true);

输出：2  ”ifscope"

二：变量作用域

还是首先看一段代码：

  1. function t(flag){
  2. if(flag){
  3. s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. }
  9. t(true);
  10. console.log(s);

就是上面的翻版，知识将声明s中的var去掉。

程序会报错还是输出“ifscope"呢？

让我揭开谜底吧，会输出：”ifscope"

这主要是Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性。

所以你用console.log(window.s)也是会输出“ifconfig"

当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除

var name=1    ->不可删除

sex=”girl“         ->可删除

this.age=22    ->可删除

三：作用域链

先来看一段代码：

  1. name="lwy";
  2. function t(){
  3. var name="tlwy";
  4. function s(){
  5. var name="slwy";
  6. console.log(name);
  7. }
  8. function ss(){
  9. console.log(name);
  10. }
  11. s();
  12. ss();
  13. }
  14. t();

当执行s时，将创建函数s的执行环境(调用对象),并将该对象置于链表开头，然后将函数t的调用对象链接在之后，最后是全局对象。然后从链表开头寻找变量name,很明显

name是"slwy"。

但执行ss()时，作用域链是： ss()->t()->window,所以name是”tlwy"

下面看一个很容易犯错的例子：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function buttonInit(){
  5. for(var i=1;i<4;i++){
  6. var b=document.getElementById("button"+i);
  7. b.addEventListener("click",function(){ alert("Button"+i);},false);
  8. }
  9. }
  10. window.onload=buttonInit;
  11. </script>
  12. </head>
  13. <body>
  14. <button id="button1">Button1</button>
  15. <button id="button2">Button2</button>
  16. <button id="button3">Button3</button>
  17. </body>
  18. </html>

当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？

很容易犯错，对是的，三个按钮都是弹出："Button4",你答对了吗？

当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，

所以弹出”button4“。

四：with语句

说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。

看下面代码

  1. person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
  2. with(person.wife){
  3. console.log(name);
  4. }

with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy".

with语句结束后，作用域链恢复正常。

js作用域与作用域链的更多相关文章

  1. 了解 JS 作用域与作用域链

    (1)作用域 一个变量的作用域(scope)是程序源代码中定义的这个变量的区域. 1. 在JS中使用的是词法作用域(lexical scope) 不在任何函数内声明的变量(函数内省略var的也算全局) ...

  2. JS的作用域和作用域链

    每个函数都有自己的作用域,当执行流进入一个函数时,函数就会被推入栈中,而在函数执行之后,栈将其执行环境弹出,把控制权放回给之前的作用域,全局作用域是最外围的一个作用域,因此,所有全局变量和函数都是作为 ...

  3. 第十八篇 js高级知识---作用域链

    一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己 ...

  4. js学习--变量作用域和作用域链

    作为一名菜鸟的我,每天学点的感觉还是不错的.今天学习闭包的过程中看到作用域与作用域链这两个概念,我觉得作为一名有追求的小白,有必要详细了解下. 变量的作用域 就js变量而言,有全局变量和局部变量.这里 ...

  5. js 作用域，作用域链，闭包

    什么是作用域? 作用域是一种规则,在代码编译阶段就确定了,规定了变量与函数的可被访问的范围.全局变量拥有全局作用域,局部变量则拥有局部作用域. js是一种没有块级作用域的语言(包括if.for等语句的 ...

  6. Js 作用域与作用域链与执行上下文不得不说的故事 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

    最近在研究Js,发现自己对作用域,作用域链,活动对象这几个概念,理解得不是很清楚,所以拜读了@田小计划大神的博客与其他文章,受益匪浅,写这篇随笔算是自己的读书笔记吧~. 作用域 首先明确一个概念,js ...

  7. 理解js中的作用域，作用域链以及闭包

    作用域变量作用域的类型:全局变量和局部变量全局作用域对于最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的 <script> var outerVar = " ...

  8. js对象系列【二】深入理解js函数，详解作用域与作用域链。

    这次说一下对象具体的一个实例:函数,以及其对应的作用域与作用域链.简单的东西大家查下API就行了,这里我更多的是分享自己的理解与技巧.对于作用域和作用域链,相信绝大多数朋友看了我的分享都能基本理解,少 ...

  9. js基础梳理-如何理解作用域和作用域链？

    本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关 ...

  10. JS作用域，作用域，作用链详解

    前言   通过本文,你大概明白作用域,作用域链是什么,毕竟这也算JS中的基本概念. 一.作用域(scope) 什么是作用域,你可以理解为你所声明变量的可用范围,我在某个范围内申明了一个变量,且这个变量 ...

随机推荐

  1. Android客户端调用Asp.net的WebService

    Android客户端调用Asp.net的WebService 我来说两句 |2011-11-23 13:39:15 在Android端为了与服务器端进行通信有几种方法:1.Socket通信2.WCF通 ...

  2. duang体加班版

    领导第一次让我加班的时候,其实我是拒绝的,因为我觉着加班这个事,不能你让我加我就加,晚了就没有地铁了..领导跟我说可以打车报销.加了一个月之后,我的钱包duang~,后来我知道报销其实是假的,我每天打 ...

  3. 如何理解这段代码：void (*signal (int sinno,void(*func)(int)))(int)

    void (*signal (int sinno,void(*func)(int)))(int) 先来看void(*func)(int)   这里的意思是声明一个函数指针func,它的参数类型为int ...

  4. bzoj 1188 [HNOI2007]分裂游戏（SG函数，博弈）

    1188: [HNOI2007]分裂游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 733  Solved: 451[Submit][Status ...

  5. 折腾iPhone的生活——AirDrop的使用

    AirDrop是iOS一个非常大的亮点,其实说是这么说了,但是事实上AirDrop并没有想象中那么好用. AirDrop就是一个用于无线传输文件的方式,实质性跟蓝牙没有太大区别,但是比蓝牙好用,有点像 ...

  6. oracle 创建表空间、创建用户管理该表空间

    /*分为四步 *//*第1步:创建临时表空间  */create temporary tablespace user_temp  tempfile 'D:\oracle\oradata\Oracle9 ...

  7. java IO复习(三)

    package com.zyw.io; import java.io.File; import java.io.FilenameFilter; import java.util.ArrayList; ...

  8. C#中HashTable的用法示例2

    命名空间 System.Collections 名称 哈希表(Hashtable) 描述 用于处理和表现类似keyvalue的键值对,其中key通常可用来快速查找,同时key是区分大小写:value用 ...

  9. EassyUI内置方法与属性

    Jquery插件 easyUI属性汇总 作者: 字体:[增加 减小] 类型:转载 时间:2011-01-19我要评论 找了个时间看了下EasyUI插件,对它的插件感觉是很舒服,特地把Easy UI的大 ...

  10. winform 分页 分类： WinForm 2014-05-16 15:30 257人阅读 评论(0) 收藏

    说明:(1)如果对分页的感兴趣的话,可以看一下我传的存储过程("SQL 存储过程 分页")               (2)分页,第一页.上一页,下一页.最后一页只调用点击(cl ...