[Effective JavaScript 笔记]第58条:区分数组对象和类数组对象

示例

设想有两个不同类的API。
第一个是位向量:有序的位集合

var bits=new BitVector();
bits.enable(4);
bits.enable([1,3,8,17]);

bits.bitAt(4);//1
bits.bitAt(8);//1
bits.bitAt(9);//0

enable方法被重载了,可以传入一个索引或索引的数组。
第二个类的API是字符串集合:无序的字符串集合

var set=new StringSet();

set.add(‘Hamlet‘);
set.add([‘Rosencrantz‘,‘Guildenstern‘]);
set.add({‘Ophelia‘:1,‘Polonius‘:1,‘Horatio‘:1});

set.contains(‘Polonius‘);//true
set.contains(‘Guildenstern‘);//true
set.contains(‘Falstaff‘);//false

其中add方法被重载了,除了可以接收字符串和字符串数组外,还可以接收一个字典对象。

函数重载

为了实现BitVerctor.prototype.enable方法,可以通过测试其他情况来避免如何判断一个对象是否为数组的问题。

BitVector.prototype.enable=function(x){
    if(typeof x === ‘number‘){
        this.enableBit(x);
    }else{
        for(var i=0,n=x.length;i< n;i++){
            this.enableBit(x[i]);
        }
    }
};

这里只实现了索引及索引数组的判断,很容易实现。那StringSet.prototype.add方法怎么实现呢?这里需要区分数组和对象。在js中数组就是一个对象。这里真正想做的是分离数组对象和非数组对象。
这样的区分和js的灵活的类数组对象的概念是有争执的。任何对象都可被视为数组,只要它遵循正确的接口。而且也没有明确的方法来测试一个对象是否满足一个接口。可以尝试把具有length属性的对象视为数组,但这也会有错误出现,比如碰巧一个字典对象有length属性呢?

dimensions.add({
    ‘length‘:1,
    ‘height‘:1,
    ‘width‘:1
});

使用不精确的启发探索法来确定接口是一个容易被误解和滥用的方法。猜测一个对象是否实现了结构类型有时被称为鸭子测试,这是不好的实践。因为对象没有明确的信息标记来表示它们实现的结构类型,并没有可靠的编程方法来检测信息。

重载两种类型意味着必须有一种方法来区分这两种情况。不可能检测一个值是否实现了一种结构性的接口。
规则-API绝不应该重载与其他类型有重叠的类型

instanceof

对于StringSet,开始就不要使用结构性的类数组接口。相反,我们应当选择一种类型,这种类型具有明确的定义的“标签”,可以表明用户真想将其作为一个数组。一个显而易见但不完美的选择是使用instanceof操作符来测试一个对象是否继承自Array.prototype。

StringSet.prototype.add=function(x){
    if(typeof x === ‘string‘){
        this.addString(x);
    }else if(x instaceof Array){
        x.forEach(function(s){
            this.addString(s);
        },this);
    }
};

任何时候一个Array的实例,它的行为会像一个数组。但有时候,在一些可以允许多个全局对象的环境中,可能会有标准的Array构造函数和原型对象的多份副本。在浏览器中有这种情况,每个frame会有标准库的一份单独副本。当跨frame通信时,一个frame中的数组不会继承自另一个frame的Array.prototype。

Array.isArray

出于上面这种情况,ES5引入了Array.isArray函数,其用于测试一个值是否是数组,而不管原型继承。在ES标准中,该函数测试对象的内部[[Class]]属性值是否是Array。当需要测试一个对象是否是真数组,而不仅仅是类数组对象,Array.isArray方法比instanceof操作符更好。

StringSet.prototype.add=function(x){
    if(typeof x === ‘undefined‘){
        this.addString(x);
    }else if(Array.isArray(x)){
        x.forEach(function(s){
            this.addString(s);
        },this);
    }else{
        for(var key in x){
            this.addString(key);
        }
    }
};

Object.prototype.toString

在不支持ES5的环境中,可以使用标准的Object.prototype.toString方法测试一个对象是否为数组。

var toString=Object.prototype.toString;
functin isArray(x){
    return toString.call(x) === ‘[object Array]‘;
}

Object.prototype.toString函数使用对象内部的[[Class]]属性创建结果字符串,所以测试一个对象是否为数组时,它比instanceof操作符更准确。

注意:该版本的add方法存在不同的影响该API的使用者的行为。重载API的数组版本不接收随意的类数组对象。例如,你不能传入arguments对象并期待它视为数组。

function MyClass(){
    this.keys=new StringSet();
    //...
}
MyClass.prototype.update=function(){
    this.keys.add(arguments);
};

Array.prototype.slice

这里会把arguments作为字典来对待。可以把arguments对象转化为真正的数组。

MyClass.prototype.update=function(){
    this.keys.add([].slice.call(arguments));
};

当调用者传入多个参数时,会把它们转化为真正的数组,然后再使用add操作。当调用者想传递一个类数组对象给一个期望接收真正数组的API时,都需要做这种转换。可以在API的文档中标明各API接收哪些类型的参数。如上面的例子中,enable方法接收数字和类数组对象。add方法接收字符串、真数组和非数组对象。

提示

  • 绝不重载与其他类型有重叠的结构类型

  • 当重载一个结构类型与其他类型时,先测试其他类型
  • 当重载其他对象类型时,接收真数组而不是类数组对象
  • 文档标注你的API是否接收真数组或类数组
  • 使用ES5提供的Array.isArray方法测试真数组
时间: 2024-12-28 18:22:26

[Effective JavaScript 笔记]第58条:区分数组对象和类数组对象的相关文章

[Effective JavaScript 笔记]第48条:避免在枚举期间修改对象

注册列表示例 一个社交网络有一组成员,每个成员有一个存储其朋友信息的注册列表. function Member(name){ this.name=name; this.friends=[]; } var a=new Member('钟二'), b=new Member('张三'), c=new Member('赵四'), d=new Member('王五'), e=new Member('阮六'), f=new Member('耿七'); a.friends.push(b); b.friends

[Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+1}" 反射获取函数源代码的功能很强大,使用函数对象的toString方法有严重的局限性.toString方法的局限性ECMAScript标准对函数对象的toString方法的返回结果(即该字符串)并没有任何要求.这意味着不同的js引擎将产生不同的字符串,甚至产生的字符串与该函数并不相关. 如果函数

[Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式传递给eval函数以达到同样的功能.程序员面临一个选择:应该将代码表示为函数还是字符串?毫无疑问,应该将代码表示为函数.字符串表示代码不够灵活的一个重要原因是:它们不是闭包. 闭包回顾 看下面这个图 js的函数值包含了比调用它们时执行所需要的代码还要多的信息.而且js函数值还在内部存储它们可能会引用

[Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //"number" typeof "s";//"string" typeof null;//"object":ECMAScript把null描述为独特的类型,但返回值却是对象类型,有点困惑. 可以使用Object.prototype.t

[Effective JavaScript 笔记]第51条:在类数组对象上复用通用的数组方法

前面有几条都讲过关于Array.prototype的标准方法.这些标准方法被设计成其他对象可复用的方法,即使这些对象并没有继承Array. arguments对象 在22条中提到的函数arguments对象.它是一个类数组对象,并不是一个标准的数组,所以无法使用数组原型中的方法,因此无法使用arguments.forEach这样的形式来遍历每一个参数.这里我们必须使用call方法来对使用forEach方法. function highlight(){ [].forEach.call(argume

[Effective JavaScript 笔记]第50条:迭代方法优于循环

"懒"程序员才是好程序员.复制和粘贴样板代码,一但代码有错误,或代码功能修改,那么程序在修改的时候,程序员需要找到所有相同功能的代码一处处进行修改.这会使人重复发明轮子,而且在别人看代码的时候无法在更高层次都看待问题的解决方案.太容易陷入细节. for循环 js中的for循环在进行一些细微变化时,可以引入不同的行为.编程的时候对于边界条件的判断往往会导致一些简单的错误.下面的一些for循环的细微变化导致边界条件的变化. for(var i=0;i<=n;i++){...} //包

[Effective JavaScript 笔记]第47条:绝不要在Object.prototype中增加可枚举的属性

之前的几条都不断地重复着for...in循环,它便利好用,但又容易被原型污染.for...in循环最常见的用法是枚举字典中的元素.这里就是从侧面提出不要在共享的Object.prototype中增加可枚举的属性.这就导致,我们在开发的时候,不能在Object.prototype中添加有用的方法.如,我们想增加一个产生对象属性名数组的allKeys方法将会怎么样? Object.prototype.allKeys=function(){ var res=[]; for(var key in thi

[Effective JavaScript 笔记]第37条:认识到this变量的隐式绑定问题

CSVReader示例 需求 CSV(逗号分隔型取值)文件格式是一种表格数据的简单文本表示 张三,1982,北京,中国 小森,1982,东京,日本 吉姆,1958,纽约,美国 现需要编写一个简单的.可定制的读取CSV数据的类.这里的分隔符是基于逗号的,但也可以处理一些其它字符作为分隔符. 分析 构造函数需要一个可选的分隔器字符数组并构造出一个自定义的正则表达式以将每一行分成不同的条目. function CSVReader(separators){ this.separators=separat

[Effective JavaScript 笔记]第23条:永远不要修改arguments对象

arguments对象并不是标准的Array类型的实例.arguments对象不能直接调用Array方法. arguments对象的救星call方法 使得arguments可以品尝到数组方法的美味,知道可以吃,下面就是怎么吃的问题了.不管怎么吃,先吃一口试试. function callMethod(obj,method){ var shift=[].shift; shift.call(arguments); shift.call(arguments); return obj[method].a