Javascript学习笔记二 之 变量

一.关于Javascript变量声明

  在Javascript中,声明一个变量

  var a=1;

  也可以直接

  a=1;

  这两种表达是有区别的,

  一个是当前作用域的局部变量,另一个则是当前作用域的全局变量;

   Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 

  

复制代码 代码如下:

  var n=999;

  function f1(){

  alert(n);

  }

  f1(); // 999

  另一方面,在函数外部自然无法读取函数内的局部变量。

  

复制代码 代码如下:

  function f1(){

  var n=999;

  }

  alert(n); // error

  二.Javascript变量作用域链

  

复制代码 代码如下:

  var x='000 ';

  document.writeln(x); //得出'000 '

  a();

  function a(){

  var x='aaa ';

  function b(){

  document.writeln(x); //undefined

  var x='bbb ';

  document.writeln(x); //bbb

  }

  b();

  document.writeln(x); //aaa

  }

  //结果是:000 undefined bbb aaa

  原理:

   当变量使用时,先从函数块(权威指南中用调用对象来解释)中找,

   如果找不到,从上一级函数块找,直到找到,

   如果直到顶层代码(指var x='000 ';的位置)还没找到定义,代码会报未定义错误。

  1.按顺序执行的顺序,输出x '000 '(这个没问题);

  2.然后执行a()

  3.在a()中执行b()

  4.b()中需要输出x,该函数体内(作用域)有x定义,但是还未赋值,因此输出undefined;(重点!)

  5.然后再输出x,x已赋值,因此输出bbb;

  6.最后输出aaa;

  了解了以上原理,我们来看下面的例子

  

复制代码 代码如下:

  var x = "global";

  function f() {

  var x='f1';

  function f2(){

  x='f2' ;//这里我有些混淆,GLOBAL的X应该重新被赋值为'f2'

  alert(x); //返回"f2"

  alert(window.x); //返回"global"

  }

  f2();

  alert(x) //返回"f2"

  }

  f();

  alert(x); //返回"global",没有被重新赋值为:f2

  //结果分别弹出:f2 global f2 global

  解释:

   首先执行f()中的f2(),

  f2()为内部函数产生一个作用域,因此x=‘f2'修改的是f()中的x值,而非全局x.

  alert(x);为‘f2',alert(window.x)为‘global'.

  然后执行alert(x);这个x的作用域为全局,为‘global'

  三.给新手的建议

  1.减少全局变量(解决方案:把变量封装到对象中)

  引用:

  “把你踩在全局的那些乱七八糟的脚印都归于一人名下,能显著降低与其他应用、小工具或JS库冲突的可能性。”

  – Douglas Crockford

  

复制代码 代码如下:

  var name = 'Jeffrey';

  var lastName = 'Way';

  function doSomething() {...}

  console.log(name); // Jeffrey -- or window.name

  更好的写法

  

复制代码 代码如下:

  var DudeNameSpace = {

  name : 'Jeffrey',

  lastName : 'Way',

  doSomething : function() {...}

  }

  console.log(DudeNameSpace.name); // Jeffrey

  注意看,我们是如何戏剧化地把“乱七八糟的脚印”都归到“DudeNameSpace”这对象之下的;

  2.一长列变量声明?别写那么多var,用逗号吧

  

复制代码 代码如下:

  var someItem = 'some string';

  var anotherItem = 'another string';

  var oneMoreItem = 'one more string';

  更好的写法

  

复制代码 代码如下:

  var someItem = 'some string',

  anotherItem = 'another string',

  oneMoreItem = 'one more string';

  不言自明。我不知道这样做能否提升代码执行速度,但是确实让你的代码干净许多。