zoukankan      html  css  js  c++  java
  • JavaScript秘密花园 scope, namespace, constructor, equality and comparisons

    作用域与命名空间

    尽管 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)

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

  • 相关阅读:
    String 对象-->indexOf() 方法
    String 对象-->大小比较
    String 对象-->判断是否相等
    String 对象-->toUpperCase() 方法
    String 对象-->toLowerCase() 方法
    String 对象-->fromCharCode() 方法
    String 对象-->charCodeAt() 方法
    从零开始学 Web 之 CSS3(六)动画animation,Web字体
    从零开始学 Web 之 CSS3(五)transform
    从零开始学 Web 之 CSS3(四)边框图片,过渡
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6468668.html
Copyright © 2011-2022 走看看