编程笔记：JavaScript 中的类型检查

在Badoo的时候我们写了大量的JS脚本，光是在我们的移动web客户端上面就有大概60000行，可想而知，维护这么多JS可是相当具有挑战性的。在写如上规模js脚本客户端应用的时候我们必须对一件事保持警惕，就是避免异常的发生。在本篇文章里面，我想谈谈一部分类型检查异常，这时候你或许很难碰到 - 一个TypeError

 　　在MDN链接里面是这么解释的：

"当传递给操作符或者函数的操作符或者参数与操作符或者函数本身所期望的操作符或函数类型不兼容的时候就会抛出一个TypeError" -MDN

　　所以，想要避免有TypeError抛出，我们不仅需要检测下传递给函数的值是否正确，还要在在某操作数上使用操作符之前检查所写的任何有关验证这个操作数的代码。比如，某个操作符不能检测null或undefined，而instanceof又不能检测非函数的参数，在这种情况下把这些操作符使用到某操作数肯定会因为不兼容而抛出TypeError。如果你学过类似Java这样的静态类型编程语言就会发现Javascript在这上面极度的敏感，使得你可能会有去使用Dart 或 TypeScript 的“超集Javascript”语言的冲动。如果你已经习惯了写JavaScript或者说JavaScript的编程基础蛮好，你所需要做的就是不要灰心。因为加上类型检测功能并很复杂，更何况可以帮助那些想读懂你代码的人

　　那下面就以一个很直接的实例开始解说吧。这个例子主要是从服务器上获取数据，然后在数据上使用操作符后渲染出HTML代码。

Api.get('/conversations', function (conversations) {
  
    var intros = conversations.map(function (c) {
        var name = c.theirName;
        var mostRecent = c.messages[0].text.substring(0, 30); 
        return name + ': ' + mostRecent;
    });
  
    App.renderMessages(intros);
  
});

 

 

　　乍眼看这代码时，我们会发现不能确定里面的conversations该是什么类型的数据。既然代码里面有一个很明显需要传一个数组为变量的数据地图函数，那我们还是可以假定下它的类型，不过这种假定类型还不一定是合理的，因为实际上它可以代表任何能实现一个数据地图函数功能的类型。传给数据地图的函数可以给c变量生成许多种假定的类型。如果这些假定类型是错误的，那么就会抛出一个TypeError错误，这样一来，导致renderMessages()函数永远都不可能被调用。

　　那么，在本实例中，我们怎么去检测验证类型呢？嗯，首先我们来看下Javascript中各种验证数据类型的函数吧。

　　typeof

　　typeof 运算符返回一个字符串来表明这个运算对象的类型。但是它返回的类型非常有限，例如以下所返回的全部为 "object"

typeof {};
typeof [];
typeof null;
typeof document.createElement('div'); 
typeof /abcd/;

 

　　instanceof

　　instanceof 运算符是用来确定一个对象的原型链包含原型属性的一个构造函数。

[] instanceof Array; // true
  
var Foo = function () {};
new Foo() instanceof Foo; // true

 

　　这样使用instanceof去检查一个 native 对象不是一个好主意，因为它并不适用与原始事物的值.

'a' instanceof String; // false
5 instanceof Number; // false
true instanceof Boolean; //false

 

　　Object.prototype.toString

　　这个方法在各大JS框架中经常被用于推断数据类型，也正是因为这个方法的使用规范非常简明，它普遍适用于各大浏览器。在 15.2.4.2 这个版本的 ECMA-262 规范中，toString方法是这样定义的:

  • 如果参数是未定义的值，则返回"[object Undefined]".
  • 如果参数为null，则返回"[object Null]".
  • 如果适用ToObject函数传递参数，则返回对象.
  • 如果参数为类，则返回包含对象的类.（Let class be the value of the [[Class]] internal property of O.）
  • 返回一个由"[对象", 类, 和"]"拼接而成的字符串.

　　因此，这个方法永远会以 “[Foo 对象]”的方式返回一个字符串，这个Foo有可能是 “空”或是“未定义”又或者是一个用来创建此字符串的类。 使用这个方法将转化一个普通的值、或是一个表达式为任何我们想要的结果，而且这个结果将以字符串的形式呈现。

var type = function (o) {
    var s = Object.prototype.toString.call(o);
    return s.match(/\[object (.*?)\]/)[1].toLowerCase(); 
}
  
type({}); // "object"
type([]); // "array"
type(5); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcd/); // "regex"
type(new Date()); // "date"

 

　　这就是要解决的问题，对吗？很不幸的这还不是。仍然有一些实例中的这个方法能够返回一些不是我们预期的值。

type(NaN); // "number"
type(document.body); // "htmlbodyelement"

 

　　这两个例子返回的值也许并不是我们所预想的那样。在例子NaN中，返回“number”是因为技术上NaN是一种数字类型，虽然几乎我们知道的所有的例子中，如果一个“东西”是数字，就不是非数字。被用来实现<body>元素的内部类是HTMLBodyElement（至少在谷歌和火狐浏览器中如此），每一个元素都有各自的指定类。在大多数应用场景中，我们只想知道如果一个“东西”是否是一个元素，如果我们关心元素的标签名，我们可以使用tagNameproperty来获取。然而，我们能够修改我们现有的方法来处理这些事情。

var type = function (o) {
  
    // handle null in old IE
    if (o === null) {
        return 'null';
    }
  
    // handle DOM elements
    if (o && (o.nodeType === 1 || o.nodeType === 9)) {
        return 'element';
    }
  
    var s = Object.prototype.toString.call(o);
    var type = s.match(/\[object (.*?)\]/)[1].toLowerCase(); 
  
    // handle NaN and Infinity
    if (type === 'number') {
        if (isNaN(o)) {
            return 'nan';
        }
        if (!isFinite(o)) {
            return 'infinity';
        }
    }
  
    return type;
}

 

　　现在我们有一个可以对任何我们感兴趣的返回正确类型的方法，我们可以改进原来的例子以确保我们没有任何类型错误。

Api.get('/conversations', function (conversations) {
  
    // 大家读到这里就知道conversation应该是个数组
    if (type(conversations) !== 'array') {
        App.renderMessages([]);
        return;
    }
  
    var intros = conversations.map(function (c) {
  
        if (type(c) !== 'object') {
            return '';
        }
  
        var name = type(c.theirName) === 'string' ? c.theirName : ''; 
        var mostRecent = '';
  
        if (type(c.messages) === 'array' &&
            type(c.messages[0]) === 'object' &&
            type(c.messages[0].text) === 'string') {
            mostRecent = c.messages[0].text.substring(0, 30);
        }
  
        return name + ': ' + mostRecent;
    });
  
    //在这里可以做的更多
    App.renderMessages(intros);
});

 

　　很明显的事实是我们不得不添加更多的代码来阻止出现类型错误的风险，但Badoo只是让我们添加很少的JavaScript代码，这意味着我们的应用更加稳定。最后，很明显type方法每一次检测的时候都要和字串做比较。这很好改进。我们可以构建和Underscore/LoDash/jQuery类似的API：

['Null',
 'Undefined',
 'Object',
 'Array',
 'String',
 'Number',
 'Boolean',
 'Function',
 'RegExp',
 'Element',
 'NaN',
 'Infinite'
].forEach(function (t) {
    type['is' + t] = function (o) {
        return type(o) === t.toLowerCase();
    };
});
  
// examples:
type.isObject({}); // true
type.isNumber(NaN); // false
type.isElement(document.createElement('div')); // true 
type.isRegExp(/abc/); // true

 

　　这也是我们在移动网络应用中类型检测的JavaScript方法，而且我们发现这些代码很简单而且不容易出错。在gist里可以看到type方法的介绍。

posted @ 2014-01-27 15:35  Ranran  阅读(1003)  评论(0)  编辑  收藏  举报