JavaScript - scope, namespace, constructor, equality and comparisons

• JavaScript Garden - 原文

作用域与命名空间

尽管 JavaScript 支持一对花括号创建的代码段，但是并不支持块级作用域； 而仅仅支持函数作用域。

function test() { // 一个作用域
for(var i = 0; i < 10; i++) { // 不是一个作用域
// count
}
  console.log(i); // 10
}

注意:如果不是在赋值语句中，而是在 return 表达式或者函数参数中，{...}将会作为代码段解析， 而不是作为对象的字面语法解析。如果考虑到自动分号插入，这可能会导致一些不易察觉的错误。

译者注：如果 return 对象的左括号和 return 不在一行上就会出错。

// 译者注：下面输出 undefined
function add(a, b) {
return 
        a + b;
}
console.log(add(1, 2));

JavaScript 中没有显式的命名空间定义，这就意味着所有对象都定义在一个全局共享的命名空间下面。

每次引用一个变量，JavaScript 会向上遍历整个作用域直到找到这个变量为止。 如果到达全局作用域但是这个变量仍未找到，则会抛出ReferenceError异常。

隐式的全局变量（The bane of global variables）

// script A
foo = '42';

// script B
var foo = '42'

上面两段脚本效果不同。脚本 A 在全局作用域内定义了变量foo，而脚本 B 在当前作用域内定义变量foo。

再次强调，上面的效果完全不同，不使用var声明变量将会导致隐式的全局变量产生。

// 全局作用域
var foo = 42;
function test() {
// 局部作用域
  foo = 21;
}
test();
foo; // 21

在函数test内不使用var关键字声明foo变量将会覆盖外部的同名变量。 起初这看起来并不是大问题，但是当有成千上万行代码时，不使用var声明变量将会带来难以跟踪的 BUG。

// 全局作用域
var items = [/* some list */];
for(var i = 0; i < 10; i++) {
  subLoop();
}

function subLoop() {
// subLoop 函数作用域
for(i = 0; i < 10; i++) { // 没有使用 var 声明变量
// do amazing stuff!
}
}

外部循环在第一次调用subLoop之后就会终止，因为subLoop覆盖了全局变量i。 在第二个for循环中使用var声明变量可以避免这种错误。 声明变量时绝对不要遗漏var关键字，除非这就是期望的影响外部作用域的行为。

局部变量（Local variables）

JavaScript 中局部变量只可能通过两种方式声明，一个是作为函数参数，另一个是通过var关键字声明。

// 全局变量
var foo = 1;
var bar = 2;
var i = 2;

function test(i) {
// 函数 test 内的局部作用域
  i = 5;

var foo = 3;
  bar = 4;
}
test(10);

foo和i是函数test内的局部变量，而对bar的赋值将会覆盖全局作用域内的同名变量。

变量声明提升（Hoisting）

JavaScript 会提升变量声明。这意味着var表达式和function声明都将会被提升到当前作用域的顶部。

bar();
var bar = function() {};
var someValue = 42;

test();
function test(data) {
if (false) {
    goo = 1;

} else {
var goo = 2;
}
for(var i = 0; i < 100; i++) {
var e = data[i];
}
}

上面代码在运行之前将会被转化。JavaScript 将会把var表达式和function声明提升到当前作用域的顶部。

// var 表达式被移动到这里
var bar, someValue; // 缺省值是 'undefined'

// 函数声明也会提升
function test(data) {
var goo, i, e; // 没有块级作用域，这些变量被移动到函数顶部
if (false) {
    goo = 1;

} else {
    goo = 2;
}
for(i = 0; i < 100; i++) {
    e = data[i];
}
}

bar(); // 出错：TypeError，因为 bar 依然是 'undefined'
someValue = 42; // 赋值语句不会被提升规则（hoisting）影响
bar = function() {};

test();

没有块级作用域不仅导致var表达式被从循环内移到外部，而且使一些if表达式更难看懂。

在原来代码中，if表达式看起来修改了全部变量goo，实际上在提升规则（hoisting）被应用后，却是在修改局部变量。

如果没有提升规则（hoisting）的知识，下面的代码看起来会抛出异常ReferenceError。

// 检查 SomeImportantThing 是否已经被初始化
if (!SomeImportantThing) {
var SomeImportantThing = {};
}

实际上，上面的代码正常运行，因为var表达式会被提升到全局作用域的顶部。

var SomeImportantThing;

// 其它一些代码，可能会初始化 SomeImportantThing，也可能不会

// 检查是否已经被初始化
if (!SomeImportantThing) {
SomeImportantThing = {};
}

译者注：在 Nettuts+ 网站有一篇介绍 hoisting 的文章，其中的代码很有启发性。

// 译者注：来自 Nettuts+ 的一段代码，生动的阐述了 JavaScript 中变量声明提升规则
var myvar = 'my value'; 

(function() { 
    alert(myvar); // undefined 
var myvar = 'local value'; 
})(); 

名称解析顺序（Name resolution order）

JavaScript 中的所有作用域，包括全局作用域，都有一个特别的名称`this`指向当前对象。

函数作用域内也有默认的变量`arguments`，其中包含了传递到函数中的参数。

比如，当访问函数内的foo变量时，JavaScript 会按照下面顺序查找：

1. 当前作用域内是否有var foo的定义。
2. 函数形式参数是否有使用foo名称的。
3. 函数自身是否叫做foo。
4. 回溯到上一级作用域，然后从#1重新开始。

注意:自定义arguments参数将会阻止原生的arguments对象的创建。

命名空间（Namespaces）

只有一个全局作用域导致的常见错误是命名冲突。在 JavaScript中，这可以通过匿名包装器轻松解决。

(function() {
// 函数创建一个命名空间（译者注：也就是作用域）

  window.foo = function() {
// 对外公开的函数，创建了闭包
};

})(); // 立即执行此匿名函数

匿名函数被认为是表达式；因此为了可调用性，它们首先会被执行（evaluated）。

( // 小括号内的函数首先被执行
function() {}
) // 并且返回函数对象
() // 调用上面的执行结果，也就是函数对象

有一些其他的调用函数表达式的方法，比如下面的两种方式语法不同，但是效果一模一样。

// 另外两种方式
+function(){}();
(function(){}());

结论（In conclusion）

推荐使用匿名包装器（译者注：也就是自执行的匿名函数）来创建命名空间。这样不仅可以防止命名冲突， 而且有利于程序的模块化。

另外，使用全局变量被认为是不好的习惯。这样的代码倾向于产生错误和带来高的维护成本。

构造函数

JavaScript 中的构造函数和其它语言中的构造函数是不同的。 通过new关键字方式调用的函数都被认为是构造函数。

在构造函数内部 - 也就是被调用的函数内 -this指向新创建的对象Object。 这个新创建的对象的`prototype`被指向到构造函数的prototype。

如果被调用的函数没有显式的return表达式，则隐式的会返回this对象 - 也就是新创建的对象。

function Foo() {
this.bla = 1;
}

Foo.prototype.test = function() {
  console.log(this.bla);
};

var test = new Foo();

上面代码把Foo作为构造函数调用，并设置新创建对象的prototype为Foo.prototype。

显式的return表达式将会影响返回结果，但仅限于返回的是一个对象。

function Bar() {
return 2;
}
new Bar(); // 返回新创建的对象

// 译者注：new Bar() 返回的是新创建的对象，而不是数字的字面值 2。
// 因此 new Bar().constructor === Bar
// 但是如果返回的是数字对象，结果就不同了
// function Bar() {
//  return new Number(2);
// }
// new Bar().constructor === Number


function Test() {
this.value = 2;

return {
    foo: 1
};
}
new Test(); // 返回的对象
// 译者注：这里得到的是函数返回的对象，而不是通过 new 关键字新创建的对象
// 所有 (new Test()).value 为 undefined，但是 (new Test()).foo === 1。

如果new被遗漏了，则函数不会返回新创建的对象。

function Foo() {
this.bla = 1; // 获取设置全局参数
}
Foo(); // undefined

虽然上例在有些情况下也能正常运行，但是由于 JavaScript 中`this`的工作原理， 这里的this指向全局对象。

工厂模式（Factories）

为了不使用new关键字，构造函数必须显式的返回一个值。

function Bar() {
var value = 1;
return {
    method: function() {
return value;
}
}
}
Bar.prototype = {
  foo: function() {}
};

new Bar();
Bar();

上面两种对Bar函数的调用返回的值完全相同，一个新创建的拥有method属性的对象被返回， 其实这里创建了一个闭包。

还需要注意，new Bar()并不会改变返回对象的原型（译者注：也就是返回对象的原型不会指向 Bar.prototype）。 因为构造函数的原型会被指向到刚刚创建的新对象，而这里的Bar没有把这个新对象返回（译者注：而是返回了一个包含method属性的自定义对象）。

在上面的例子中，使用或者不使用new关键字没有功能性的区别。

// 译者注：上面两种方式创建的对象不能访问 Bar 原型链上的属性
var bar1 = new Bar();
typeof(bar1.method); // "function"
typeof(bar1.foo); // "undefined"

var bar2 = Bar();
typeof(bar2.method); // "function"
typeof(bar2.foo); // "undefined"

通过工厂模式创建新对象（Creating new objects via factories）

我们常听到的一条忠告是不要使用new关键字来调用函数，因为如果忘记使用它就会导致错误。

为了创建新对象，我们可以创建一个工厂方法，并且在方法内构造一个新对象。

function Foo() {
var obj = {};
  obj.value = 'blub';

var private = 2;
  obj.someMethod = function(value) {
this.value = value;
}

  obj.getPrivate = function() {
return private;
}
return obj;
}

虽然上面的方式比起new的调用方式不容易出错，并且可以充分利用私有变量带来的便利， 但是随之而来的是一些不好的地方。

1. 会占用更多的内存，因为新创建的对象不能共享原型上的方法。
2. 为了实现继承，工厂方法需要从另外一个对象拷贝所有属性，或者把一个对象作为新创建对象的原型。
3. 放弃原型链仅仅是因为防止遗漏new带来的问题，这似乎和语言本身的思想相违背。

总结（In conclusion）

虽然遗漏new关键字可能会导致问题，但这并不是放弃使用原型链的借口。 最终使用哪种方式取决于应用程序的需求，选择一种代码书写风格并坚持下去才是最重要的。

相等与比较

JavaScript 有两种方式判断两个值是否相等。

等于操作符（The equals operator）

等于操作符由两个等号组成：==

JavaScript 是弱类型语言，这就意味着，等于操作符会为了比较两个值而进行强制类型转换。

""      ==  "0"      // false
0      ==  ""      // true
0      ==  "0"      // true
false    ==  "false"    // false
false    ==  "0"      // true
false    ==  undefined   // false
false    ==  null     // false
null     ==  undefined   // true
" \t\r\n"  ==  0       // true

上面的表格展示了强类型转换，这也是使用==被广泛认为是不好编程习惯的主要原因， 由于它的复杂转换规则，会导致难以跟踪的问题。

此外，强制类型转换也会带来性能消耗，比如一个字符串为了和一个数组进行比较，必须事先被强制转换为数字。

严格的等于操作符（The strict equals operator）

严格的等于操作符由三个等号组成：===

不想普通的等于操作符，严格的等于操作符不会进行强制类型转换。

""      ===  "0"      // false
0      ===  ""      // false
0      ===  "0"      // false
false    ===  "false"    // false
false    ===  "0"      // false
false    ===  undefined   // false
false    ===  null     // false
null     ===  undefined   // false
" \t\r\n"  ===  0       // false

上面的结果更加清晰并有利于代码的分析。如果两个操作数类型不同就肯定不相等也有助于性能的提升。

比较对象（Comparing objects）

虽然==和===操作符都是等于操作符，但是当其中有一个操作数为对象时，行为就不同了。

{} === {};          // false
new String('foo') === 'foo'; // false
new Number(10) === 10;    // false
var foo = {};
foo === foo;         // true

这里等于操作符比较的不是值是否相等，而是是否属于同一个身份；也就是说，只有对象的同一个实例才被认为是相等的。 这有点像 Python 中的is和 C 中的指针比较。

结论（In conclusion）

强烈推荐使用严格的等于操作符。如果类型需要转换，应该在比较之前显式的转换， 而不是使用语言本身复杂的强制转换规则。