读《编写可维护的JavaScript》第八章总结

第八章 避免“空比较”

我们在对传进来的参数做处理之前，肯定需要验证一下是否是我们想要的，也就是说大多数情况下，我们需要对比一下它的类型。

作者首先给了一个看起来都感觉不对的代码：

      var Controller = {
            process: function(items) {
                 if (items !== null) {
                     items.sort(); // 不好的写法
                     items.forEach(function(){
                        // 执行一些逻辑
                     });
                 }
            }
        };

在这段代码中，process()方法显然希望items是一个数组，因为我们看到items拥有sort()和 forEach()。

但是这种写法有很大的问题：items值可以是1，也可以是字符串，甚至可以是对象，这些值都和null不相等，进而导致后面执行process()会出现问题。所以接下来就是各种检测：

8.1 检测原始值

在JavaScript中有5种原始类型: 字符串、数字、布尔值、undefined和null。如果你想检测他们，最佳的办法是使用typeof运算符。(作者推荐: typeof variable这样的用法，这样写也行：typeof(variable)，但是看起来像一个函数而不是运算符 )。

基本用法:

• 对于字符串, typeof返回"string"。
• 对于数字，typeof返回"number"。
• 对于布尔值，typeof返回"boolean"。
• 对于undefined，typeof返回"undefined"。

      // 检测字符串
      if (typeof name === "string") {
         anotherName = name.substring(3);
      }
      
      // 检测数字
      if (typeof count === "number") {
         updateCount(count);
      }
      
      // 检测布尔值
      if (typeof found === "boolean" && "found") {
         message("Found!");
      }
      
      // 检测undefined
      if (typeof MyApp === "undefined") {
         MyApp = {
            //其他的代码
         }
      }

 typeof运算符的独特之处在于，将其用于一个未声明的变量和值也不会报错，他们都将通过typeof返回"undefined"。

最后一个原始值：null。如果我们所期待的值真的是null，则可以和null进行比较：

      // 如果你真的需要检测null，则使用这种方法
      var element = document.getElementById("my-div");
      if (element !== null) {
         element.classname = "found";
      }

这里如果DOM元素不存在，则通过document.getElementById()得到的是值为null,这个方法要么返回一个节点，要么返回null。由于这时null是可预见的一种输出，则可以使用!==来检测返回结果。

运行typeof null 则返回"object", 这是一种低效的判断null的方法, 如果你需要检测null，则直接使用恒等运算符(===)或非恒等运算符(!==)。

8.2 检测引用值

引用值也称作对象(object)。JS中除了原始值之外的值都是引用。有这样几种内置的引用函数: Object、Array、Date和Error，数量不多。

typeof运算符在判断这些引用类型时显得力不从心，因为所有对象都返回"object"。

检测某个引用值的类型最好方法是使用instanceof运算符。instanceof的基本语法是:value instanceof constructor。

      // 检测日期
      if (value instanceof Date) {
        console.log(value.getFullYear());
      }
      
      // 检测正则表达式
      if (value instanceof RegExp) {
        if (value.test(anotherValue)) {
           console.log("Mathes");
        }
      }
      
      // 检测Error
      if (value instanceof Error) {
         throw value;
      }

instanceof的一个很有意思的特性是它不仅检测构造这个对象的构造器，还检测原型链。因为每个对象都继承自Object，因此每个对象的 value instanceof Object都返回true。

     var now = new Date();

     console.log(now instanceof Object); // true
     console.log(now instanceof Date); // true 

因为这个原因, instanceof 来判断对象是否属于某个特定类型的做法并非最佳。

接下来作者谈到 ：检测自定义类型最好的做法是使用instanceof运算符。也是唯一的办法:

    function Person(name) {
         this.name = name;
     }
    var me = new Person("Nicholas");
    console.log(me instanceof Object); // true
    console.log(me instanceof Person); // true

作者后来又补充了一个我没看懂的限制，在此先记下：

这有个严重的限制:假设一个浏览器帧(frame A) 里的一个对象被传入到另一个帧(frame B)中。俩个帧里都定义了构造函数Person。如果来自帧A的对象是帧A的Person的实例，则如下规则成立：

    // true
    frameAPersonInstance instanceof frameAPerson
    
    // false 
    frameAPersonInstance instanceof frameBPerson

因为每个帧(frame)都拥有Person的一份拷贝，它被认为是该帧中的Person的拷贝的实例，尽管俩个定义可能完全一样的。

在最后，作者说明这种问题也出现在其他俩个非常重要的内置类型：函数和数组。对于他们，一般用不着使用instanceof。

 8.2.1 检测函数

对于检测函数：最好的方法是使用typeof，因为它可以跨帧(frame)使用： 

     function myFunc() { }
     
     // 好的写法
     console.log(typeof myFunc === "function"); // true

作者又补充- -(这次是因为IE)：用typeof来检测函数有一个限制。在IE8和更早期的版本的IE浏览器中，用时typeof来检测DOM节点(比如document.getElementById())中的函数都返回"object"而不是"function"。

    // IE8及其更早版本的IE
    console.log(typeof document.getElementById);  // "object"
    console.log(typeof document.createElement);  // "object"
    console.log(typeof document.getElementsByTagName);  // "object"

这个问题是早期IE遗留的问题，开发者往往通过in运算符来检测DOM的方法：

     // 检测DOM方法
     if ("querySelectorAll" in document) {
         images = document.querySelectorAll("img");
     }

这段代码检查querySelectorAll是否定义在了document中，如果是，则是用这个方法。尽管不是最理想的的方法，如果想在IE8 及更早的浏览器中检测DOM方法是否存在，这是最安全的做法。在其他所有情形，typeof运算符是检测JavaScript函数的最佳选择。

8.2.2 检测数组

 ECMAScript5将Array.isArray()正式引入JavaScript。唯一的目的就是准确的检测一个值是否为数组。

适用于(IE9+、Safari5、Opera 10.5+和Chrome)都实现了Array.isArrary()方法。

 在此之前，有一个优雅的解决方案：

function isArray(value) {
       return Object.prototype.toString.call(value) === "[object Array]";
    }

将这俩方法合并，多数类库都类似的实现了这个方法：

 function isArray(value) {
       if (typeof Array.isArray === "function") {
          return Array.isArray(value);
       } else {
          return Object.prototype.toString.call(value) === "[object Array]";
       }
    }

8.3 检测属性

 判断属性的最好的方法是使用in运算符。in运算符仅仅会简单地判断属性是否存在，而不会去读属性的值。

之前第三章也说过：in运算符会遍历原型链。如果你只想遍历实例对象，用hasOwnProperty()

所有继承自Object的JavaScript对象都有这个方法。

作者补充到一个例外(又是IE。。醉)：在IE8和更早的版本中，DOM对象并非继承自Object,因此也不包含这个方法。所以，你在调用DOM对象的hasOwnProperty()方法之前应当先检测其是否存在(假如你已经知道对象不是DOM。这步可以省略)。

    // 对于所有非DOM对象来说，这是好的写法
    if (object.hasOwnProperty("realted")) {
        // 执行这里的代码
    }
   
    // 如果你不确定是否为DOM对象，则可以这样写
    if ("hasOwnProperty" in object && object.hasOwnProperty("related")) {
        // 执行这里的代码
    }