이들전화하다그리고 신청하다의 차이점은 무엇인가요?

질문자 :John Duff

call 과 apply 을 사용하여 함수를 호출하는 것의 차이점은 무엇입니까?

 var func = function() { alert('hello!'); };

func.apply(); 대 func.call();

앞서 언급한 두 가지 방법 간에 성능 차이가 있습니까? call 오버 apply 을 사용하는 것이 가장 좋은 경우와 그 반대의 경우도 마찬가지입니다.

apply arguments 를 배열로 사용하여 함수를 호출할 수 있다는 것입니다. call 에는 매개변수가 명시적으로 나열되어야 합니다. 유용한 니모닉은 "C OMMA에 대한 rray와 C에 대한"입니다.

적용 및 호출 에 대한 MDN 문서를 참조하십시오.

의사 구문:

theFunction.apply(valueForThis, arrayOfArgs)

theFunction.call(valueForThis, arg1, arg2, ...)

call 함수와 함께 사용하기 위해 배열 spread 할 수 있는 가능성이 있습니다 . 여기에서 호환성을 볼 수 있습니다.

샘플 코드:

 function theFunction(name, profession) { console.log("My name is " + name + " and I am a " + profession +"."); } theFunction("John", "fireman"); theFunction.apply(undefined, ["Susan", "school teacher"]); theFunction.call(undefined, "Claude", "mathematician"); theFunction.call(undefined, ...["Matthew", "physicist"]); // used with the spread operator

flatline

K. Scott Allen은 이 문제에 대해 좋은 글을 남겼습니다.

기본적으로 함수 인수를 처리하는 방법이 다릅니다.

apply() 메서드는 두 번째 매개 변수로 배열이 필요하다는 점을 제외하고는 call()과 동일합니다. 배열은 대상 메서드에 대한 인수를 나타냅니다."

그래서:

 // assuming you have f function f(message) { ... } f.call(receiver, "test"); f.apply(receiver, ["test"]);

notnoop

각 기능을 사용하는 경우에 대한 부분에 대답하기 위해, 사용은 apply 당신이 전달됩니다 인수의 수를 모르는 경우, 또는 배열 또는 배열과 같은 객체 (등 이미있는 경우 arguments 자체를 전달하는 객체 배열에 인수를 래핑할 필요가 없기 때문에 그렇지 않으면 call 사용하십시오.

 f.call(thisObject, a, b, c); // Fixed number of arguments f.apply(thisObject, arguments); // Forward this function's arguments var args = []; while (...) { args.push(some_value()); } f.apply(thisObject, args); // Unknown number of arguments

귀하의 예와 같이 인수를 전달하지 않을 때 함수를 호출 하기 때문에 call apply 은 (존재하지 않는) 인수에 함수를 적용 하고 있음을 의미합니다.

사용 어쩌면 경우를 제외하고, 어떤 성능 차이가 안 apply (및 배열에 인수를 마무리 예를 들어 f.apply(thisObject, [a, b, c]) 대신 f.call(thisObject, a, b, c) ). 나는 그것을 테스트하지 않았으므로 차이가 있을 수 있지만 매우 브라우저에 따라 다릅니다. 배열에 인수가 아직 없으면 call apply 이 더 빠릅니다.

Matthew Crumley

여기 좋은 니모닉이 있습니다. pply는 rrays을 사용하고의 법이지는 하나 개 또는 두 개의 인수를 사용합니다. 당신은 C를 사용할 때 C에있는 모든 인수의 수를 ount.

Joe

이것은 오래된 주제이지만 .call이 .apply보다 약간 빠르다는 점을 지적하고 싶었습니다. 왜 그런지는 정확히 말씀드릴 수 없습니다.

jsPerf, http://jsperf.com/test-call-vs-apply/3 참조

---

[ UPDATE! ]

Douglas Crockford는 성능 차이를 설명하는 데 도움이 될 수 있는 둘의 차이점을 간략하게 언급합니다... http://youtu.be/ya4UHuXNygM?t=15m52s

Apply는 인수 배열을 사용하는 반면 Call은 0개 이상의 개별 매개변수를 사용합니다! 아하!

.apply(this, [...])

.call(this, param1, param2, param3, param4...)

kmatheny

Michael Bolin의 Closure: Definitive Guide 에서 발췌한 내용을 따릅니다. 다소 길어 보일 수 있지만 많은 통찰력으로 가득 차 있습니다. "부록 B. 자주 오해하는 JavaScript 개념"에서:

---

함수가 호출될 때 this

foo.bar.baz() 형식의 함수를 호출할 때 foo.bar 객체를 수신기라고 합니다. this 대한 값으로 사용되는 것은 수신기입니다.

 var obj = {}; obj.value = 10; /** @param {...number} additionalValues */ obj.addValues = function(additionalValues) { for (var i = 0; i < arguments.length; i++) { this.value += arguments[i]; } return this.value; }; // Evaluates to 30 because obj is used as the value for 'this' when // obj.addValues() is called, so obj.value becomes 10 + 20. obj.addValues(20);

함수가 호출될 때 명시적 수신자가 없으면 전역 객체가 수신자가 됩니다. 47페이지의 "goog.global"에서 설명한 것처럼 window는 웹 브라우저에서 JavaScript를 실행할 때 전역 개체입니다. 이로 인해 몇 가지 놀라운 동작이 발생합니다.

 var f = obj.addValues; // Evaluates to NaN because window is used as the value for 'this' when // f() is called. Because and window.value is undefined, adding a number to // it results in NaN. f(20); // This also has the unintentional side effect of adding a value to window: alert(window.value); // Alerts NaN

obj.addValues 와 f 는 같은 함수를 참조하더라도 각 호출에서 수신자의 값이 다르기 때문에 호출될 때 다르게 동작합니다. 을 참조하는 함수를 호출 할 때 이러한 이유로, this ,는 것이 중요합니다 this 호출 될 때 올바른 값을 갖게됩니다. 분명히 하자면, this 함수 본문에서 참조되지 않은 f(20) 및 obj.addValues(20) 의 동작은 동일할 것입니다.

함수는 JavaScript의 일급 객체이기 때문에 고유한 메서드를 가질 수 있습니다. 모든 함수에는 함수를 this 참조하는 객체)를 재정의할 수 있도록 하는 call() 및 apply() 메서드가 있습니다. 메서드 서명은 다음과 같습니다.

 /** * @param {*=} receiver to substitute for 'this' * @param {...} parameters to use as arguments to the function */ Function.prototype.call; /** * @param {*=} receiver to substitute for 'this' * @param {Array} parameters to use as arguments to the function */ Function.prototype.apply;

참고 유일한 차이 call() 하고 apply() 하는 것이다 call() 있는 반면, 각각의 인자로서의 기능 파라미터를 수신한다 apply() 단일 어레이로 수신 :

 // When f is called with obj as its receiver, it behaves the same as calling // obj.addValues(). Both of the following increase obj.value by 60: f.call(obj, 10, 20, 30); f.apply(obj, [10, 20, 30]);

f 및 obj.addValues 가 동일한 함수를 참조하므로 다음 호출은 동일합니다.

 obj.addValues.call(obj, 10, 20, 30); obj.addValues.apply(obj, [10, 20, 30]);

그러나 call() 이나 apply() 는 지정되지 않은 경우 수신자 인수를 대체하기 위해 자체 수신자의 값을 사용하지 않기 때문에 다음은 작동하지 않습니다.

 // Both statements evaluate to NaN obj.addValues.call(undefined, 10, 20, 30); obj.addValues.apply(undefined, [10, 20, 30]);

this 값은 함수가 호출될 때 null 이거나 undefined 않을 수 없습니다. call() 또는 apply() 대한 수신자로 null 또는 undefined 가 제공되면 전역 객체가 대신 수신자에 대한 값으로 사용됩니다. 따라서 이전 코드는 전역 개체에 value 라는 속성을 추가하는 것과 동일한 바람직하지 않은 부작용이 있습니다.

함수가 할당된 변수에 대한 지식이 없는 것으로 생각하는 것이 도움이 될 수 있습니다. 이것은 정의될 때가 아니라 함수가 호출될 때 this 값이 바인딩된다는 아이디어를 강화하는 데 도움이 됩니다.

---

추출 끝.

Dominykas Mostauskis

한 객체가 다른 객체의 기능을 차용하는 것은 때때로 유용합니다. 즉, 차용한 객체는 빌려준 함수를 마치 자신의 것인 것처럼 실행합니다.

작은 코드 예:

 var friend = { car: false, lendCar: function ( canLend ){ this.car = canLend; } }; var me = { car: false, gotCar: function(){ return this.car === true; } }; console.log(me.gotCar()); // false friend.lendCar.call(me, true); console.log(me.gotCar()); // true friend.lendCar.apply(me, [false]); console.log(me.gotCar()); // false

이러한 메서드는 개체에 임시 기능을 제공하는 데 매우 유용합니다.

tjacks3

호출, 적용 및 바인딩의 또 다른 예입니다. Call과 Apply의 차이점은 분명하지만 Bind 는 다음과 같이 작동합니다.

1. Bind는 실행할 수 있는 함수의 인스턴스를 반환합니다.
2. 첫 번째 매개변수는 ' this '입니다.
3. 두 번째 매개변수는 쉼표로 구분된 인수 목록입니다(예: Call ).

}

 function Person(name) { this.name = name; } Person.prototype.getName = function(a,b) { return this.name + " " + a + " " + b; } var reader = new Person('John Smith'); reader.getName = function() { // Apply and Call executes the function and returns value // Also notice the different ways of extracting 'getName' prototype var baseName = Object.getPrototypeOf(this).getName.apply(this,["is a", "boy"]); console.log("Apply: " + baseName); var baseName = Object.getPrototypeOf(reader).getName.call(this, "is a", "boy"); console.log("Call: " + baseName); // Bind returns function which can be invoked var baseName = Person.prototype.getName.bind(this, "is a", "boy"); console.log("Bind: " + baseName()); } reader.getName(); /* Output Apply: John Smith is a boy Call: John Smith is a boy Bind: John Smith is a boy */

Mahesh

'valueForThis' 인수가 사용되는 예를 보여드리고 싶습니다.

 Array.prototype.push = function(element) { /* Native code*, that uses 'this' this.put(element); */ } var array = []; array.push(1); array.push.apply(array,[2,3]); Array.prototype.push.apply(array,[4,5]); array.push.call(array,6,7); Array.prototype.push.call(array,8,9); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

**세부정보: http://es5.github.io/#x15.4.4.7 *

user669677

Call()은 쉼표로 구분된 인수를 사용합니다. 예:

.call(scope, arg1, arg2, arg3)

그리고 apply()는 인수 배열을 취합니다. 예:

.apply(scope, [arg1, arg2, arg3])

다음은 몇 가지 사용 예입니다. http://blog.i-evaluation.com/2012/08/15/javascript-call-and-apply/

Mark Karwowski

Function.prototype.apply()의 MDN 문서에서 :

apply() 메서드는 주어진 this 값과 배열(또는 배열과 유사한 객체)로 제공된 인수로 함수를 호출합니다.

통사론

 fun.apply(thisArg, [argsArray])

Function.prototype.call()에 대한 MDN 문서에서 :

call() 메소드는 주어진 this 값과 개별적으로 제공된 인수로 함수를 호출합니다.

통사론

 fun.call(thisArg[, arg1[, arg2[, ...]]])

JavaScript의 Function.apply 및 Function.call에서 :

apply() 메서드는 두 번째 매개 변수로 배열이 필요하다는 점을 제외하고는 call()과 동일합니다. 배열은 대상 메서드에 대한 인수를 나타냅니다.

---

코드 예:

 var doSomething = function() { var arr = []; for(i in arguments) { if(typeof this[arguments[i]] !== 'undefined') { arr.push(this[arguments[i]]); } } return arr; } var output = function(position, obj) { document.body.innerHTML += '<h3>output ' + position + '</h3>' + JSON.stringify(obj) + '\n<br>\n<br><hr>'; } output(1, doSomething( 'one', 'two', 'two', 'one' )); output(2, doSomething.apply({one : 'Steven', two : 'Jane'}, [ 'one', 'two', 'two', 'one' ])); output(3, doSomething.call({one : 'Steven', two : 'Jane'}, 'one', 'two', 'two', 'one' ));

이 Fiddle 도 참조하십시오.

John Slegers

기본적인 차이점은 call() 은 인수 목록을 허용하는 반면 apply() 는 단일 인수 배열을 허용한다는 것입니다.

Rakesh Kumar

여기에 작은 게시물이 있습니다. 나는 이것에 대해 썼습니다.

http://sizeableidea.com/call-versus-apply-javascript/

 var obj1 = { which : "obj1" }, obj2 = { which : "obj2" }; function execute(arg1, arg2){ console.log(this.which, arg1, arg2); } //using call execute.call(obj1, "dan", "stanhope"); //output: obj1 dan stanhope //using apply execute.apply(obj2, ["dan", "stanhope"]); //output: obj2 dan stanhope //using old school execute("dan", "stanhope"); //output: undefined "dan" "stanhope"

Dan

차이점은 call() 은 함수 인수를 별도로 apply() 는 배열의 함수 인수를 취한다는 것입니다.

Sanjib Debnath

아래와 같이 호출 및 적용 방법을 구분할 수 있습니다.

CALL : 인수가 있는 함수를 개별적으로 제공합니다. 전달할 인수를 알고 있거나 전달할 인수가 없으면 call을 사용할 수 있습니다.

APPLY : 배열로 제공된 인수로 함수를 호출합니다. 함수에 전달할 인수의 수를 모르는 경우 적용을 사용할 수 있습니다.

호출보다 적용을 사용하는 이점이 있습니다. 전달되는 배열만 변경할 수 있기 때문에 인수의 수를 변경할 필요가 없습니다.

성능에는 큰 차이가 없습니다. 그러나 우리는 배열이 apply 메소드에서 평가되어야 하기 때문에 적용에 비해 호출이 조금 더 빠르다고 말할 수 있습니다.

Praveen D

이들과 메소드의 차이점은 매개변수를 전달하는 방법입니다.

"배열의 경우 A, 쉼표의 경우 C"는 편리한 니모닉입니다.

venkat7668

호출 및 적용 둘 다 함수가 실행될 때 this 유일한 차이점은 call n+1 인수를 취하는 것입니다. 여기서 1은 this 이고 'n' arguments 입니다. apply 는 두 개의 인수만 사용합니다. 하나는 this 다른 하나는 인수 배열입니다.

apply over call 에서 내가 볼 수 있는 이점은 많은 노력 없이 함수 호출을 다른 함수에 쉽게 위임할 수 있다는 것입니다.

 function sayHello() { console.log(this, arguments); } function hello() { sayHello.apply(this, arguments); } var obj = {name: 'my name'} hello.call(obj, 'some', 'arguments');

우리가 위임하는 방법을 쉽게 관찰 hello 에 sayHello 사용하여 apply 하지만, 함께 call 이 매우 달성하기 어렵다.

Raghavendra

비록 call 및 apply 같은 일을 achive, 당신이 사용할 수없는 한 곳이어야 있다고 생각 call 만 사용할 수 있습니다 apply . 상속을 지원하고 생성자를 호출하려는 경우입니다.

다음은 다른 클래스를 확장하여 클래스 생성을 지원하는 클래스를 생성할 수 있는 기능입니다.

 function makeClass( properties ) { var ctor = properties['constructor'] || function(){} var Super = properties['extends']; var Class = function () { // Here 'call' cannot work, only 'apply' can!!! if(Super) Super.apply(this,arguments); ctor.apply(this,arguments); } if(Super){ Class.prototype = Object.create( Super.prototype ); Class.prototype.constructor = Class; } Object.keys(properties).forEach( function(prop) { if(prop!=='constructor' && prop!=='extends') Class.prototype[prop] = properties[prop]; }); return Class; } //Usage var Car = makeClass({ constructor: function(name){ this.name=name; }, yourName: function() { return this.name; } }); //We have a Car class now var carInstance=new Car('Fiat'); carInstance.youName();// ReturnsFiat var SuperCar = makeClass({ constructor: function(ignore,power){ this.power=power; }, extends:Car, yourPower: function() { return this.power; } }); //We have a SuperCar class now, which is subclass of Car var superCar=new SuperCar('BMW xy',2.6); superCar.yourName();//Returns BMW xy superCar.yourPower();// Returns 2.6

Dhana Krishnasamy

요약:

call() 및 apply() Function.prototype 에 있는 메서드입니다. 따라서 프로토타입 체인을 통해 모든 함수 개체에서 사용할 수 있습니다. call() 과 apply() 모두 this 의 지정된 값으로 함수를 실행할 수 있습니다.

call() 과 apply() 의 주요 차이점은 인수를 전달하는 방식입니다. call() 및 apply() this 되고자 하는 객체를 첫 번째 인수로 this 로 전달합니다. 다른 인수는 다음과 같이 다릅니다.

• call() 을 사용하면 인수를 정상적으로 입력해야 합니다(두 번째 인수부터 시작).
• apply() 를 사용하면 인수 배열을 전달해야 합니다.

예시:

 let obj = { val1: 5, val2: 10 } const summation = function (val3, val4) { return this.val1 + this.val2 + val3 + val4; } console.log(summation.apply(obj, [2 ,3])); // first we assign we value of this in the first arg // with apply we have to pass in an array console.log(summation.call(obj, 2, 3)); // with call we can pass in each arg individually

왜 이러한 기능을 사용해야 합니까?

this 값은 자바스크립트에서 때때로 까다로울 수 있습니다. 의 값 this 함수가 정의 될 때 기능하지 실행될 때 결정된다. this 바인딩에 종속되어 있으면 call() 및 apply() 를 사용하여 이 동작을 적용할 수 있습니다. 예를 들어:

 var name = 'unwantedGlobalName'; const obj = { name: 'Willem', sayName () { console.log(this.name);} } let copiedMethod = obj.sayName; // we store the function in the copiedmethod variable copiedMethod(); // this is now window, unwantedGlobalName gets logged copiedMethod.call(obj); // we enforce this to be obj, Willem gets logged

Willem van der Veen

주요 차이점은 호출을 사용하여 범위를 변경하고 인수를 정상적으로 전달할 수 있지만 적용을 사용하면 인수를 배열로 사용하여 호출할 수 있다는 것입니다(배열로 전달). 그러나 코드에서 수행하는 작업의 측면에서는 매우 유사합니다.

이 함수의 구문은 apply()의 구문과 거의 동일하지만 근본적인 차이점은 call()은 인수 목록을 허용하는 반면 apply()는 단일 인수 배열을 허용한다는 것입니다.

보시다시피 큰 차이는 없지만 여전히 call() 또는 apply()를 사용하는 것을 선호하는 경우가 있습니다. 예를 들어, 적용 메소드를 사용하여 MDN의 배열에서 가장 작은 숫자와 가장 큰 숫자를 찾는 아래 코드를 보십시오.

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

따라서 주요 차이점은 인수를 전달하는 방식입니다.

부르다:

 function.call(thisArg, arg1, arg2, ...);

적용하다:

 function.apply(thisArg, [argsArray]);

Alireza

여기에 약간의 세부 사항을 추가하겠습니다.

이 두 호출은 거의 동일합니다.

 func.call(context, ...args); // pass an array as list with spread operator func.apply(context, args); // is same as using apply

약간의 차이만 있습니다.

• spread 연산자 ...는 반복 가능한 args 를 호출할 목록으로 전달할 수 있습니다.
• apply 은 배열과 유사한 인수만 허용합니다.

따라서 이러한 호출은 서로를 보완합니다. iterable이 예상되는 곳에서는 call 작동하고 array-like 가 예상되는 곳에서는 apply 작동합니다.

그리고 실제 배열과 같이 반복 가능 하고 배열과 유사한 객체의 경우 기술적으로 둘 중 하나를 사용할 수 있지만 대부분의 JavaScript 엔진이 내부적으로 더 잘 최적화하기 때문에 적용 이 더 빠를 것입니다.

Pravin Divraniya

call() 자바스크립트에서 미리 정의된 메서드입니다. 이 메서드는 소유자 개체를 지정하여 메서드(함수)를 호출합니다.

 function sayHello(){ return "Hello " + this.name; } var obj = {name: "Sandy"}; sayHello.call(obj); // Returns "Hello Sandy"

호출 수락 인수

 function saySomething(message){ return this.name + " is " + message; } var person4 = {name: "John"}; saySomething.call(person4, "awesome"); // Returns "John is awesome"

apply() apply 메서드는 call() 메서드와 유사합니다. 유일한 차이점은 call() 메서드는 인수를 별도로 취하는 반면 apply() 메서드는 인수를 배열로 취한다는 것입니다.

예시

 function saySomething(message){ return this.name + " is " + message; } var person4 = {name: "John"}; saySomething.apply(person4, ["awesome"]);

bisma

flatline 으로 잘 설명된 A . 간단한 예를 추가하고 싶습니다. 초보자가 쉽게 이해할 수 있도록 합니다.

 func.call(context, args1 , args2 ); // pass arguments as "," saprated value func.apply(context, [args1 , args2 ]); // pass arguments as "Array"

우리는 또한 아래 코드에 정의된 참조 를 변경하기 위해 "Call" 및 "Apply" 메서드를 사용합니다.

 let Emp1 = { name: 'X', getEmpDetail: function (age, department) { console.log('Name :', this.name, ' Age :', age, ' Department :', department) } } Emp1.getEmpDetail(23, 'Delivery') // 1st approch of chenging "this" let Emp2 = { name: 'Y', getEmpDetail: Emp1.getEmpDetail } Emp2.getEmpDetail(55, 'Finance') // 2nd approch of changing "this" using "Call" and "Apply" let Emp3 = { name: 'Z', } Emp1.getEmpDetail.call(Emp3, 30, 'Admin') // here we have change the ref from **Emp1 to Emp3** object // now this will print "Name = X" because it is pointing to Emp3 object Emp1.getEmpDetail.apply(Emp3, [30, 'Admin']) //

Abdul Rehman Kaim Khani

둘 다 같은 방식으로 호출하고 적용합니다. 호출을 이용하고 신청하면 곧바로 호출합니다.

call과 apply 모두 첫 번째 인수로 "this" 매개변수를 사용하고 두 번째 인수만 다릅니다.

호출은 함수의 인수를 목록(쉼표)으로 사용합니다. Apply는 함수의 인수를 배열로 사용합니다.

아래 유튜브 영상에서 bind, call, apply의 완전한 차이점을 확인할 수 있습니다.

https://www.youtube.com/watch?v=G-EfxnG0DtY&t=180s

Leela Narasimha

call() this 값과 개별적으로 제공된 인수로 함수를 호출합니다.

apply() 받는 유사 - call() 에있어서, 상기 제 파라미터의 apply() 메소드는 설정 this 함수가 호출되는 객체에 값이다. 이 경우 obj 개체입니다. 사이의 유일한 차이점 apply() 및 call() 방법은 두 번째 파라미터 인 것을 apply() 메소드는 배열로 실제 함수에 대한 인수를 받아 들인다.

unsuredev

출처 : http:www.stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply