JavaScript中除指定方式外，为数组添加方法的其他可行方式有哪些？

Great question! The method you shared adds a function directly to a single array instance, but there are several other practical approaches to add methods to arrays—whether you want all arrays to have them, or just specific groups/instances. Let’s walk through each one:

1. Modify the Array prototype (global method for all arrays) #

If you want every array in your codebase to access the new method, you can add it directly to Array.prototype. This makes the method available to every array instance automatically.

// Add a method to all arrays
Array.prototype.sayHello = function() {
  alert(`Hello from an array with ${this.length} elements!`);
};

// Use it on any array
const fruits = ["apple", "banana"];
fruits.sayHello(); // Pops up: "Hello from an array with 2 elements!"

const emptyArr = [];
emptyArr.sayHello(); // Pops up: "Hello from an array with 0 elements!"

A word of caution: Modifying native prototypes can cause conflicts with other libraries or future JavaScript features. To reduce this risk, you can use a Symbol as the method name (since symbols are unique):

const sayHelloSymbol = Symbol("sayHello");
Array.prototype[sayHelloSymbol] = function() {
  alert("Hello via unique symbol method!");
};

const arr = [1, 2, 3];
arr[sayHelloSymbol](); // Works without naming collisions

2. Create a custom Array subclass (ES6 Classes) #

If you don’t want to pollute the native Array prototype, create a subclass that inherits from Array and adds your custom methods. Only instances of this subclass will have access to the methods.

class EnhancedArray extends Array {
  // Custom method 1
  sayHello() {
    alert(`Hello from my custom array! Length: ${this.length}`);
  }

  // Custom method 2
  sum() {
    return this.reduce((total, num) => total + num, 0);
  }
}

// Use the subclass
const numbers = new EnhancedArray(1, 2, 3);
numbers.sayHello(); // Pops up the message
console.log(numbers.sum()); // Outputs 6

// Regular arrays won't have these methods
const regularArr = [4, 5, 6];
regularArr.sayHello(); // Throws an error

3. Use Object.assign to add multiple methods to a single instance #

If you want to add several methods to one specific array instance (instead of one-by-one like your original example), Object.assign is a clean way to do it:

const someArray = [];

// Assign multiple methods at once
Object.assign(someArray, {
  sayHello() {
    alert("Hello!");
  },
  logLength() {
    console.log(`This array has ${this.length} elements`);
  },
  doubleElements() {
    return this.map(item => item * 2);
  }
});

// Use the methods
someArray.sayHello();
someArray.logLength(); // Outputs "This array has 0 elements"
console.log(someArray.doubleElements([1,2,3])); // Outputs [2,4,6]

4. Wrap arrays in a utility object (no prototype/instance modification) #

For a completely isolated approach, you can create a wrapper object that holds the array and your custom methods. This way, the original array stays untouched, and methods are scoped to the wrapper.

function createArrayWithMethods(originalArray) {
  return {
    // Expose the original array if needed
    array: originalArray,
    // Custom methods
    sayHello() {
      alert("Hello from the wrapped array!");
    },
    getFirstItem() {
      return this.array[0] ?? "No items in array";
    }
  };
}

// Usage
const wrappedArr = createArrayWithMethods(["cat", "dog"]);
wrappedArr.sayHello();
console.log(wrappedArr.getFirstItem()); // Outputs "cat"

// The original array remains a plain array
const original = ["cat", "dog"];
original.sayHello(); // Throws an error

Each approach has its sweet spot: prototype modification is global but risky, subclasses are perfect for reusable custom array types, Object.assign is great for quick single-instance enhancements, and wrapping keeps things fully isolated.

内容的提问来源于stack exchange，提问作者Yves Ng