apply()
methodu ile verilen bir "this" değeri ve diziyi(ya da dizi benzeri bir nesneyi) kullanarak bağımsız değişkenlerle bir işlevi(function) çağırır.
Not: call() , apply() syntaxları sizin de dikkat ettiğiniz gibi aynıdır. farkları şudur: call() : bir argüman listesini argüman olarak alırken, apply() argümanlardan oluşmuş bir array'ı argüman olarak kabul alır.
Syntax
fun.apply(thisArg, [argsArray])
Parametreler
thisArg
- fun' ı çağırmak için atanan this in değeridir. Unutmayın, this,method tarafından görülen gerçek değer olmayabilir.: eğer methodnon-strict mode içindeki bir kod ise
null
veundefined
global object ile yer değiştirecek, ve ilk değerleri saklanacak. argsArray
-
Eğer fonkiyona hiç bir parametre verilmeyecekse dizi benzeri bir nesne (çağrılacak fun'ın argümanlarını belirler), veya
null
veyaundefined
. ECMAScript 5 ile, bu argümanlar dizi yerine eşdeğer dizi benzeri nesne olabilir. browser compatibility için aşağıya bakın.
Dönen değer
this
değeri ve argümanlar ile çağrılan fonksiyonun sonucu.
Açıklama
Varolan bir fonksiyonu çağırdığınızda farklı bir this objesi atayabilirsiniz. Burada this geçerli nesneyi (çağıran objeyi ) ifade eder. Apply ile bir kez yazılmış bir methodu başka bir objeden miras alarak aynı fonksiyonu tekrar yazmaktan kurtulmuş olursunuz.
apply
is very similar to call()
, except for the type of arguments it supports. You can use an arguments array instead of a named set of parameters. With apply
, you can use an array literal, for example, fun.apply(this, ['eat', 'bananas'])
, or an Array
object, for example, fun.apply(this, new Array('eat', 'bananas'))
.
You can also use arguments
for the argsArray
parameter. 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 5th Edition you can also use any kind of object which is array-like, so in practice this means it's going to have a property length
and integer properties in the range (0...length-1)
. As an example you can now use a NodeList
or a custom object like { 'length': 2, '0': 'eat', '1': 'bananas' }
.
Most browsers, including Chrome 14 and Internet Explorer 9, still do not accept array-like objects and will throw an exception.
Examples
Using apply
to chain constructors
You can use 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) {
var oNew = Object.create(this.prototype);
this.apply(oNew, aArgs);
return oNew;
};
Note: The Object.create()
method used above is relatively new. For an alternative method using closures, please consider the following alternative:
Function.prototype.construct = function(aArgs) {
var fConstructor = this, fNewConstr = function() {
fConstructor.apply(this, aArgs);
};
fNewConstr.prototype = fConstructor.prototype;
return new fNewConstr();
};
Example usage:
function MyConstructor() {
for (var nProp = 0; nProp < arguments.length; nProp++) {
this['property' + nProp] = arguments[nProp];
}
}
var myArray = [4, 'Hello world!', false];
var myInstance = MyConstructor.construct(myArray);
console.log(myInstance.property1); // logs 'Hello world!'
console.log(myInstance instanceof MyConstructor); // logs 'true'
console.log(myInstance.constructor); // logs 'MyConstructor'
Note: 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
method (for example, imagine having an array like the following, to be used with Date
constructor: [2012, 11, 4]
; in this case you have to write something like: new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()
— anyhow this is not the best way to do things and probably should not be used in any production environment).
Using apply
and built-in functions
Clever usage of apply
allows you to use built-ins functions for some tasks that otherwise probably would have been written by looping over the array values. As an example here we are going to use Math.max
/Math.min
to find out the maximum/minimum value in an array.
// min/max number in an array
var numbers = [5, 6, 2, 3, 7];
// using Math.min/Math.max apply
var max = Math.max.apply(null, numbers);
// This about equal to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)
var min = Math.min.apply(null, numbers);
// vs. simple loop based algorithm
max = -Infinity, min = +Infinity;
for (var i = 0; i < numbers.length; i++) {
if (numbers[i] > max) {
max = numbers[i];
}
if (numbers[i] < min) {
min = numbers[i];
}
}
But beware: in 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 (think more than tens of thousands of arguments) vary across engines (JavaScriptCore has hard-coded argument limit of 65536), because the limit (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) {
var min = Infinity;
var 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;
}
var min = minOfArray([5, 6, 2, 3, 7]);
Using apply in "monkey-patching"
Apply can be the best way to monkey-patch a built-in function of Firefox, or JS libraries. Given someobject.foo
function, you can modify the function in a somewhat hacky way, like so:
var originalfoo = someobject.foo;
someobject.foo = function() {
// Do stuff before calling function
console.log(arguments);
// Call the function as it would have been called normally:
originalfoo.apply(this, arguments);
// Run stuff after, here.
}
This method is especially handy where you want to debug events, or interface with something that has no API like the various .on([event]...
events, such as those usable on the Devtools Inspector).
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 3rd Edition (ECMA-262) | Standard | Initial definition. Implemented in JavaScript 1.3. |
ECMAScript 5.1 (ECMA-262) The definition of 'Function.prototype.apply' in that specification. |
Standard | |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Function.prototype.apply' in that specification. |
Standard | |
ECMAScript Latest Draft (ECMA-262) The definition of 'Function.prototype.apply' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
ES 5.1 generic array-like object as arguments |
(Yes) | 4.0 (2.0) | ? | ? | ? |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
ES 5.1 generic array-like object as arguments |
? | ? | 4.0 (2.0) | ? | ? | ? |