// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this // will be stored in the window object. This is very unclean and needs to be avoided. console.log(window.x + ' ' + window.y);
推荐
1 2 3 4 5 6 7 8 9 10 11
// We declare a IIFE and pass parameters into the function that we will use from the global space (function(log, w, undefined){ 'use strict';
总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。如果没有声明，变量处于什么定义域就变得不清（可以是在 Document 或 Window 中，也可以很容易地进入本地定义域）。所以，请总是使用 var 来声明变量。
采用严格模式带来的好处是，当你手误输入错误的变量名时，它可以通过报错信息来帮助你定位错误出处。
不推
1 2
x = 10; y = 100;
推荐
1 2
var x = 10, y = 100;
理解 JavaScript 的定义域和定义域提升
在 JavaScript 中变量和方法定义会自动提升到执行之前。JavaScript 只有 function 级的定义域，而无其他很多编程语言中的块定义域，所以使得你在某一 function 内的某语句和循环体中定义了一个变量，此变量可作用于整个 function 内，而不仅仅是在此语句或循环体中，因为它们的声明被 JavaScript 自动提升了。
(function(log){ 'use strict'; // All variables used in the closure will be hoisted to the top of the function var a, i, b, f; // All functions in the closure will be hoisted to the top functionx() { log('Mr. X!'); }
a = 10;
for(i = 0; i < a; i++) { b = i * i; log(b); }
if(a === 10) { // Function assignments will only result in hoisted variables but the function body will not be hoisted // Only by using a real function declaration the whole function will be hoisted with its body f = function() { log(a); }; f(); }
(function() { // Some initialization code wrapped in a function to create a scope for locals. })();
var x = { 'i': 1, 'j': 2 } // No semicolon here.
// 2. Trying to do one thing on Internet Explorer and another on Firefox. // I know you'd never write code like this, but throw me a bone. [ffVersion, ieVersion][isIE]();
varTHINGS_TO_EAT = [apples, oysters, sprayOnCheese] // No semicolon here.
// 3. conditional execution a la bash -1 == resultOfOperation() || die();
So what happens?
JavaScript 错误 —— 首先返回 42 的那个 function 被第二个 function 当中参数传入调用，接着数字 42 也被“调用”而导致出错。
八成你会得到 ‘no such property in undefined’ 的错误提示，因为在真实环境中的调用是这个样子：x[ffVersion, ieVersion][isIE]().
// Constructor function functionApple(name) { this.name = name; } // Defining a method of apple Apple.prototype.eat = function() { log('Eating ' + this.name); };
// Constructor function functionGrannySmithApple() { // Invoking parent constructor Apple.prototype.constructor.call(this, 'Granny Smith'); } // Set parent prototype while creating a copy with Object.create GrannySmithApple.prototype = Object.create(Apple.prototype); // Set constructor to the sub type, otherwise points to Apple GrannySmithApple.prototype.constructor = GrannySmithApple;
// Calling a super method GrannySmithApple.prototype.eat = function() { // Be sure to apply it onto our current object with call(this) Apple.prototype.eat.call(this);
log('Poor Grany Smith'); };
// Instantiation var apple = newApple('Test Apple'); var grannyApple = newGrannySmithApple();
log(apple.name); // Test Apple log(grannyApple.name); // Granny Smith
// numbers and i is defined in the current function closure var numbers = [1, 2, 3], i;
for(i = 0; i < numbers.length; i++) { w.setTimeout(function() { // At the moment when this gets executed the i variable, coming from the outer function scope // is set to 3 and the current program is alerting the message 3 times // 'Index 3 with number undefined // If you understand closures in javascript you know how to deal with those cases // It's best to just avoid functions / new closures in loops as this prevents those issues
w.alert('Index ' + i + ' with number ' + numbers[i]); }, 0); }
// numbers and i is defined in the current function closure var numbers = [1, 2, 3], i;
for(i = 0; i < numbers.length; i++) { // Creating a new closure scope with an IIFE solves the problem // The delayed function will use index and number which are // in their own closure scope (one closure per loop iteration). // --- // Still this is not recommended as we violate our rule to not // create functions within loops and we are creating two!
(function(index, number){ w.setTimeout(function() { // Will output as expected 0 > 1, 1 > 2, 2 > 3 w.alert('Index ' + index + ' with number ' + number); }, 0); }(i, numbers[i])); }
// numbers and i is defined in the current function closure var numbers = [1, 2, 3], i;
// Create a function outside of the loop that will accept arguments to create a // function closure scope. This function will return a function that executes in this // closure parent scope. functionalertIndexWithNumber(index, number) { returnfunction() { w.alert('Index ' + index + ' with number ' + number); }; }
// First parameter is a function call that returns a function. // --- // This solves our problem and we don't create a function inside our loop for(i = 0; i < numbers.length; i++) { w.setTimeout(alertIndexWithNumber(i, numbers[i]), 0); }
只在对象构造器、方法和在设定的闭包中使用 this 关键字。this 的语义在此有些误导。它时而指向全局对象（大多数时），时而指向调用者的定义域（在 eval 中），时而指向 DOM 树中的某一节点（当用事件处理绑定到 HTML 属性上时），时而指向一个新创建的对象（在构造器中），还时而指向其它的一些对象（如果函数被 call() 和 apply() 执行和调用时）。
// Iterate over an array and break at a certain condition [1, 2, 3, 4, 5].every(function(element, index, arr) { log(element + ' at index ' + index + ' in array ' + arr);
if(index !== 5) { returntrue; } });
// Defining a simple javascript object var obj = { a: 'A', b: 'B', 'c-d-e': 'CDE' };
// Iterating over the object keys Object.keys(obj).forEach(function(element, index, arr) { log('Key ' + element + ' has value ' + obj[element]); });
}(window.console.log));
不要使用 switch
switch 在所有的编程语言中都是个非常错误的难以控制的语句，建议用 if else 来替换它。
数组和对象字面量
用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。
不推荐
1 2 3 4 5 6 7 8 9 10 11 12 13
// Length is 3. var a1 = newArray(x1, x2, x3);
// Length is 2. var a2 = newArray(x1, x2);
// If x1 is a number and it is a natural number the length will be x1. // If x1 is a number but not a natural number this will throw an exception. // Otherwise the array will have one element with x1 as its value. var a3 = newArray(x1);