<<编写可维护的javascript>> 笔记8(避免'空比较&#

摘要：中常常会看到这种代码变量与的比较这种用法很有问题用来判断变量是否被赋予了一个合理的值比如不好的写法执行一些逻辑这段代码中方法显然是希望是一个数组因为我们看到的拥有和这段代码的意图非常明显如果参数不是一个数组则停止接下来的操作这种写法的问题在

js中, 常常会看到这种代码: 变量与null的比较(这种用法很有问题), 用来判断变量是否被赋予了一个合理的值. 比如:

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

这段代码中, process()方法显然是希望items是一个数组, 因为我们看到的items拥有sort()和forEach(). 这段代码的意图非常明显: 如果参数items不是一个数组, 则停止接下来的操作. 这种写法的问题在于, 和null的比较不能真正的避免错误的发生. items的值可以是1, 也可以是字符串, 还可以是对象. 这些值都和null不相等, 进而导致process()方法一旦执行到sort()时就会报错.
仅仅和null比较并不能提供足够的信息来判断后续代码的执行是否真的安全. 好在js为我们提供了多种方法来检测变量的真实值.

8.1 检测原始值
typeof的基本语法是:

typeof variable; // 推荐写法

// 或者
typeof(variable);

使用typeof来检测这四种原值类型是非常安全的做法. 例子:

// 检测字符串
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运算符的独特之处在于, 将其用于一个为声明的变量也不会报错. 未定义的变量和值为undefined 的变量和值为undefined的变量通过typeof 都将返回"undefined".

最后一个原始值, null, 一般不应用于检测语句. 正如上文提到的, 简单地和null 比较通畅不会包含足够的信息以判断值得类型是否合法. 但有一个例外, 如果所期望的值真的是null, 则可以直接和null进行比较. 这时应当使用===或者!==来和null进行比较, 比如:

// 如果你需要检测null, 则使用这种方法
const ele = document.getElementById("my-div");
if(ele !== null) {
    ele.className = "found";
}

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

特别注意这里所说的typeof null => "object", 是因为null是一个空指针对象, 所以在定义变量时如果这个变量将来时对象时, 则定义为null. 在编程时杜绝使用typeof来检测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. 比如:

const now = new Date();

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

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

instanceof运算符也可以检测自定义的类型, 比如:

function Person(name) {
    this.name = name;
}

const me = new Person("Nicholas");

console.log(me instanceof Object); // true
console.log(meinstanceof Person); // true

这段示例代码中创建了Person类型. 变量me是Person的实例, 因此me instanceof Person 是true. 上文也提到, 所有的对象都被认为是Oject的实例, 因此me instanceof Object也是true.

在js中检测自定义类型时, 最好的做法就是使用instanceof运算符, 这也是唯一的方法. 同样对于内置js的类型也是如此. 但是有一个严重的限制.

假设一个浏览器帧(frame A)里的一个对象被传入到另一个帧(frame B)中. 两个帧都定义了构造函数Person. 如果帧A的对象是帧A的Person的实例, 则如果规则成立.

// true
frameAPersonInstance instanceof frameAPerson

// false
frameAPersonInstance instanceof frameBPerson

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

这个问题不仅出现在自定义类型身上, 其他两个非常重要的内置类型也有这个问题: 函数和数组. 对于这两个类型来说, 一般用不着使用instanceof.

8.2.1 检测函数
从技术上讲, js中的函数是引用类型, 同样存在Function构造函数, 每个函数都是其 实例, 比如:

function maFunc() {
    
    // 不好的写法
    console.log(myFunc instanceof Function); // true
}

然而, 这个方法亦不能跨帧(frame)使用, 因为每个帧都有各自的Function构造函数. 好在typeof运算符也是可以用于函数的, 返回"function".

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

检测函数最好的方法是使用typeof, 因为它可以跨帧(frame)使用.

用typeof来检测函数有一个限制. 在IE浏览器中, 使用typeof来检测DOM节点(比如 document.getElementById() 中的函数都返回"object"而不是"function").

之所以出现这种怪异现象是因为浏览器对DOM的实现有差异. 简言之, 这些早版本的IE并没有将DOM实现内置的js方法, 导致内置的typeof运算符将这些函数识别为对象. 因为DOM是有明确定义的, 了解到对象成员如果存在则意味着它是一个方法, 开发者往往通过in运算符来检测DOM的方法, 比如:

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

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

8.2.2 检测数组
js中最古老的的跨域问题之一就是在帧(frame)之间来回传递数组. 开发者很快发现instanceof Array在此场景中不总是返回正确的结果. 正如上文提到的, 每个帧(frame)都有各自的Array构造函数, 因此一个帧(frame)中的实例在另一个帧里不会识别. Douglas Crockford首先使用"鸭式辩型"(duck typing) 来检测器sort()方法是否存在.

// 采用鸭式辩型的方法检测数组
function isArray(value) {
    return typeof value.sort === "function";
}

这种检测方法依赖一个事实, 即数组是唯一包含sort()方法的对象, 它也会返回true.

关于如何在js中检测数组类型已经有很多研究了, 最终, Juriy Zaytsev(也被称作Kangax)给出一种优雅的解决方案.

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

Kangax发现调用某个值的内置toString()方法在所有浏览器中都会返回标准的字符串结果. 对于数组来说, 返回字符串为"[object Array]", 也不用考虑数组实例是在哪个帧(frame)中被构造出来的. Kangax给出的解决方案很快流行起来, 并被大多数js类库所采纳.

这种方法在识别内置对象时往往十分有用, 但对于自定义对象请不要用这种方法. 比如内置JSON对象使用这种方法将返回"[object JSON]".

从那时起, ECMAScript5将Array.isArray()正式引入js. 唯一的目的就是准确的检测一个值是否为数组. 同Kangax的函数一样, Array.isArray()也可以检测跨帧(frame)传递的值, 因此很多js类库目前都类似的实现了这个方法.

8.3 检测属性
另外一种用到null(以及undefined)的场景是当检测一个属性是否在对象中存在时, 比如:

// 不好的写法: 检测假值
if(object[propertyName]) {
    // 一些代码
}

// 不好的写法: 和null相比较
if(object[propertyName] != null) {
    // 一些代码
}

// 不好的写法: 和undefined比较
if(object[propertyName] != undefined) {
    // 一些代码
}

上面这段代码里的每个判断, 实际上是通过给定的名字来检查属性的值, 而非判断给定的名字所指的属性是否存在, 因为当属性值为假值(falsy value)时结果会出错, 比如0, "", false, null和undefined. 毕竟这些都是属性的合法值. 比如, 如果属性记录了一个数字, 则这个值可以是零, 这样的话, 上段代码中的第一个判断就会导致错误. 以此类推, 如果属性值为null或者undefined时, 三个判断都会导致错误.

判断属性是否存在的最好的方法是使用in运算符. in运算符仅仅会简单的判断属性是否存在, 而不会去读属性的值, 这样就可以避免出现本小节提到的有歧义的语句. 如果实例对象的属性存在、或者继承自对象的原型, in运算符都会返回true. 比如:

const obj = {
    count: 0,
    related: null
};

// 好的写法
if("count" in obj) {
    // do something
}

// 不好的写法: 检测假值
if(obj["count"]) {
    // 这里的代码不会执行
}

// 好的写法
if("related" in object) {
    // 这里的代码会执行
}

// 不好的写法: 检测是否为null
if(object["related"] != null) {
    // 这里的代码不会执行
}

如果你只是想检查实例对象的某个属性是否存在, 则使用hasOwnProperty()方法. 所有继承自Object的js对象都有这个方法, 如果实例中存在这个属性则返回ture(如果这个属性只存在于原型里, 则返回false). 需要注意的是, 在IE8以及更早版本的IE中, DOM对象并非继承自Object, 因此也不包含这个方法. 也就是说, 你再调用DOM对象的hasOwnProperty()方法之前应当检测其是否存在(加入你已经知道对象不是DOM, 则可以省略这一步).

// 对于所有非DOM对象来说, 这是好的写法
if(object.hasOwnProperty("related")) {
    // do something
}

// 如果你不确定是否为DOM对象, 则这样来写
if("hasOwnProperty" in object && object.hasOwnProperty("related")) {
    // do something
}

因为存在IE8以及更早版本的IE的情形, 在判断实例对象是否存在时, 我更倾向于使用in运算符, 只有在需要判断实例属性时才会用到hasOwnProperty().

不管你什么时候需要检测属性的存在性, 请使用in运算符或者hasOwnProperty().