javascript - 扩展常规对象以支持 ES5 数组功能的问题

Question

很久以前，我一直愿意让原生数组和常规对象之间的界限完全模糊，不仅扩展对象具有与数组在 ES5 中获得的相同功能，而且还与我自定义的方法包捆绑在一起。

一些聪明人考虑了这些范式变化。就像 Angus Croll 在文章中提到的 javascript-object-keys-finally :

"Moreover as the line between Arrays and regular Objects blurs (aided by custom getters and setters) we’re likely to see a growth in generic “array-like” objects which enjoy the best of both worlds – non-numeric identifiers and access to the rich API set defined by Array.prototype. EcmaScript 5 has apparently pre-empted this trend by introducing the generic method, defined by one type but useable by any."

一路上，他在文章中编码了一些东西: extending-objects-with-javascript-getters

function extendAsArray(obj) {
    if (obj.length === undefined || obj.__lookupGetter__('length')) {
        var index = 0;
        for (var prop in obj) {
            if(!obj.__lookupGetter__(prop)) {
                (function(thisIndex, thisProp) {
                    obj.__defineGetter__(thisIndex, function() {return obj[thisProp]});
                })(index, prop)
                index++;
            }
        };
        obj.__defineGetter__("length", function() {return index});
    }
    return obj;
}

var myObj = {
    left:50,
    top:20,
    width:10,
    height:10
}

extendAsArray(myObj);

[].map.call(myObj,function(s){return s+' px'}).join(', '); 
//"50px ,20px ,10px, 10px"

这种方法对我来说特别有趣。然而，它似乎也存在一些严重的问题!

1. 如何使用几个新属性扩展原始 myObj 模型？我们是否应该在每次属性更改时运行 extendAsArray 以更新它与 length 属性有关？

2. 当属性发生变化时，相关的不仅仅是length 属性；数组索引也应该更新，因为类似数组的属性请求肯定是未定义的。所以当

   console.log(myObj.length) -> 4
   myObj.zAxis=0
   

   然后

   console.log(myObj[4]) // -> undefined!
   console.log(myObj.length) // -> 4!
   

我已经相应地修改了 Angus 的代码，因此它支持根据要求自动更新 length 属性:

function extendAsArray(obj) {
    var index = 0;
    for(var prop in obj){
        if(!obj.__lookupGetter__(prop)){
           (function(thisIndex, thisProp){
              Object.defineProperty(obj, thisIndex, {
                    get: function(){return obj[thisProp]}
                    , enumerable: true
                    , configurable: true
                    , writeable: true
              });
           })(index, prop)
           index++;
        }
    }
    if(!obj.__lookupGetter__('length')){
       Object.defineProperty(obj, 'length', {
          get: function(){
            return extendAsArray(obj);
          }
          , configurable: true
          , writeable: true
       });
       return obj;
    }
    else{
       return index;
    }
}

问题是:当更改、添加或删除属性时，我们如何更新对象的数组索引及其 length 属性？

我应该使用 Object.watch 吗？

还有一个 Unresolved 问题:如何干扰我自己的未填充实用程序库，以一致的方式为对象制作它？

我对这两种类型使用相同的代码库:z.Object({}).mapEvery 与 z.Object([]).mapEvery 的作用相同>/p>

请避免提及 JQuery 和 Underscore。对于这两种类型，我都有一个全面的、自定义的方法列表，我愿意使用我的未填充方法可能完成的标准，我不愿意重构它!

Answer 1

我想这是你的问题:

how do we updating the object's array indices together with its length property when a property is changed, added or removed?

您创建方法来执行此操作，因此您基本上模仿了 Object internal methods .我不认为你可以用 getter 和 setter 来做到这一点，但我对此可能是错的。

剩下的更多的是评论而不是答案。

I have long ago been willing to get the line between native Arrays and regular Objects totally blurred

这条线已经完全模糊了。数组是对象，唯一使它们与众不同的是它们特殊的长度属性。

EcmaScript 5 has apparently pre-empted this trend by introducing the generic method,

ES5 没有引入泛型方法，它们至少从第 3 版开始就已经存在了。

defined by one type but useable by any

一点也不，事实上 ES5 限制更多。在第 3 版中，call 和 apply 使用 Object(*thisArg*) 将 thisArg 强制为一个对象，或者如果未传递任何内容，则替换全局对象。在 ES5 中不是这样，thisArg 未修改。

将数组用作对象的限制与约定有关，与语言本身无关。大多数开发人员在何时应该使用对象或数组之间看到了明显的区别。在极少数情况下，您确实需要像使用对象一样使用数组，但毫无疑问它们存在。 jQuery 是对象利用数组属性的示例，例如选择器收集的元素被添加为数字属性，并且有一个长度属性，它是元素的数量。这样通用数组方法就可以应用于 jQuery 对象(顺便说一下，所有这些都在第 3 版中)。

Object.watch 方法在 JavaScrpit™ 中，它不是 ES5 的一部分，因此请谨慎使用。

创建自己版本的内置对象的一个​​主要问题是，您可能最终将每个内置方法包装在 native 方法中(就像 jQuery 几乎包装每个 DOM 方法一样)并开始设置 getter 和 setter在每个属性上，或者以函数调用结束以替换属性访问(例如 jQuery 的 val、attr 和 prop 方法)。如果性能很重要，则相当乏味且缓慢。

哦，抱歉，我提到了 jQuery……:-(

设计一个库或框架以充分利用该语言的特性似乎更明智，而不是试图强制它做它做不好或 native 做不到的事情.

但尝试满分。 :-)