好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

翻译]JavaScript秘密花园 scope, namespace, constructor,

翻译]JavaScript秘密花园 scope, namespace, constructor, equality and comparisons

JavaScript Garden - 原文 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 会按照下面顺序查找:

当前作用域内是否有 var foo 的定义。 函数形式参数是否有使用 foo 名称的。 函数自身是否叫做 foo 。 回溯到上一级作用域,然后从 #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 的调用方式不容易出错,并且可以充分利用 私有变量 带来的便利,但是随之而来的是一些不好的地方。

会占用更多的内存,因为新创建的对象 不能 共享原型上的方法。 为了实现继承,工厂方法需要从另外一个对象拷贝所有属性,或者把一个对象作为新创建对象的原型。 放弃原型链仅仅是因为防止遗漏 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)

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

http://www.cnblogs.com/sanshi/archive/2011/03/22/1991987.html

作者: Leo_wl

    

出处: http://www.cnblogs.com/Leo_wl/

    

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权信息

查看更多关于翻译]JavaScript秘密花园 scope, namespace, constructor,的详细内容...

  阅读:39次