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

时间:2023-03-09 20:01:59
读《编写可维护的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")) {
// 执行这里的代码
}