Как создать конструктор, который ведет себя как настоящий массив?

Question

Как я могу создать собственный конструктор массива, который является расширенной версией нативного конструктора Array?

jQuery, например, выглядит как массив с дополнительными методами, такими как $().addClass. Однако, это не изменило Array.prototype, потому что new Array().hasClass равно undefined.

Итак, как я могу создать реализацию расширенного массива, не изменяя Array.prototype?

Пример:

Employees( ... )          //-> [{name: 'John', age: 32}, {name: 'Bob', age: 29}];
Employees( ... ).byAge(32)//-> [{name: 'John', age: 32}];
// and
Array().byAge             //-> undefined

Answer 1

Объект jQuery не является массивом, и при этом он не «перезаписывает» класс массива. Это просто как массив .

Вы можете увидеть, как jQuery выполняет это, просматривая источник ; см. также Объекты, подобные массиву, в Javascript и Почему объекты, подобные массиву, используются в Javascript над собственными массивами .

Answer 2

jQuery не является истинной реализацией Array: jQuery instanceof Array ложно!

Если вы хотите создать настоящий экземпляр массива, и добавьте пользовательские методы, используйте этот код. Он использует Function.prototype.bind для вызова конструктора с произвольным числом параметров.

Реализация ведет себя точно как истинный массив, за исключением одной точки:

• Когда конструктор Array вызывается с одним аргументом, он создает массив с длиной этого аргумента.
• Поскольку эта функция часто является источником ошибок, я решил опустить ее в реализации. Вы все еще можете установить длину n , установив свойство length.

код: http://jsfiddle.net/G3DJH/

function Employees() {
    // Deal with missing "new"
    if (!(this instanceof Employees)) {
        // Convert arguments to an array, because we have to shift all index by 1
        var args = Array.prototype.slice.call(arguments);
        args.unshift(this); // Shift all indexes, set "this" 
        return new (Function.prototype.bind.apply(Employees, args));
    } else {
        // Set length property.
        var len = arguments.length,
            /*
             * fn_internalLength: Internal method for calculating the length
             **/
            fn_internalLength,
            /*
             * explicitLength: Deals with explicit length setter
             **/
            explicitLength = 0;

        // Setting all numeric keys
        while (len--) {
            this[len] = arguments[len];
        }

        // Internal method for defining lengths
        fn_internalLength = function() {
            var allKeys = Object.keys(this).sort(function(x, y) {
                // Sort list. Highest index on top.
                return y - x;
            }), i=-1, length = allKeys.length, tmpKey,
            foundLength = 0;

            // Loop through all keys
            while (++i < length && (tmpKey = allKeys[i]) >= 0) {
                // Is the key is an INTEGER?
                if (tmpKey - tmpKey === 0 && tmpKey % 1 === 0) {
                    foundLength = 1*tmpKey + 1;
                    break;
                }
            }
            // Return MAX(actual length, explictly set length)
            return foundLength > explicitLength ? foundLength : explicitLength;
        }.bind(this);

        // Define the magic length property
        Object.defineProperty(this, 'length',
        {
            get: fn_internalLength,
            set: function(newLength) {
                var length = fn_internalLength();
                if (newLength < length) {
                    for (var i=newLength; i<length; i++) {
                        delete this[i];
                    }
                }
                // Set explicit length
                explicitLength = newLength;
            },
            enumerable: false,
            configurable: false
        });
    }
}
Employees.prototype = new Array;


// Example: Custom method:
Employees.prototype.print = function() {
    return this.join('--'); // Using inherit Array.prototype.join
};

// Just like the Array, `new` is optional
console.log(new Employees(1,2).print());
console.log(Employees(1,2).print());

// Is the object an array?
console.log(new Employees() instanceof Array);    // True!
// Can't believe it?
console.log(new Employees() instanceof Employees); // True!

Answer 3

Как я могу создать собственный конструктор массива, который является расширенной версией собственного конструктора Array?

Как создать реализацию расширенного массива, не изменяя Array.prototype?

Используя дорогостоящие Object.setPrototypeOf, вы можете создать Объект , который наследует Массив , а поддерживает автоматическую длину меняется

function MyArray() {
    var arr = Array.apply(null, arguments); // Array never cares about the custom `this` :(
    Object.setPrototypeOf(arr, MyArray.prototype); // fix prototype chain
    // any futher custom modification of `arr` which isn't inherited goes here..
    return arr;
}
MyArray.prototype = Object.create(Array.prototype); // safe inherit from `Array.prototype`

// now using it, set a custom inherited method
MyArray.prototype.foo = function () {return 'bar';};
// construct
var x = MyArray(1, 2, 3); // [1, 2, 3]

// length starts normally
x.length; // 3

// length automatically increases
x[3] = 4;
x.length; // 4

// can use length to trim
x.length = 1;
x[1]; // undefined

// have custom inherited properties
x.foo(); // "bar"

// but have not modified normal Arrays
try {
    [].foo(); // throws a TypeError
} catch (e) {
    console.log(e); // TypeError [].foo (undefined) is not a function
}

// finally, have
x instanceof MyArray; // true
x instanceof Array; // true

Если автоматические свойства длины не важны для вас, вы можете обойтись без массивоподобных объектов . Они будут выглядеть как Array в Console , если они имеют length и splice , но length не будет автоматически изменяться при изменении объекта , поэтому вы не можете просто установить с помощью скобок и т. д.