天空一声巨响,道长闪亮登场,飞花落叶,尘土飞扬,此处不应恐慌,用阅读变量的概念来提升气场。

1)变量的声明,使用一个变量之前应该先声明。变量是使用关键字var来声明的,如下:

  var number;     //申明了一个变量

2)变量的赋值,如下:

  number=520;   //给变量赋值(javascript中的变量是可以赋任意类型的值的,比如字符串,对象,函数等等)

3)上面两个步骤可以合到一起,如下:

  var number=520;  //等价于前两步

**有人会说 number=520;  即使没用var声明,变量一样的使用,其实是有区别的,这里就不做无意义的讨论了。

**你只要记住,这是一个不好的习惯,应当始终使用var关键字来声明变量。

故事就从这里开始了。

看一段代码:

  if(!(n in window)){

var n=100;    //注意这行代码等价于 var n; n=100;这两行代码

  }

  alert(n);

  alert(a);

这里, alert(n)会弹出undefined,     alert(a)会报错:a is not defined。

弹出undefined的意思是n已经声明但是还没有赋值,报错是a没有声明,不存在。

a报错好理解。这里我要解释为什么alert(n)会弹出undefined,而不是报错或者弹出100.

其中的原理有点复杂。

先来理解javascript的两个概念:作用域和声明提前。

1 作用域:

我们知道类似c语言,比如java的花括号都有自己的作用域。

但是javascript 不同,它的if等花括号不算块级作用域(函数除外)。

2 声明提前:

变量的声明会被提前到作用域的顶部(意味着变量在申明之前就可以使用了,只要在作用域内)

好吧,从 var n=100; 这一行代码说起,if的花括号关不住它的,所以n算全局变量.

因为if的条件返回false,所以不会执行赋值的操作,不可能弹出100.

而根据申明提前,javascript引擎的“预编译”是在代码开始运行之前执行的,

它才不管if的条件是true还是false,

它看到var关键字就把这个变量申明提到作用域第一行了,它就是这么任性。

但是变量赋值就惨了,他说:if的条件是false,我永远不会被执行啦。

javascript中声明过的变量如果没赋值就是undefined。

而函数是有自己的作用域的,来一个例子加注释,如果你不能理解的话,那就不理解吧。

这里声明了两个scope,一个是全局变量,一个是只能在函数中使用的局部变量。

var scope="global";

function f(){

  console.log(scope);

  var scope="local";//这里等价于两步 1:var scope; 2:scope="local"; 第一步由于声明提前在捣鬼,会把它提到函数第一行

  console.log(scope);

}

两次动作console.log(scope);都是在函数中打印scope变量的值。

如果函数作用域中有了scope,两次都不会理睬外面声明的scoped。(局部作用域优先)

所以第一次打印出undefined,第二次打印出local;

道长叨叨:javascript全局变量是全局对象的属性,而局部变量没有这样规定,在扯下去一夜都叨叨不完了。

道长的建议:函数里面的变量申明尽量放在函数体顶部,让代码更具可读性。

JavaScript之周道长浅谈变量使用中的坑的更多相关文章

  1. 读《你不知道的JavaScript(上卷)》后感-浅谈JavaScript作用域(一)

    原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这 ...

  2. 浅谈javascript函数,变量声明及作用域

    javascript函数跟变量的声明.作用域这些概念网上都已经讲烂了. 这里写个博客,也相当于做个笔记. 变量声明 首先看个例子: var globalVar = "gv"; fu ...

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

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

  4. [转载]浅谈JavaScript函数重载

     原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...

  5. 浅谈JavaScript中的闭包

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

  6. 浅谈JavaScript中的内存管理

    一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...

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

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

  8. 浅谈JavaScript中的null和undefined

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

  9. 虚拟化构建二分图(BZOJ2080 题解+浅谈几道双栈排序思想的题)

    虚拟化构建二分图 ------BZOJ2080 题解+浅谈几道双栈排序思想的题 本题的题解在最下面↓↓↓ 不得不说,第一次接触类似于双栈排序的这种题,是在BZOJ的五月月赛上. [BZOJ4881][ ...

随机推荐

  1. Rethrowing exceptions and preserving the full call stack trace

    refer:http://weblogs.asp.net/fmarguerie/archive/2008/01/02/rethrowing-exceptions-and-preserving-the- ...

  2. c++保留小数问题,如有不足或错误,欢迎指出

    #include<iostream> #include <iomanip> using namespace std; int main() { double a; cin> ...

  3. 数字信号处理--Z变换,傅里叶变换,拉普拉斯变换

    傅立叶变换.拉普拉斯变换.Z变换最全攻略 作者:时间:2015-07-19来源:网络       傅立叶变换.拉普拉斯变换.Z变换的联系?他们的本质和区别是什么?为什么要进行这些变换.研究的都是什么? ...

  4. 使用vagrant创建虚拟机

    关于vagrant,维基百科给出了定义:"Vagrant is an open-source software product for building and maintaining po ...

  5. 将mac上的项目上传到oschina,进行代码托管。

    1.首先看一下自己是否有公钥, 在 我的资料-->SSH公钥  查看,如果没有,添加自己的SSH 公钥: SSH key 可以让你在你的电脑和 Git @ OSC 之间建立安全的加密连接. 2. ...

  6. 史航第12次作业&总结

    作业1:找出最长的字符串 #include <stdio.h> #include <string.h> int main() { ],strings[][]; ; printf ...

  7. Altium Designer XX 重新定义板框形状和大小的方法

    Altium Designer15 重新定义板框形状和大小的方法:重新定义板框形状和大小的方法.很简单,点击数字键"1",就会看到板框界面变绿了这时候你在去点击菜单栏里的Desig ...

  8. 试一下CANVAS

    // 此应用源代码如下: document.getElementById("codetext").innerHTML = document.getElementById(" ...

  9. Java Sha1 加密算法

    //下面四个import放在类名前面 包名后面 //import java.io.UnsupportedEncodingException; //import java.security.Messag ...

  10. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...