JavaScript 进阶(二)变量作用域

局部变量陷阱

先看一段代码:

  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就会被藏到这个函数里面,就避免了全局变量的出现。

时间: 2024-11-03 03:37:02

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

从头开始学JavaScript 笔记(二)——变量及其作用域

一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义:var firstDemo; 二.变量的作用域 2.1基本概念 使用var 定义变量:定义该变量的作用域的局部变量,这种定义变量的方法也被成为显式声明. 这么说不理解的话可以看看下面这个简单粗暴的例子: test();function test(){var firstDemo="hello";//定义局部变量 alert(firstDemo)

javascript痛点之一变量作用域

1.用var声明的变量是有作用域的,比如我们在函数中用var声明一个变量 1 'use strict'; 2 function num(){ 3 //用var声明一个变量num1 4 var num1 = 15; 5 } 函数中声明了一个变量num1,在js函数中用var声明变量实际上就声明了一个局部变量.局部变量就是在外部访问不到只能在函数内部访问. 1 'use strict'; 2 function num(){ 3 //用var声明一个变量num1 4 var num1 = 15; 5

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

一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元素 方式一: 这里的元素,指html里的标签,通过内置docuement的 'getElementById' 方法获取页面上设置了 id 属性的元素, 获取一个html对象,并为其赋值, 先不赋值看个例子: <!DOCTYPE html> <html lang="en"&

不同JavaScript 代码段 变量作用域

<html><head></head><body><div><h id="h1">Hello World!</h></div><!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> --> <script language="javascr

从头开始学JavaScript (二)——变量及其作用域

原文:从头开始学JavaScript (二)--变量及其作用域 一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义:var firstDemo; 二.变量的作用域 2.1基本概念 使用var 定义变量:定义该变量的作用域的局部变量,这种定义变量的方法也被成为显式声明. 这么说不理解的话可以看看下面这个简单粗暴的例子: test();function test(){var firstDemo="hello

JavaScript进阶之路(二)——变量与基本数据类型

前言 JavaScript中的变量为松散类型,所谓松散类型就是指当一个变量被申明出来就可以保存任意类型的值,就是不像SQL一样申明某个键值为int就只能保存整型数值,申明varchar只能保存字符串.一个变量所保存值的类型也可以改变,这在JavaScript中是完全有效的,只是不推荐.相比较于将变量理解为“盒子“,<JavaScript编程精解>中提到应该将变量理解为“触手”,它不保存值,而是抓取值.这一点在当变量保存引用类型值时更加明显. JavaScript中变量可能包含两种不同的数据类型

JavaScript变量作用域和内存问题(二)

执行环境是js中特别重要的概念,是指变量或者函数可以访问其他数据,定义自己的行为.每个执行环境都有一个与之相对应的变量对象,执行环境中定义的所有变量和函数都保存在这个变量中,我们看不到这个变量,但是后台可以看到.     全局变量的执行环境是最外围的执行环境,在web浏览器中,全局执行环境就是window对象,所以所有的函数和全局变量都可以作为window对象的一个属性.其他执行环境都是在函数和变量执行完毕后销毁内存,变量和函数也随之销毁,而全局变量也是在关闭页面或浏览器的时候销毁.    “

精读《javascript高级程序设计》笔记二——变量、作用域、内存以及引用类型

变量.作用域和内存问题 执行环境共有两种类型——全局和局部 作用域链会加长,有两种情况:try-catch语句的catch块,with语句. javascript没有块级作用域,即在if,for循环中的变量,在块结束后,并不会被销毁. 最好能手工断开原生javascript对象与DOM元素之间的连接. Object类型 创建Object实例有两种方式:new 操作符后跟Object构造函数即new Object(),对象字面量表示法即用{}表示. 可使作方括号表示法来访问对象的属性,将要访问的属

第一百零六节,JavaScript变量作用域及内存

JavaScript变量作用域及内存 学习要点: 1.变量及作用域 2.内存问题 JavaScript的变量与其他语言的变量有很大区别.JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 一.变量及作用域 1.基本类型和引用类型的值 ECMAScript变量可能包含两种不同的数据类型的值:基本类型值和引用类型值.基本类型值指的是那些保存在栈

JavaScript 关于变量作用域的一道面试题

ShineJaie 原创,转载请注明出处. 昨晚在一个交流群里看到有位网友提了一个他的面试题求助答疑.刚好我也有看到,就对这个问题思考了一下,觉得这道题对理解 JavaScript 作用域还是很有帮助的,特此又把自己的解题思路梳理了一遍,希望对其它人有所帮助. 首先看下面试题: 1 var arr = [1, 2, 3]; 2 for (var i = 0, j; j = arr[i++];) { 3 console.log(j); 4 } 5 6 console.log('---------'