原文:五个小例子教你搞懂 JavaScript 作用域问题

众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码。

下面笔者将使用五个小例子来给大家分析下 JavaScript 的作用域要注意的问题。

感谢 例子的来源 (这5个例子我做错了2个 [嘿嘿,尽情鄙视吧],笔者就是要 死磕自己,奉献大家!)

先给出五个例子:

每个例子旁边都会给出答案的链接,如果你全部都正确了,你可以忽略这篇短文,并深深的鄙视下笔者。

例一: 答案

if (!("a" in window)) {var a = 1;
}
alert (a);

例二:答案

var a = 1,b = function a (x) {x && a (--x);};
alert (a);

 例三:答案

function a (x) {return x * 2;
}
var a;
alert (a);

例四:答案

function b (x, y, a) {arguments[2] = 10;alert (a);
}
b(1, 2, 3);

例五:答案

function a () {alert (this);
}
a.call (null);

写在答案前面的话:

页面中JavaScript代码在加载的时候,执行顺序是按照脚本标签<script>的顺序一致的,但如果设置该标签async或defer属性的话,则不能保证执行顺序(这点说起来惭愧,笔者没有认真测试过)。

JS代码在解释执行前,会对进行一次“预编译”:

在预编译的过程中,用var声明的变量被设置为活动对象(啥是活动对象?)的属性,默认值为“undefined”,

以function定义的函数也被添加为活动对象的属性,它们的值就是函数的定义,匿名函数将不被解析(这句话啥意思?)。

变量初始化过程即赋值过程发生在解释执行期,而不是"预编译期"。

例一答案:

有人大概会犯下面两种情况的错误:

情况一:if 分支里声明a变量(var a = 1;),在if 外访问不到变量a,所以对话框弹出 'undefined'。

这说明你对JavaScript 中没有块级作用域不太理解。请翻翻基础书籍。笔者也会在后续的博文中 深入浅出地介绍JavaScript 变量、作用域和内存问题。(到时候会给出链接的)

情况二:a 变量,不在window对象中,所以进入if 分支,声明 a 并赋值为 1,又由于JS没有块作用域,所以对话框弹出 1。

这说明你大概了解块作用域(可能只是知道,但并不知道原理)。这时候你可能需要了解下啥是作用域链,多问问为什么没有块作用域(后续博文会推出的,但笔者仍希望你通过读书的方式了解下)。

但是你还是对JS代码执行前的情况不太了解。

真正的情况是这样的:

JS在预编译的时候,var 声明的变量 被设置为活动对象(本例为 window )的属性,默认值是‘undefined’,

由于没有块作用域,所以if 块中的 变量声明被预编译了,因此 a 是window的属性 (a in window is true ) ,于是就能理解对话框弹出 'undefined'.

例二答案:

错误的情况我就不多做介绍了,无非是弹出函数b的定义,或者弹出1。

下面解释下本例的情况,本例的代码执行和下列代码执行是一样的:

var a  = 1;
var b = function a (x) {x && a (--x);
};
alert (a);

第一行是一个变量的声明。

第二行是函数字面量(函数表达式,详细用法请参见:深入浅出 JavaScript 函数 v 0.5),只不过该表达式没有省略函数名(a),为什么不省略呢? 因为该函数要递归啊,不然咋递归?

但是残酷的是,函数名在函数外部是未定义的,所以对话框弹出的是 1 。

针对本例还有一种说法是 逗号操作符,不知道是顺序的还是倒序的,但是针对本例,顺序还是逆序,真没什么关系。

例三答案:

本例错误的大部分情况都是弹出'undefined'.

错误的原因就是不太了解JS的预编译过程。

本例中JS的预编译过程是这样的,首先声明变量 a (并未初始化哟),然后再初始化为function, 后面 var a ; 只是声明变量,但是并未给a 赋值,所以其值还是function。

拿下面一段代码做比较,可以印证上面的解释:

function a (x) {return x * 2;
}
var a = 10;
alert (a);

谁最后对同一个变量初始化(可以理解成赋值),最后变量就保留谁的值。

例四答案:

理解本例的关键在于对参数对象的理解,arguments 的详细介绍,在深入浅出 JavaScript 函数 v 0.5中有详细的介绍。

arguments 是一个特殊的对象,有数组的特性,但不是数组,arguments 对象不是只读的,arguments [2] = 10;

这句话就把参数 a (其实可以理解成是函数的内部变量) 更改为10,所以弹出 10。

arguments [2] 和 a 指向的是同一个值。

例五答案:

a 作为一个函数,在JS中函数也是对象,对象当然有属性和方法了。

JavaScript 就为函数对象提供了两个间接调用函数的方法 call() 和apply(),这两个内容的详细解释在深入浅出 JavaScript 函数 v 0.5中有详细的介绍。

call () 方法的语法是这样的:

call([thisObj[,arg1[, arg2[, [,.argN]]]]])    // thisObj 是this要绑定的对象,后面是逗号分隔开的参数

第一个参数是函数要执行的作用域,本例中传入null ,就是说函数的执行没有作用域的跳转,还是在声明函数的作用域中执行。

函数声明的作用域对象为 window 对象,所以对话框弹出 [Object Window] 。

本例中涉及的 this 的用法,请参见深入浅出 JavaScript 函数 v 0.5 。

写在后面的话:

什么是活动对象?

当函数被调用,活动对象(activation object) 就被创建了。它包含普通参数(formal parameters) 与特殊参数(arguments)对象(具有索引属性的参数映射表)。

活动对象在函数上下文中作为变量对象使用。

预编译阶段,匿名函数将不会被解析。这句话的理解:

一句话,函数声明在"预编译阶段"被解析,函数字面量(函数表达式) 在执行阶段被解析。

例子:

alert (add (2,3));    //5
function add(a,b) {return a+b;
}    // 函数声明提升
//=====为了方便,笔者写在了一起,在测试的时候,可不要在一个作用域中执行哟===============
alert (add (2,3));    //error
var add = function (a,b) {return a+b;
}; //函数字面量,注意结尾的分号哟(细节很重要)。

广了个告::(祝大家劳动节快乐,为我们这些劳动者鼓掌)

更过关于函数的内容,尽在 深入浅出 JavaScript 函数 v 0.5

五个小例子教你搞懂 JavaScript 作用域问题相关推荐

  1. 一个例子带你搞懂python作用域中的global、nonlocal和local

    在编程中,只要接触过函数的,我相信都理解什么是全局变量和局部变量,概念比较简单,这里就不做解释了.在python中,用global语句就能将变量定义为全局变量,但是最近又发现有个nonlocal,一时 ...

  2. 计算机话筒技术指标,手把手教你搞懂麦克风的技术指标

    手把手教你搞懂麦克风的技术指标 2015/12/24 11:00:32      来源:艾维音响网 [提要]当你阅读麦克风技术指标的时候,重要的是你要知道怎么去理解它们.在大部分的状况下,技术指标可以 ...

  3. vue2练习五个小例子笔记

    https://segmentfault.com/a/1190000008436978 主题 Vue.js vue2练习五个小例子笔记 多练习,多撸代码,多进步. 基于vue2 1.双向数据绑定 &l ...

  4. 彻底搞懂javascript中的replace函数

    javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...

  5. 来一轮带注释的demo,彻底搞懂javascript中的replace函数

    javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...

  6. 20分钟教你搞懂Git!

    Git 是最流行的版本管理工具,也是程序员必备的技能之一.本文就来教你 20 分钟搞懂 Git! 以下为译文: 尽管每天你都会用到Git,但也有可能搞不懂它的工作原理.为什么Git可以管理版本?基本命 ...

  7. 20 分钟教你搞懂 Git!

    Git 是最流行的版本管理工具,也是程序员必备的技能之一.本文就来教你 20 分钟搞懂 Git! 以下为译文: 尽管每天你都会用到Git,但也有可能搞不懂它的工作原理.为什么Git可以管理版本?基本命 ...

  8. $.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题

    JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...

  9. 一次性搞懂JavaScript 执行机制

    你是否遭受到这样的恐吓? 你是否有过每个表达式前面都console一遍值去找执行顺序? 看了很多js执行机制的文章似乎都是似懂非懂,到技术面问的时候,理不清思绪.总结了众多文章的例子和精华,希望能帮到 ...

最新文章

  1. 从硬件到框架,30+巨头参与的AI基准竞争结果公布(第一回合)
  2. python sklearn.model_selection.ShuffleSplit()函数的用法
  3. java守护锁_Java 对象锁-synchronized()与线程的状态与生命周期与守护进程
  4. asp.net中打印指定控件内容
  5. 大脑体操:三桶分水问题
  6. 2011年8月5日星期五
  7. FontAwesome图标大全
  8. 我在CSDN上的博客地址!
  9. windows安装Composer
  10. 地址坐标LA3708:Graveyard
  11. 【锂电池健康状态预测】基于matlab BP神经网络锂电池健康状态预测【含Matlab源码 688期】
  12. 2023南京工业大学计算机考研信息汇总
  13. sed 批量替换字符串
  14. strtok用法详解
  15. 人工智能轨道交通行业周刊-第12期(2022.8.29-9.4)
  16. win7系统如何搜索计算机,win7怎样搜索文件?win7系统准确搜索文件的方法
  17. 租车汽车租赁管理系统
  18. Android 详解第三方介质交互之NFC,并且实现读你的交通卡,酒店房卡,学生证!
  19. Mysql8.0.28-winx64安装
  20. Java中无穷大、无穷小、非数、最大值、最小值

热门文章

  1. 适配器(Adaptor)模式
  2. 【聊一聊】css中的经典布局——圣杯布局
  3. 【转】浅析动态代理类实现过程
  4. .NET 中的正则表达式
  5. C语言基础MessageBox(......)用法详解
  6. MFC通过对话框窗口句柄获得对话框对象指针
  7. matlab 倒数第二个位置_MATLAB中运行以下程序后倒数第二部分画图程序要怎么改??、、、...
  8. win7纯净版下载csdn_win10原版纯净版下载,安装技巧
  9. 目前最舒服笔记——印象笔记下载使用
  10. uml和模式应用 pdf_「企业架构」架构知识库应用简介