局部变量陷阱

先看一段代码:

  1. function foo() {
  2. var a = "hello"
  3. b = "world"
  4. return a + b;
  5. }

这个函数执行完成之后返回helloworld,结果确实没有问题。但是里面有一个细节就是两个局部变量一个前边有var,另一个没有。这似乎并不影响执行,但是事实上没有var的话,这个变量就变成了全局变量。你在这个函数外面调用一下alert(b)试一下就知道了。一个莫名其妙冒出来的全局变量在有时候会引起匪夷所思的bug,所以一定要记得局部变量声明前一定要用var

变量声明提升

再看一段代码:

  1. var foo = "hello"
  2. function test() {
  3. alert(foo);
  4. var foo = "world";
  5. }
  6. test()

代码执行时,请问alert的内容是什么呢?答案是undefined。从直觉上来讲,运行alert的时候,foo这个变量没有声明,不存在。既然局部作用域没有,那就去全局作用域找,应该是"hello"才是啊。为什么呢?这就是变量声明提升。函数内的任何变量的声明都会被提升至函数的顶部,所以上面的test函数相当于

  1. function test() {
  2. var foo;
  3. alert(foo);
  4. foo = "world";
  5. }

所以会是undefined。这里注意提升的只是声明,赋值的代码还在原来的地方。并且声明的部分与声明的代码是否执行无关,比如

  1. function test() {
  2. alert(foo);
  3. if(false) {
  4. foo = "world";
  5. }
  6. }

把test函数修改成这个样子,执行结果仍然是一样。声明仍然被提前了,尽管这行代码将不会被运行。
这就是变量声明提升,我们再看一个例子

  1. function test() {
  2. foo1();
  3. foo2();
  4. function foo1(){alert("foo1")}
  5. var foo2 = function(){alert("foo2")}
  6. }

当test函数执行的时候,结果如何呢?结果是foo1被alert出来,然后JS报错"undefined is not a function"。这里在函数内部声明函数的提升有点区别。foo1,用函数的方式声明定义一个函数,则声明与函数体都被提升了,但是foo2用变量的方式定义函数,被提升的只有声明,函数体没有被提升,所以执行foo2()的时候,foo2没有被赋值,是undefined。

看起来由于JS里面有变量声明提升,那么就无法使用C语言里面的块级作用域,那么我确实想用,怎么办呢?有一个办法是用匿名函数,举例如下:

  1. var foo = "hello"
  2. function test() {
  3. alert(foo);
  4. (function(){
  5. var foo = "world";
  6. })()
  7. }
  8. test()

当test函数改成这个样子的时候,alert出来的结果就是"hello"了,匿名函数里面的foo就无法作用到其他地方。

闭包中的局部变量

我之前招聘前端,问了应聘者这样一个题目,说请写一个可以返回递增整数序列的函数,他给我的答案是这样

  1. var i = 0;
  2. function increase() {return i++;}

当反复调用函数increase的时候,就会返回递增序列。但是我接着问,如果有人失手改了i怎么样,他语塞。其实这个问题的关键是说要制造一个很安全的地方来放置这个i,让这个变量只能被一个函数访问,所以一个可选的答案是这样。此时increase就是会返回递增序列。并且i放在了一个很安全的地方。就不会被破坏了。

  1. var increase = (function() {
  2. var i = 0;
  3. return function(){return i++;}
  4. })();

JS的闭包是一个很值得讲的内容,好用,但是也有不少坑,下面我专门开一篇文章来讲。

全局变量

无数讲高质量代码的书籍都会提到全局变量这个大杀器,程序员们都被反复告诫,除非你又充足的理由,否则不要使用全局变量,JS也不例外。然而JS有一个特殊的地方就是没有main方法,入口的代码一定要写,但是写在这地方的代码难免要用到变量,这些变量就是全局变量了,那么如何处理这个问题呢?答案还是匿名函数,像这样:

  1. (function(){
  2. var a = "a";
  3. var b = "b";
  4. var c = "c";
  5. foo(a, b, c);
  6. })()

把入口代码放到一个匿名函数中,这样这些变量a, b, c就会被藏到这个函数里面,就避免了全局变量的出现。

JavaScript 进阶(二)变量作用域的更多相关文章

  1. javascript中的变量作用域以及变量提升

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解. 变量作用域 “一个变量的作用域表示这个变量存在的上 ...

  2. JavaScript基础——理解变量作用域

    一旦你开始在JavaScript应用程序中添加条件.函数和循环,就需要理解变量作用域.变量作用域规定了如何确定正在执行的代码行上的一个特定变量名的值. JavaScript允许你既定义全局版本又定义局 ...

  3. javascript中的变量作用域以及变量提升详细介绍

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解变量作用域 “一个变量的作用域表示这个变量存在的上下文 ...

  4. 【JavaScript 从零开始】变量作用域

    变量作用域 一个变量的作用域(scope)是程序源代码中定义这个变量的区域. 全局变量拥有全局作用域,在JavaScript代码中的任何地方都是有定义的.然而在函数内声明的变量只是函数体内有定义. 他 ...

  5. JavaScript学习系列2一JavaScript中的变量作用域

    在写这篇文章之前,再次提醒一下 JavaScript 是大小写敏感的语言 // 'test', 'Test', 'TeSt' , 'TEST' 是4个不同的变量名 JavaScript中的变量,最重要 ...

  6. JavaScript要点 (一) 变量-作用域

    JavaScript 作用域 作用域—可访问变量的集合. 全局变量或者函数可以覆盖window对象的变量或者函数: 局部变量和window对象可以覆盖全局变量和函数. JavaScript 作用域 在 ...

  7. javascript中的变量作用域

    在网上看了一道js面试题 <script type="text/javascript"> var tt = 'aa'; function test() { alert( ...

  8. javascript痛点之一变量作用域

    1.用var声明的变量是有作用域的,比如我们在函数中用var声明一个变量 1 'use strict'; 2 function num(){ 3 //用var声明一个变量num1 4 var num1 ...

  9. 【Javascript系列】变量作用域

    问题描述 本篇文章主要讲解javascript变量及其作用域. 1   内容区 在js中,变量大致可分为全局变量(全局作用域)和局部变量(局部作用域): 用关键字var定义变量(全局变量,可以省略va ...

  10. Javascript入门(二)变量、获取元素、操作元素

    一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元 ...

随机推荐

  1. Identifiers

    Identifier An identifier is an arbitrarily long sequence of digits, underscores, lowercase and upper ...

  2. CMarkUp接口说明

    CMarkup是一个小型XML的分析器,实现语言是C++,英文版的接口说明地址为:http://www.firstobject.com/dn_markupmethods.htm 有厉害的网友已经翻译出 ...

  3. form的验证用法

    models.py forms.py html页面 第二种方法: 不继承model直接自定义内容 获得内容: if form.is_valid():            price = reques ...

  4. Firemonkey ListBoxItem自绘

    ListBoxItem1的事件ListBoxItem1Paint procedure TForm1.ListBoxItem1Paint(Sender: TObject; Canvas: TCanvas ...

  5. Computer Transformation(规律,大数打表)

    Computer Transformation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  6. Java之GUI编程(一)

    GUI全称Graphical User Interfaces,意为图形用户户界面,又称为图形用户接口.GUI指的就是採用图形方式显示的计算机操作用户界面,打个例如吧.我们点击QQ图标,就会弹出一个QQ ...

  7. 亚马逊带Marketplace product code的image无法再mount到其他镜像上

    这是对已发布镜像的保护么?难道对其进行修改的路彻底断掉了? 以volume形式attach也不行,dd成raw再读取也读不了,敢问路在何方呢 If a volume has an AWS Market ...

  8. ELK 之一:ElasticSearch 基础和集群搭建

    一:需求及基础: 场景: 1.开发人员不能登录线上服务器查看详细日志 2.各个系统都有日志,日志数据分散难以查找 3.日志数据量大,查询速度慢,或者数据不够实时 4.一个调用会涉及到多个系统,难以在这 ...

  9. Linux下Nginx+tomcat应用系统性能优化

    软件环境及服务器配置如下: Linux rh6.3,Tomcat7.0.29,Nginx1.2.7 mysql5.1,jdk1.6.0 mysql5.1 memcached 1.4.15 Xeno 2 ...

  10. python读取文件内容方法

    1) readline 每次读一行,返回序列 2) readlines 一次全部读出,返回序列 3) numpy 的genfromtxt,返回为np的矩阵格式 import numpy as np f ...