如何在具有length屬性的javascript中創建自定義對象以及添加和刪除功能

Question

我想要將用單獨的js文件編寫的javascript中的對象類。

該對象類將稱為Pages 。

這個對象類的目的是讓我操作html5中的files屬性，該屬性完全是只讀的。

參見http://help.dottoro.com/ljslrhdh.php

我想要頁面中的以下屬性/功能

• Pages.length：是只讀屬性。
• Pages.add（ key ， value ）：是一個函數，將像關聯數組一樣進行添加
• Pages.getByKey（ key ）：是一個函數，它將返回與鍵關聯的值
• Pages.getByIndex（ index ）：是一個函數，它將返回與索引關聯的值
• Pages.removeAll（）：是一個將刪除所有鍵值對的函數，因此長度為零。
• Pages.removeByKey（ key ）：是一個將刪除對應的鍵值對的函數
• Pages.removeByIndex（ index ）：是一個將刪除對應的鍵值對的函數
• 構造函數
• Pages.createFrom（ files ）：返回一個Pages對象的實例，該實例將根據上述鏈接中所述的files對象自動創建。
• Pages.indexExists（ index ）：如果存在這樣的索引，則返回布爾值
• Pages.keyExists（ key ）：如果有這樣的鍵值對，則返回bookean

最重要的特征是：

1. 每當我添加新的鍵值對時，它將被附加到Pages對象的末尾。
2. 可以使用.getByKey（ key ）或.getByIndex（ index ）例如，通過鍵訪問鍵值對，例如，可以通過索引0訪問第一個鍵值對。
3. 每當刪除或添加任何現有的鍵值對時， 就會更新length屬性，同時也會更新索引。 例如，如果有5個鍵值對，而我刪除了第二個鍵值對，則現在可以使用索引1來訪問第三個鍵值對，依此類推。

我不需要各種功能的代碼。

我只需要在javascript中創建上述自定義對象類的框架結構

我閱讀了JavaScript對象的Set length屬性，並認為我需要將其作為一個函數來執行。

但是隨后我看到了一些答案，提出了各種改進建議，例如關於使用Object.create的https://stackoverflow.com/a/6412732/80353和https://stackoverflow.com/a/6412869/80353

因此，我要求最好的模板 ，以便在需要時添加新功能。

Answer 1

這是我以前使用過的結構的准系統，我只在最新的瀏覽器上進行過測試-但是，它沒有使用任何會引起問題的技術。 唯一可能的爭用是使用Array制作對象原型。 但是我不明白為什么這在較舊的瀏覽器中不起作用：

<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>

從普通構造函數的角度來看，上述內容有些奇怪，因為它不斷地修改其原型，這意味着以下內容無法按預期工作：

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

從陣列擴展的優勢是相當明顯的，雖然你現在可以把a像任何陣列-所以你的一些工作是由核心JS代碼為你做。 但是，在實現使用鍵的系統時，最好覆蓋大多數常規數組操作，以便您可以正確跟蹤結構中正在使用的鍵。

無論如何希望它會有所幫助，我已經讓您解決了重新索引數組的一些棘手元素，因為使用上述設置方法應該很直接。

其他增強

關於將某些屬性設置為只讀，這僅在JavaScript 1.8+中才真正可能-因此它不會向后兼容舊版瀏覽器。 您可以使用Felix Kling的注釋中提到的Object.defineProperty(obj, prop, descriptor)來實現。 使用它，應該有可能影響.length東西並使它們變為只讀。 但是，編寫代碼的鎖定越多，靈活性和可擴展性就越差。