Javascript基础回顾之(二) js作用域


Posted in Javascript onJanuary 31, 2017

本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对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

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

Javascript基础回顾之(二) js作用域

  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中可以访问到其它两个环境中的所有变量,因为另外两个环境都是它的父执行环境。

Javascript基础回顾之(二) js作用域

我们可以发现,作用域链是由内向外扩展的,我们可以通过作用域访问外部环境的变量和函数,但是外部环境中访问不到内部环境的变量和函数。我们在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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
详解用node编写自己的cli工具
May 23 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 Javascript
Javascript基础回顾之(一) 类型
Jan 31 #Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 #Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 #Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 #Javascript
JavaScript Date 知识浅析
Jan 29 #Javascript
JavaScript实现时钟滴答声效果
Jan 29 #Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 #Javascript
You might like
探讨捕获php错误信息方法的详解
2013/06/09 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
js调试工具Console命令详解
2014/10/21 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
python静态方法实例
2015/01/14 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
python列表返回重复数据的下标
2020/02/10 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
员工聘用合同范本
2015/09/21 职场文书
2016年端午节寄语
2015/12/04 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技