专栏首页HTML5学堂原生JS | 作用域

原生JS | 作用域

HTML5学堂-码匠:作用域那些必须掌握的知识,还有大量作用域案例练习与分析,快快进来!

作用域的基础知识

在JavaScript中,每个变量会有一个有效区域(范围),这个就是作用域。一个变量在其作用域内是可以被访问的,在作用域外不能被访问。

全局作用域与局部作用域

变量的执行环境有两种:一种是全局,另一种是局部(如:放在函数里面)。

全局变量

在window环境下声明的变量,或者可以理解为非函数内声明的变量,称为全局变量。全局变量存在于整个JavaScript当中,在任何地方都能被访问和修改。

局部变量

常见的局部变量有以下两种:

● 在函数内声明的变量(使用var)

● 函数参数(形参)。

局部变量存在于函数体内,它们的值只能在函数体内访问和修改。

不同作用域的访问关系

在函数内部声明的变量(局部变量),在函数外部并不能访问。在函数外部声明的变量,在函数内部可以访问。

一句话概括:“局部可以访问全局,但全局不能访问局部”。

变量的查找方式 & 作用域链

变量的查找方式

当局部作用域当中出现属性的时候,首先查找当前的作用域当中是否具有存储空间,如果有,直接采用;如果没有,向其父级查找,如果父级没有,继续向上,直到查找到window为止。如果window下也不存在该空间,会在全局作用域之下进行空间的创建。

作用域链

由于在全局作用域当中会包含局部作用域,局部作用域当中还可以再包含局部作用域。当有多层作用域时,深层的作用域中查找变量时,会按照“当前作用域”到“上层作用域”再到“全局作用域”的顺序进行查找,这个查找的顺序就可以理解为作用域链。

欢迎沟通交流~~~HTML5学堂(码匠)

实例解析

作用域案例1 - 全局变量

var user = 'HTML5学堂';
console.log(user);
console.log(window.user);

运行结果:

'HTML5学堂'

'HTML5学堂'

在全局作用域下创建的变量,其实就是window对象的属性/方法。也就是“案例1”的代码中 user与window.user是等价的。

作用域案例2 - 局部变量

(function(){
    var user = '码匠';
}());
console.log(user);

运行结果:

报错(user is not defined)

user是创建在function中的变量,为局部变量。在全局中打印user的时候,由于在全局中没有这个变量,所以报错。

作用域案例3 - 不声明局部变量的状态

(function(){
    user = '码匠';
}());
console.log(user);

运行结果:

'码匠'

user = ’码匠‘; 并没有采用var进行变量的声明,此时在函数这个局部的作用域当中,并没有user这个存储空间,之后按照“作用域链”向上翻找,也就是在全局(window)作用域当中进行查找。

在全局作用域中也没有user这个存储空间,此时在全局作用域当中创建user这个存储空间,并将'码匠'赋值给这个存储空间。

作用域案例4 - 形参

var user = 'HTML5学堂';
function changeName(user){
    user = '码匠';
}
changeName(user);
console.log(user);

运行结果:

'HTML5学堂'

在changeName函数当中,形参名为user,由于形参名,也会创建存储空间,因此,在changName当中就出现了一个存储空间。空间状态如下图:

查看如下与案例等价的代码,更有利于理解案例~

var user = 'HTML5学堂';
function changeName(user){
    var user = user;
    user = '码匠';
}
changeName(user);
console.log(user);

如果觉得如上的代码还不容易理解,我们可以尝试更换形参名字,会更容易理解一些~如下代码与案例4的代码也是等价的。

var user = 'HTML5学堂';
function changeName(oldName){
    var newName = oldName;
    newName = '码匠';
}
changeName(user);
console.log(user);

从如上的等价案例当中,不难看出,全局的user变量和函数内部的变量,并不是同一个变量。

更多的案例练习

在我们(HTML5学堂-码匠)开发的微信小程序“决胜前端”当中,我们最新更新了关于作用域的一些练习题,感兴趣的可以进入微信小程序。

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂(码匠)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-05-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2015.12.23 HTML5真题练习

    HTML5学堂:每天一道题,强壮程序员!今日主要涉及12.22日关于作用域、预编译执行知识的题目解答,以及一道涉及逗号运算符和for循环的题目。 HTML5真题...

    HTML5学堂
  • 2016.07 第3周 群问题分享

    HTML+CSS 怎么实现输入框高度自适应 2016.07.18~2016.07.22 核心内容 contenteditable 问题解析 因为textarea...

    HTML5学堂
  • 如何在HTML5浪潮中站稳脚跟

    HTML5学堂:而今的HTML5的浪潮到底如何,HTML5浪潮会为我们带来什么?作为一个行内的新手,如何在浪潮中站稳脚跟,变得优秀起来;对于一个行外人又应该怎样...

    HTML5学堂
  • 作用域

    天天_哥
  • JavaScript的作用域和块级作用域概念理解

    运行这段代码,会出现“use an undefined variable:j”的错误。可以看到,C语言拥有块级作用域,因为j是在if的语句块中定义的,因此,它在...

    IMWeb前端团队
  • JavaScript的作用域和块级作用域概念理解

    作用域 作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期。说到这里我们需要理解两个概念:块级作用域与函数作用域。 函数作用...

    IMWeb前端团队
  • RAID 3

        RAID 3是把数据分成多个“块”,按照一定的容错算法,存放在N+1个硬盘上,实际数据占用的有效空间为N个硬盘的空间总和,而第N+1个硬盘上存储的数据是...

    用户2398817
  • 亿欧智库电子合同报告出炉,法大大引领行业革新

    近日,亿欧智库正式发布《信息化安全新变革——2018第三方电子合同服务行业趋势报告》(下称报告),作为“聚焦用户体验,生态布局共赢市场”的行业代表,法大大入选典...

    法大大电子合同
  • 谷歌开源语义图像分割模型DeepLab-v3+ | 附代码

    据谷歌在博客上的描述,DeepLab-v3+模型是目前DeepLab中最新的、执行效果最好的语义图像分割模型,可用于服务器端的部署。

    量子位
  • 判断一棵满二叉树是否为二叉搜索树

    给定一棵满二叉树,判定该树是否为二叉搜索树,是的话打印 True,不是的话打印 False。

    echobingo

扫码关注云+社区

领取腾讯云代金券