如何在具有length属性的javascript中创建自定义对象以及添加和删除功能

Question

I want an object class in javascript that will be written in a separate js file.

This object class will be called Pages .

the purpose of this object class is for me to manipulate the files property in html5 which is purely read-only.

See http://help.dottoro.com/ljslrhdh.php

I want the following properties/functions in Pages

• Pages.length : is a read-only property.
• Pages.add( key , value ) : is a function that will do an add like an associative array
• Pages.getByKey( key ) : is a function that will return the value associated with the key
• Pages.getByIndex( index ) : is a function that will return the value associated with the index
• Pages.removeAll() : is a function that will remove all the key-value pairs and therefore the length will be zero.
• Pages.removeByKey( key ) : is a function that will remove the corresponding key-value pair
• Pages.removeByIndex( index ) : is a function that will remove the corresponding key-value pair
• a constructor
• Pages.createFrom( files ) : returns an instance of Pages object that will automatically create based on the files object as stated in the link above.
• Pages.indexExists( index ) : returns boolean if there is such an index
• Pages.keyExists( key ) : returns bookean if there is such a key-value pair

The most important characteristics are that:

1. whenever I add new key-value pair, it will be appended to the end of the Pages object.
2. the key-value pair can be accessed by either the key using .getByKey( key ) or the .getByIndex( index ) Eg, the first key-value pair can be accessed by index 0.
3. whenever any existing key-value pair is removed or added, the length property is updated AND the indices are updated as well. Eg, if there are 5 key-value pairs and I remove the 2nd one, the 3rd key-value pair now can be accessed using the index 1 and so on.

I do not need code for the various functions.

I just need a skeleton structure of creating the above custom object class in javascript

I read Set length property of JavaScript object and thought I need to do it as a function.

But then I saw some answers suggesting various improvements like this https://stackoverflow.com/a/6412732/80353 and https://stackoverflow.com/a/6412869/80353 about using Object.create

so I am asking for the best template going forward, so that I can add new functions when needed.

Answer 1

Here is the barebones of a structure I have used before, I have only tested this on the latest browsers - however it isn't using any techniques that should cause a problem. The only possible contention would be prototyping an object with an Array. But I don't see why this wouldn't work in older browsers:

<script>
  "use strict";

  var ArrayLike = (function(){
    /// create a static reference to our constructor so that we can
    /// add methods to ArrayLike... if we like.
    var _static = function(){
      /// store some "private" values, and arrayify our arguments
      var _args = Array.prototype.slice.call( arguments ),
          _private = { byKey:{}, byIndex:{} }, 
          _public = this;
      /// make sure the user used the 'new' keyword.
      if ( _public instanceof _static ) {
        /// if we have arguments then push them onto ourselves
        if ( _args.length ) {
          _public.splice.apply(_public,[0,0].concat(_args));
        }
        /// Now that a new instance has been created, switch in an array 
        /// prototype ready for the next instance.
        _static.prototype = new Array();
        /// start adding our methods, bare in mind if you wish to
        /// stop any of the native array methods from working you'll 
        /// have to override them here.
        _public.add = function( key, value ){
          /// store the keys and indexes as references to themselves.
          _private.byKey[key] = _public.length;
          _private.byIndex[_public.length] = key;
          /// use the inherited push function from the array.
          _public.push( value );
        }
        /// an example function to show how get by key would work.
        _public.getByKey = function(key){
          if ( (key = _private.byKey[key]) || key === 0 ) {
            return _public[key] ? _public[key] : null;
          }
        }
        /// easy removeAll thanks to the array prototype.
        _public.removeAll = function(){
          _public.length = 0;
        }
        /// here I leave you to flesh out the methods that you 'want'.
        _public.removeByKey = function(){

        }
        /// I'll give you a clue that keeping your array index in order
        /// is going to be a manual process, so whenever you delete you
        /// will have to reindex.
        _private.reIndex = function(){

        }
      }
    }
    /// set-up the prototype as an array ready for creation
    _static.prototype = new Array();
    /// return the function that will be our constructor
    return _static;
  })();

</script>

The above is a bit odd from the point of view of a normal constructor, because it is constantly modifying it's prototype, this means the following doesn't work as expected:

var a = new ArrayLike(1,2,3);
alert( a instanceof ArrayLike ); /// alerts FALSE

The benefits of extending from an Array are quite obvious though as you can now treat a like any array - so some of your work is done for you by core JS code. As you are implementing a system that uses keys however, it may be best to override most of the normal array operations so that you can keep a proper track of the keys that are in use in within the structure.

Anyway hope it helps, I've left you to work out the slightly tricky elements of reindexing the array as it should be straight forward with the way the above is setup.

Other enhancements

With regards to setting certain properties to read-only, this is only truly possible in JavaScript 1.8+ - so it wont be backwards compatible to older browsers. You can achieve this using Object.defineProperty(obj, prop, descriptor) as mentioned in Felix Kling's comment. Using this it should be possible to affect things like .length and make them read-only. However, the more locked down you make your code, the less flexible and extensible it will be.