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);

    fooi 是函数 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 作为构造函数调用,并设置新创建对象的 prototypeFoo.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)

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

  • 相关阅读:
    RecyclerView 数据刷新的几种方式 局部刷新 notify MD
    【图片】批量获取几万张图片
    RV BaseRecyclerViewAdapterHelper 总结 MD
    RecyclerView.ItemDecoration 间隔线
    Kotlin【简介】Android开发 配置 扩展
    Kotlin 特性 语法糖 优势 扩展 高阶 MD
    一个十分简洁实用的MD风格的UI主框架
    折叠伸缩工具栏 CollapsingToolbarLayout
    FloatingActionButton FAB 悬浮按钮
    Glide Picasso Fresco UIL 图片框架 缓存 MD
  • 原文地址:https://www.cnblogs.com/sanshi/p/1991987.html
Copyright © 2011-2022 走看看