Javascript 風格嚮導(續)

來源:互聯網
上載者:User
序   我好長時間沒有在推薦欄裡出現了,看來上一篇反響不錯,故再續上篇。 Properties  • 當訪問屬性的時候,我們使用點(.)操作符。
var luke = {  jedi: true,  age: 28};// badvar isJedi = luke['jedi'];// goodvar isJedi = luke.jedi;

 • 當以變數的方式訪問屬性的時候,用下標符號([])。——除非特殊需求,否則盡量避免使用obj[variable]的方式進行屬性訪問。

var luke = {  jedi: true,  age: 28};function getProp(prop) {  return luke[prop];}var isJedi = getProp('jedi');

 

Variables  • 總是使用var定義變數,否則會導致產生隱含全域變數。我們要盡量避免汙染全域變數命名空間。
// badsuperPower = new SuperPower();// goodvar superPower = new SuperPower();

湯姆大叔—javascript系列文章中提到“JavaScript有隱含的全域概念,意味著你不聲明的任何變數都會成為一個全域對象屬性。在技術上,隱式全域變數並不是真正的全域變數,但它們是全域對象的屬性。屬性是可以通過delete操作符刪除的,而變數是不能的。"

 • 使用一個var定義多個變數,每個變數在一個新行上。
// badvar items = getItems();var goSportsTeam = true;var dragonball = 'z';// goodvar items = getItems(),    goSportsTeam = true,    dragonball = 'z';

 • 用var定義多個變數的時候,把不進行賦值的變數放置到最後——這是相當有益的。尤其是當你的變數需要前面變數值的時候。

// badvar i, len, dragonball,    items = getItems(),    goSportsTeam = true;// badvar i, items = getItems(),    dragonball,    goSportsTeam = true,    len;// goodvar items = getItems(),    goSportsTeam = true,    dragonball,    length,    i;

 • 把你的賦值變數放置在當前範圍的頂端。這將避免變數聲明和hoisting(懸置/置頂解析/預解析)的問題。

// badfunction() {  test();  console.log('doing stuff..');  //..other stuff..  var name = getName();  if (name === 'test') {    return false;  }  return name;}// goodfunction() {  var name = getName();  test();  console.log('doing stuff..');  //..other stuff..  if (name === 'test') {    return false;  }  return name;}// badfunction() {  var name = getName();  if (!arguments.length) {    return false;  }  return true;}// goodfunction() {  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}

 •  使用捷徑。

// badif (name !== '') {  // ...stuff...}// goodif (name) {  // ...stuff...}// badif (collection.length > 0) {  // ...stuff...}// goodif (collection.length) {  // ...stuff...}

 

 總結   歡迎大家討論,希望能反映出更多的問題來。   下一篇:Javascript 風格嚮導(終結) 推薦 

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.