Function.prototype.apply()

在此页

句法
描述
范例
规范
浏览器兼容性
另请参阅
相关话题

apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object ).

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

func.apply(thisArg, [ argsArray])

参数

thisArg
argsArray 可选

返回值

The result of calling the function with the specified this value and arguments.

描述

注意： While the syntax of this function is almost identical to that of call() , the fundamental difference is that call() accepts an argument list ，而 apply() accepts a single array of arguments .

注意： When the first argument is undefined or null a similar outcome can be achieved using the array spread syntax .

You can assign a different this object when calling an existing function. this refers to the current object (the calling object). With apply , you can write a method once, and then inherit it in another object, without having to rewrite the method for the new object.

apply is very similar to call() , except for the type of arguments it supports. You use an arguments array instead of a list of arguments (parameters). With apply , you can also use an array literal, for example, func .apply(this, ['eat', 'bananas']) , or an Array object, for example, func .apply(this, new Array('eat', 'bananas')) .

You can also use arguments 为 argsArray 参数。 arguments is a local variable of a function. It can be used for all unspecified arguments of the called object. Thus, you do not have to know the arguments of the called object when you use the apply method. You can use arguments to pass all the arguments to the called object. The called object is then responsible for handling the arguments.

Since ECMAScript 5 ^th Edition, you can also use any kind of object which is array-like. In practice, this means it's going to have a length property, and integer ("index") properties in the range (0..length - 1) . For example, you could use a NodeList , or a custom object like { 'length': 2, '0': 'eat', '1': 'bananas' } .

注意： Many older browsers—including Chrome <17 and Internet Explorer <9—don't accept array-like objects, and will throw an exception.

范例

Using apply to append an array to another

可以使用 push to append an element to an array. And, because push accepts a variable number of arguments, you can also push multiple elements at once.

But, if you pass an array to push , it will actually add that array as a single element, instead of adding the elements individually. So you end up with an array inside an array.

What if that is not what you want? concat does have the desired behaviour in this case, but it does not append to the existing array—it instead creates and returns a new array.

But you wanted to append to the existing array... So what now? Write a loop? Surely not?

apply to the rescue!

const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

Using apply and built-in functions

Clever usage of apply allows you to use built-in functions for some tasks that would probably have otherwise been written by looping over the array values.

As an example, here are Math.max / Math.min , used to find out the maximum/minimum value in an array.

// min/max number in an array
const numbers = [5, 6, 2, 3, 7];
// using Math.min/Math.max apply
let max = Math.max.apply(null, numbers);
// This about equal to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)
let min = Math.min.apply(null, numbers);
// vs. simple loop based algorithm
max = -Infinity, min = +Infinity;
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > max) {
    max = numbers[i];
  }
  if (numbers[i] < min) {
    min = numbers[i];
  }
}

But beware: by using apply this way, you run the risk of exceeding the JavaScript engine's argument length limit. The consequences of applying a function with too many arguments (that is, more than tens of thousands of arguments) varies across engines. (The JavaScriptCore engine has hard-coded argument limit of 65536 .

This is because the limit (and indeed, even the nature of any excessively-large-stack behavior) is unspecified. Some engines will throw an exception. More perniciously, others will arbitrarily limit the number of arguments actually passed to the applied function. To illustrate this latter case: if such an engine had a limit of four arguments (actual limits are of course significantly higher), it would be as if the arguments 5, 6, 2, 3 had been passed to apply in the examples above, rather than the full array.

If your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time:

function minOfArray(arr) {
  let min = Infinity;
  let QUANTUM = 32768;
  for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
    var submin = Math.min.apply(null,
                                arr.slice(i, Math.min(i+QUANTUM, len)));
    min = Math.min(submin, min);
  }
  return min;
}
let min = minOfArray([5, 6, 2, 3, 7]);

Using apply to chain constructors

可以使用 apply to chain constructors for an object (similar to Java).

In the following example we will create a global Function method called construct , which will enable you to use an array-like object with a constructor instead of an arguments list.

Function.prototype.construct = function(aArgs) {
  let oNew = Object.create(this.prototype);
  this.apply(oNew, aArgs);
  return oNew;
};

注意： Object.create() method used above is relatively new. For alternative methods, please consider one of the following approaches:

使用 Object.__proto__ :

Function.prototype.construct = function (aArgs) {
  let oNew = {};
  oNew.__proto__ = this.prototype;
  this.apply(oNew, aArgs);
  return oNew;
};

使用 closures :

Function.prototype.construct = function(aArgs) {
  let fConstructor = this, fNewConstr = function() {
    fConstructor.apply(this, aArgs);
  };
  fNewConstr.prototype = fConstructor.prototype;
  return new fNewConstr();
};

使用 Function 构造函数：

Function.prototype.construct = function (aArgs) {
  let fNewConstr = new Function("");
  fNewConstr.prototype = this.prototype;
  let oNew = new fNewConstr();
  this.apply(oNew, aArgs);
  return oNew;
};

用法范例：

function MyConstructor() {
  for (let nProp = 0; nProp < arguments.length; nProp++) {
    this['property' + nProp] = arguments[nProp];
  }
}
let myArray = [4, 'Hello world!', false];
let myInstance = MyConstructor.construct(myArray);
console.log(myInstance.property1);                // logs 'Hello world!'
console.log(myInstance instanceof MyConstructor); // logs 'true'
console.log(myInstance.constructor);              // logs 'MyConstructor'

注意： This non-native Function.construct method will not work with some native constructors; like Date , for example. In these cases you have to use the Function.prototype.bind 方法。

For example, imagine having an array like the following, to be used with Date 构造函数： [2012, 11, 4] ; in this case you have to write something like: new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))() .

This is not the best way to do things, and probably not to be used in any production environment.

规范

规范
ECMAScript (ECMA-262) The definition of 'Function.prototype.apply' in that specification.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile						Server
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet	Node.js
`apply`	Chrome 1	Edge 12	Firefox 1	IE 5.5	Opera 4	Safari 1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0	nodejs Yes
ES 5.1: generic array-like object as `arguments`	Chrome 17	Edge 12	Firefox 4	IE 9	Opera 5	Safari 6	WebView Android ≤37	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 6	Samsung Internet Android 1.0	nodejs Yes

在此页

句法

参数

返回值

描述

范例

Using apply to append an array to another

Using apply and built-in functions

Using apply to chain constructors

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题