Javascript 正确使用方法二

浏览数：19 / 时间：2015年06月08日

好的,废话不多说,接着上篇来.

变量(variables)

始终使用 var 关键字来定义变量,如果不这样将会导致变量全局化,造成污染.

//bad

superPower = new SuperPower();

//good

var superPower = new SuperPower();

使用一个 var关键字来定义多个变量...并且每个变量一行..

    // bad
    var items = getItems();
    var goSportsTeam = true;
    var dragonball = ‘z‘;

    // good
    var items = getItems(),
        goSportsTeam = true,
        dragonball = ‘z‘;

//我个人更喜欢下面这种定义方法.

    var items = getItems()
        , goSportsTeam = true
        ,   dragonball = ‘z‘;

将未赋值的变量放在后面...

    // bad
    var i, len, dragonball,
        items = getItems(),
        goSportsTeam = true;

    // bad
    var i, items = getItems(),
        dragonball,
        goSportsTeam = true,
        len;

    // good
    var items = getItems(),
        goSportsTeam = true,
        dragonball,
        length,
        i;

将变量的定义和赋值放在作用域的顶部,这样能避免变量提升相关的问题..

    // bad
    function() {
      test();
      console.log(‘doing stuff..‘);

      //..other stuff..

      var name = getName();

      if (name === ‘test‘) {
        return false;
      }

      return name;
    }

    // good
    function() {
      var name = getName();

      test();
      console.log(‘doing stuff..‘);

      //..other stuff..

      if (name === ‘test‘) {
        return false;
      }

      return name;
    }

    // bad
    function() {
      var name = getName();

      if (!arguments.length) {
        return false;
      }

      return true;
    }

    // good
    function() {
      if (!arguments.length) {
        return false;
      }

      var name = getName();

      return true;
    }

//上面这个例子我感觉这么奇葩呢...这个name根本没有起到任何作用啊...

Hoisting (国内书籍翻译为提升)

变量的定义会得到提升,也就是移动到作用域的顶部 ,但是赋值并没有得到提升..

举个简单的例子..对于简单的 var a = 10;

其实经历的是两个过程,

① var a;

② a = 10;

恩,,变量提升只是提升的第一部分,而第二部分并没有得到提升...

    function example() {
      console.log(declaredButNotAssigned); // => undefined
      var declaredButNotAssigned = true;
    }

    function example() {
      var declaredButNotAssigned;
      console.log(declaredButNotAssigned); // => undefined
      declaredButNotAssigned = true;
    }

匿名函数表达式提升的只是变量的名称,而不是函数的定义..

    function example() {
      console.log(anonymous); // => undefined

      anonymous(); // => TypeError anonymous is not a function

      var anonymous = function() {
        console.log(‘anonymous function expression‘);
      };
    }

命名函数提升的同样是变量的名称,而不是函数的名称.或者是函数体..

    function example() {
      console.log(named); // => undefined //变量名得到提升..

      named(); // => TypeError named is not a function //函数体没有得到提升..

      superPower(); // => ReferenceError superPower is not defined //函数名没有得到提升..

      var named = function superPower() {
        console.log(‘Flying‘);
      };
    }

函数定义同时提升他们的名称和函数体..

    function example() {
      superPower(); // => Flying

      function superPower() {
        console.log(‘Flying‘);
      }
    }

//这也就是为什么我们在我们代码的底部通过这种方式能够访问,但是按照之前的方式定义函数无法访问的原因了..

//现在大家明白了吧..

Contional Expressions & Equality 条件表达式和等式..

条件表达式会通过类型转换来对括号内的内容进行评估来返回 Boolean值..

转换会遵循以下规则:

1,对象返回 true

2,underfined 返回false

3, Null 返回false

4, Booleans类型就返回自己.

5, +0,0,-0,NaN 返回false ,其他返回true

6, 空字符返回false..//注意注意,如果你的字符串里面有空格,则同样会返回true

if([0]) {

//true

//这个array 是我们之前提过的,是通过字面量来进行数组的创建.... 当然返回true,不要被 0 迷惑了..

}

    // bad
    if (name !== ‘‘) {
      // ...stuff...
    }

    // good
    if (name) {
      // ...stuff...
    }

    // bad
    if (collection.length > 0) {
      // ...stuff...
    }

    // good
    if (collection.length) {
      // ...stuff...
    }

代码块..

    // bad
    if (test)
      return false;

    // good
    if (test) return false;

    // good
    if (test) {
      return false;
    }

    // bad
    function() { return false; }

    // good
    function() {
      return false;
    }