本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者那里的一知半解,所以决定先花一些时间整理一下这些基础知识和大家分享。 后面会附上培训用的PPT。刚开始是打算写一篇的,但是后来写着写着就发现越来越多,所以决定还是写一个系列吧。本系列所有内容都是涉及Javascript基础的,没有时髦的玩意儿,但是我相信这些基础的东西会有助于你理解那些有趣的东西的。

  • Javascript基础回顾 之(一) 类型
  • Javascript基础回顾 之(二) 作用域
  • Javascript基础回顾 之(三) 面向对象

  本篇是你必须知道的Javascript系列第二篇,我们主要来看看Javascript中变量作用域的问题。主要涉及以下内容 :

  • 参数传递的问题
  • 什么是作用域和作用域链
  • 块级作用域
  • 延长作用域链

参数传递的问题

  在Javascript中所有的参数传递都是按值传递的。也就是说把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。基本类型值的传递如同基本类型变量的复制一样,而引用类型值的传递,就如同引用类型变量的复制一样。

  —— 《Javascript 高级程序设计》 第三版

function addTen(num) {num += 10;return num;
}var count = 20;
var result = addTen(count);
alert(count) // 20
alert(result) // 30

  我想关于值类型的传递应该很简单,所以我们就不多说了,重点来看看引用类型的值传递。

function setName(person)
{person.name = "Jesse";
}var person = new Object();
setName(person);
alert(person.name);  //Jesse

  这个函数把我们外部对象的值也一起改变了,这一点和C#也是一样的。因为函数里面的person所指向的地址和外部person所指向的地址是一样的。下面的行为也是和C#一样的,即如果在函数内容把参数指向另外一个对象,不会对外部对象产生影响 。

function setName(person)
{person.name="Jesse"person = new Object();person.name = "Another Jesse";
}var person = new Object();
setName(person);
alert(person.name);  //Jesse

  关于引用类型的拷贝,给初学者一张图解。

  

  1. 在堆中分配一块空间给person对象,并在栈中保存person在堆中的址址引用
  2. 复制堆中person的地址引用给person2(同样是在栈中)
  3. new Person()再次在堆中分配一块空间给person2对象,然后将栈中person2指向这个新的地址。
  4. 以后对person2的更改不会对person产生影响

什么是作用域和作用域链

  我们知道在JavaScript中有局部变量和全局变量,某个函数里面的局部变量不能在另一个函数中被访问(暂且避开闭包不谈)。这就是作用域起的作用,因为变量只在它所在的那个函数里面起作用。

  每一个函数都有自己的执行环境,而每一个执行环境都有一个与之相关联的变量对象, 这个环境中所有变量和函数就保存在这个变量中。除了函数有自己的执行环境以外,我们还有一个最大的全局执行环境,而我们所熟知的window就是这个全局执行环境的变量对象,因为所有的全局变量和函数都是作为window的属性和方法创建的。每个环境中的所有代码执行完后,该环境被随之销毁,保存在其中的所有变量和函数也随之销毁。对于全局执行环境来说,关闭浏览器或者退出页面,那么这个全局的执行环境也就被销毁了。

  但是,我在这个函数里面是不是只能访问这个函数里面的变量呢?也许大家都知道,还有全局变量,全局变量可以被任意函数(Javascript没有像public, private, protected 这样的关键字),或者任意引入到页面的js访问到。这个就是我们常说的作用域链。作用域链的作用就是保证对执行环境有权访问的所有变量和函数进行有序访问。为什么说有序访问呢? 来看一看下面这段代码:

var color = "blue";function alertColor()
{var color = "red";alert(color);
}alertColor();  // red
alert(color);  // blue

  大家知道如果局部变量和全局变量同名的话,全局变量会被覆盖,但是也不是真正的覆盖,只是在当前这个函数里面被覆盖而已,我们在外部依旧可以正常使用的。这里就涉及到一个执行环境有序访问的问题。

  作用域链的最前端永远是当前执行代码所在环境的变量对象,对于我们的alertColor而言,就是它自己的活动对象。 所有函数的活动对象都包含一个初始值,那就是我们的arguments。而作用域链的下一个对象,来自包含的外部环境,一直延续到全局环境。所有函数的作用域链都可能延续到全局环境,这就是为什么全局变量可以在所有函数中访问的原因,并不是因为它叫全局变量,所以它就可以在所有函数中访问:) 并且,全局执行环境的环境变量始终是作用域链的最后一个对象。

  我们来看个复杂一点的例子:

var color = "blue";function changeColor(){var anotherColor = "red";function swapColors(){var tempColor = anotherColor;anotherColor = color;color = tempColor;// 这里面可以访问到 color, anotherColor, tempColor
    }// 这里只能访问到 anotherColor
    swapColors();
}// 这里只能访问到color
changeColor();

  在上面的代码中,我们有3个执行环境,全局环境、changeColor的局部执行环境和swapColors的局部执行环境。全局环境中只有一个变量color和一个函数changeColor()。changeColor中有一个变量anotherColor和一个函数swapColors(),但是它可以访问到全局环境中的color。swapColors中有一个局部变量tempColor,该变量只不管是在changeColor还是全局环境中都不能被访问到,然后在swapColors中可以访问到其它两个环境中的所有变量,因为另外两个环境都是它的父执行环境。

  我们可以发现,作用域链是由内向外扩展的,我们可以通过作用域访问外部环境的变量和函数,但是外部环境中访问不到内部环境的变量和函数。我们在swapColors中用到了全局变量color,但是它也不是一下子就找到color的,它有一个由内向外的查找过程:

  1. 在当前执行环境内寻找叫color的局部变量,没有找到,向上升一级
  2. 在父级执行环境changeColor中去找叫color的变量,也没有找到,再向上升一级
  3. 在changeColor的父级中找到了color变量,直接拿过来使用。

块级作用域

  因为有着块级作用域(以花括号作为起始点)的存在,C#中这样的代码是编译不通过的。

static void Main(string[] args)
{for(var i=0;i<=10;i++){Console.Write(i);}Console.Write(i);
}

  我们在for循环以外已经访问不到i了。但是在Javascript情况就完全不一样了。

for (var i = 0; i <= 10; i++)
{//
}
alert(i);  // 11

延长作用域链

  我们上面说了,在Javascript中总共只有2种执行环境:全局和局部执行环境。但是我们可以用with和try-catch来延长作用域,由于平常使用场景较少,我们就拿with来举个例子好了。

function buildUrl() {var qs = "?debug=true";with(location){var url = href + qs;}return url;
}

  在with的作用下,location这个变量被加到了作用域的最前端,所以所有location下的变量和方法都可以在with的这个范围内访问了。

  以上就是我们要讲的作用域的内容了,来总结一下吧:

  • 值类型按值传递,引用类型按引用传递。传递的行业和用变量拷贝的行业是一样的。
  • Javascript中有两种执行环境:全局和局部(函数)
  • 执行环境内有一个变量对象定义了该执行环境下能访问的变量和函数
  • 执行环境可以由内向外延伸一直延伸到全局的执行环境
  • Javascript没有块级作用域

  下一篇我们来看看Javascript中如果面向对象的编程,没有public, protected, private,等关键字的情况下,我们如何来实现public 和private 的属性? 又是如何实现static 类型的变量的? 不要走开,元旦假期之后,我们继续Javascript基础回顾之旅。

Javascript基础回顾 之(二) 作用域相关推荐

  1. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  2. JavaScript基础之函数与作用域(二)

    ✍JavaScript帝国之行

  3. 2017/5 JavaScript基础9 --- 闭包、作用域

    2019独角兽企业重金招聘Python工程师标准>>> 一.理解闭包 1.闭包的例子 //一般函数 function outer(){var localVal = 30; //局部变 ...

  4. SQL Server-表表达式基础回顾(二十四)

    前言 从这一节开始我们开始进入表表达式章节的学习,Microsoft SQL Server支持4种类型的表表达式:派生表.公用表表达式(CTE).视图.内嵌表值函数(TVF).简短的内容,深入的理解, ...

  5. asp.net ajax1.0基础回顾(二):经典模式

    asp.net ajax提供经典的异步请求/响应模式的客户端JS对象Sys.Net.WebRequest,本文将只对Sys.Net.WebRequest的进行介绍.若想深入了解相关的其它JS对象,可以 ...

  6. javaScript基础面试题 --- JS作用域

    面试10家公司,得有8家会问到作用域的题.所以说JS的作用域一定要弄清楚,非常重要! 1.除了函数之外,JS没有块级作用域 2.作用域链:内部可以访问外部的变量,但是外部不能访问内部变量,如果内部有, ...

  7. 面向对象基础回顾(二)

    隐式公共方法:方法以及属性都只是声明而不包含代码体. 接口是把隐式公共方法和属性组合起来,以封装特定功能的一个集合. 声明接口不允许提供接口中任何成员的执行方式. 接口不能有构造方法和字段. 实现接口 ...

  8. JavaScript基础知识(二)

    DOM学习 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值"):通过元素的id获取元素对 ...

  9. 基础回顾(二)qps、rps、tps

    qps(query per second) 每秒钟完成的查询数量,这个一般都是对查询接口来说的,比如一般公司都会做自己的APM系统,监控每分钟接口请求数量和接口响应时间 rps(request per ...

最新文章

  1. NutzWk 5.2.4 发布,Java 微服务分布式开发框架
  2. tushare 新功能(导入股票和大盘历史数据)
  3. 【C】课堂结对联系-求整数数组的子数组之和的最大值(党云龙、黄为)
  4. B1.Java基础部分二
  5. HTTP Status 500 - An exception occurred processing JSP page /common/../left.jsp at line 20
  6. 消息称荣耀7月发布年度旗舰 或用上旗舰级芯片骁龙 888
  7. 一组飒气十足的商务海报PSD分层海报
  8. Forrester:工业4.0 中国制造企业用ICT换来改变
  9. 编译使用CEF2623遇到的错误解决办法
  10. tomcat,tomcat7配置https
  11. MAVEN 仓库加速 阿里云镜像
  12. 2021-07-26 NLP词嵌入
  13. XMind 8 Pro 激活破解
  14. 2020中国华录杯·数据湖算法大赛—定向算法赛(吸烟打电话检测)baseline-tensorflow2.3-python3.6
  15. 怎样更改itunes备份位置_iTunes备份路径怎么改?教你无脑修改iPhone备份文件路径...
  16. 精品Uniapp的餐厅餐馆饮订餐点餐管理系统实现的App
  17. 练习题︱豆瓣图书的推荐与搜索、简易版知识引擎构建(neo4j)
  18. java reader类子类_Java之InputStreamReader类的实现
  19. SRC——教育漏洞平台
  20. 给大家分享一下指纹挂锁的方案

热门文章

  1. 高并发用redis还是mysql_高并发架构系列:Redis缓存和MySQL数据一致性方案详解
  2. 简洁大气好看的个人博客模板HTML源码
  3. 很漂亮个人主页自带音乐源码
  4. 必看企业级Redis锁资产巡检扫描业务场景实现(加锁限制扫描次数)
  5. 关于mono的编译与安装
  6. ecshop网站后台功能之系统管理
  7. 关于“服务器提交了协议冲突. Section=ResponseStatusLine问题请
  8. 关于集合类的做法示例 实体类赋值 cnblogs
  9. 爹地,我找到了!15个极好的Linux find命令示例
  10. 大数——大数阶乘(hdu1042)