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 風格向導（終結）

 

推薦