前段时间学了下JavaScript作用域,这个东西在JavaScript非常重要,也是JavaScript很基础的东西,正如少林里面基础武功,有了基础,才能学绝世武功。

  作用域的作用是啥?一套设计良好的规则来存储变量,并且之后可以方便的找到这些变量。

  就JavaScript里面的作用域来说,我总结有这么几个关键词:

  1. 词法作用域

  2. 函数作用域

  3. 块级作用域

  4. 闭包

  5. 提升

  好吧,我脑海里面能想到的就这么多了,不够的,也可以有朋友指出来,接下来,我一个一个过下这些词。

  一、词法作用域

  顾名思义,针对于词法的作用域,这是什么鬼?词法有作用域吗?难道不是只有函数作用域吗?有啥子用啊?  

  其实,词法作用域非常有用,它是针对词法的,没错就是词法,那什么是词法?

  JavaScript是一面动态语言,也就是先编译,再运行,在编译的第一个工作阶段叫词法化。词法化的时候,会对源代码中的标识符(变量和函数)进行检查,如果有状态的解析过程,还会赋予单词语意。

  词法作用域就是定义在词法阶段的作用域,词法作用域是有你在写代码时将变量和块作用域写在哪里来决定的。

  引擎凭什么能找到变量?是根据什么来查找的呢?

  举个例子:

function test() {
var a = 3;
console.log(a);
} test(); // output 3;

  这个例子相当简单,就拿这个a变量来说,test函数内,是局部变量,a的词法作用域就是test函数体内,如果在函数体外再调用a变量,比如:

function test() {
var a = 3;
console.log(a);
} test(); cosole.log(a);

  会抛出引用异常的错误(ReferenceError)。

  通过上面这个例子,只是简单的说明了下变量的词法作用域。在词法分析中,任何标识符,都有词法作用域,引擎就通过作用域来查找标识符的,会从内到外层作用域查找,直到找到第一个匹配的标识符停止,如果没找到,这会抛出引用异常的错误。

  二、函数作用域

  函数作用域,相信学过编程语言(比如C、C++等),对这个应该不陌生,每个函数都有自己的作用域,也就是函数作用域,这里就跳过了。

  三、块级作用域

  什么是块级作用域?块级作用域,就是用一对{}包裹起来的作用域,比如if语句,else语句,还有for语句等等。但是一般来说JavaScript里面是没有块级作用域这个概念的,但是,也有特例,在es3中开始,就有一个块级作用域的例子。

  就是try catch,看下面例子:

try	{
undefined(); // 强行出错
} catch(e) {
console.log(e);
}

  如果没有块级作用域的概念,那么这个e应该是全局的,在外面也可以访问,如下:

try	{
undefined(); // 强行出错
} catch(e) {
console.log(e);
} console.log(e);

  实际上,这样会抛出引用异常,e变量仅在catch中有效,这说明try catch是支持块级作用域的。

  其实在ES6中,JavaScript已经可以支持块级作用域了,比如let关键字。

  四、闭包

  闭包是什么?闭包和函数有什么关系?

  其实闭包我们平时很常用,只是大家没注意到罢了,闭包是函数运行时能访问其函数作用域之外的上下文环境,是一个动态的概念。如下:

function test() {

	var a = 3;

	function btest() {
// a变量为btest函数之外的变量
console.log(a);
} btest(); // 通过闭包调用a
} test();

  闭包是函数的代码在运行过程中的一个动态环境,函数可以理解为静态的代码。在这个动态环境内,如果函数只访问函数作用域里面变量(当然全局变量也算),那么是不存在闭包的;但是这个动态环境,还能访问其函数作用外的其他变量(也除了全局变量),那么有闭包了。

  五、提升

  提升什么?其实呢,就是浏览器在预编译的时候,会把所有的声明提前,其中包括变量声明和函数声明,如下:

test();

function test() {

	var a = 3;

	console.log(a);
}

  上面的代码演示,就是函数提升,注意,函数表达式不会提升,如下:

test();

var tset = function() {

	var a = 3;

	console.log(a);
}

  这会抛出引用异常的错误!

a = 3;

var a;

console.log(a);

  上面的代码是变量声明提升,切记是声明提升,赋值操作并不提升。

  总结:JavaScript使用作用域链来实现闭包,作用域链由执行环境维护,JavaScript中所有的标识符都是通过作用域链来查找值的。

  作用域这块,现在已经入门了,离精通还差很多,还需要多学多练,早日把这块搞透,学习正如逆水行舟,真是因为难,才更需要搞懂,如果只做力所能及的事,将永远得不到提升!

浅谈JavaScript的作用域的更多相关文章

  1. 浅谈JavaScript 函数作用域当中的“提升”现象

    在JavaScript当中,定义变量通过var操作符+变量名.但是不加 var 操作符,直接赋值也是可以的. 例如 : message = "hello JavaScript ! " ...

  2. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  3. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  4. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  5. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  6. 浅谈 js eval作用域

    原文:浅谈 js eval作用域 就简单聊下如何全局 eval 一个代码. var x = 1; (function () { eval('var x = 123;'); })(); console. ...

  7. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  8. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  9. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

随机推荐

  1. C++语法-指针 (1)

    <C++程序设计> 谭浩强  清华大学出版社 2016-08-03 1.P167 一般的C++编译系统为每个指针变量分配4个字节的存储单元,用来存放变量的地址. 2.P169 .cpp文件 ...

  2. MVC5+EF6 入门完整教程十

    本篇是第一阶段的完结篇. 学完这篇后,你应该可以利用MVC进行完整项目的开发了. 本篇主要讲述多表关联数据的更新,以及如何使用原生SQL. 文章提纲 多表关联数据更新 如何使用原生SQL 总结 多表关 ...

  3. MySQL中如何查看“慢查询”,如何分析执行SQL的效率?

    一.MySQL数据库有几个配置选项可以帮助我们及时捕获低效SQL语句 1,slow_query_log这个参数设置为ON,可以捕获执行时间超过一定数值的SQL语句. 2,long_query_time ...

  4. CentOS 6中MATLAB print函数“所见非所得”bug的解决方案

    0 系统配置+软件版本 主机:Dell optiplex 390 MT (i5) 系统+软件:CentOS 6.5 x64, Matlab R2012, R2013 系统+软件:CentOS 6.7 ...

  5. NoSQl简介(转)

    NoSQL,全称是“Not Only Sql”,指的是非关系型的数据库.这类数据库主要有这些特点:非关系型的.分布式的.开源的.水平可扩展的.原始的目的是为了大规模web应用,这场全新的数据库革命运动 ...

  6. 小游戏Step表

    [Config]1|0|0|2|172,120,134|公主的记忆|1|2[Config] [Config]2|1|1|2|172,120,134|公主的记忆|1|2[Config] [Config] ...

  7. checkbox

    $(document).ready(function(){ var page_id = {/$page_id/}; var location_id = {/$location_id/}; var lo ...

  8. eclipse 高亮代码

    本文整合自网络上的两种靠谱的使eclipse代码高亮的方式. 其实你可以在Window->proferences->java->editor->syndex coloring- ...

  9. AJAX格式

    var xmlHttp;function getXmlHttp(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("MICRO ...

  10. 三角形-css

    /*箭头向上*/ .arrow-up { width:; height:; border-left:30px solid transparent; border-right:30px solid tr ...