Javascript 风格向导（续） - 川山甲

公告

序

　　我好长时间没有在推荐栏里出现了，看来上一篇反响不错，故再续上篇。

Properties

•　当访问属性的时候，我们使用点（.）操作符。

var luke = {
  jedi: true,
  age: 28
};

// bad
var isJedi = luke['jedi'];

// good
var isJedi = luke.jedi;

•　当以变量的方式访问属性的时候，用下标符号（[]）。——除非特殊需求,否则尽量避免使用obj[variable]的方式进行属性访问。

var luke = {
  jedi: true,
  age: 28
};

function getProp(prop) {
  return luke[prop];
}

var isJedi = getProp('jedi');

Variables

•　总是使用var定义变量，否则会导致产生隐含全局变量。我们要尽量避免污染全局变量命名空间。

// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();

汤姆大叔—javascript系列文章中提到“JavaScript有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性。在技术上，隐式全局变量并不是真正的全局变量，但它们是全局对象的属性。属性是可以通过delete操作符删除的，而变量是不能的。"

•　使用一个var定义多个变量，每个变量在一个新行上。

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

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

•　用var定义多个变量的时候，把不进行赋值的变量放置到最后——这是相当有益的。尤其是当你的变量需要赋前面变量值的时候。

// 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;

•　把你的赋值变量放置在当前作用域的顶端。这将避免变量声明和hoisting（悬置/置顶解析/预解析）的问题。

// 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;
}

Hoisting

汤姆大叔：

　　1、JavaScript中，你可以在函数的任何位置声明多个var语句，并且它们就好像是在函数顶部声明一样发挥作用，这种行为称为 hoisting（悬置/置顶解析/预解析）。

　　2、对于JavaScript，只要你的变量是在同一个作用域中（同一函数），它都被当做是声明的，即使是它在var声明前使用的时候。

• 变量声明提升到当前作用域的顶端，而它们的赋值操作不一定要这么做。

function example() {
  console.log(notDefined); // => throws a ReferenceError
}


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


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

• 匿名表达式会自动提升它们的变量名称（也就是说在var anonymous上面，example函数就已经知道有这个变量了），但是它们的函数体不会。

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() {
    console.log(named); // => undefined

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

    var named = function named() {
      console.log('named');
    };
  }
}

• 注意：函数声明会提升它们的变量名称还有它们的函数体。

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

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

Conditional Expressions & Equality

• 使用 === 和 !== 代替==和!=。

== 和 != 会进行隐式类型转换，所以建议使用===和!==。

• 强制使用对象的特性(ToBoolean)得到条件表达式的值，大致遵循以下简单规则。

　　◊ Objects 得到的值是true。

　　◊ Undefined得到的值是false。

　　◊ Null得到的值是false。

　　◊ Booleans得到的值是Boolean值（呵呵，当然）。

　　◊ Numbers 得到的值是：如果是+0，-0，或者NaN就是false，否则就是true。

　　◊ Strings 得到的值是：如果是''，就是false，否则就是true。

if ([0]) {
  // true
  // An array is an object, objects evaluate to true
}

• 使用快捷方式。

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

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

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

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

总结

　　欢迎大家讨论，希望能反映出更多的问题来。

　　下一篇：Javascript 风格向导（终结）