JavaScript에서 괄호로 함수를 호출하면 차이가 있습니까?


105

빈 괄호가 있거나 괄호가 전혀없는 함수를 호출 할 때 차이를 발견했습니다. 그러나 함수에 인수를 전달하지 않으므로 다음과 같은 차이점이 무엇인지 궁금했습니다.

window.onload = initAll();

window.onload = initAll;

그이면의 원리를 설명 해주세요.


24
@JS Bangs-미국 영어로만 제공됩니다. 다른 곳이 아닙니다. 프로그래머는 혼동을 피하기 위해 "괄호"라고 부르는 경향이 있지만 영국 영어에서는 둥근 모양을 단순히 대괄호라고합니다. 정사각형은 "대괄호"로 알려져 있습니다. en.wikipedia.org/wiki/Bracket
Rob Levine

13
진지하게 말하자면 공식 유니 코드 이름은 괄호입니다. 0028 ( LEFT PARENTHESIS = 여는 괄호 (1.0) 및 0029 ) RIGHT PARENTHESIS = 닫는 괄호 (1.0) - unicode.org/charts/charindex.html#P 어떤 Dictionary.com 그것에 대해 말해야 - dictionary.reference.com/을 browse / PARENTHESIS "직선 곡선 중 하나 또는 둘 다, () ..."

8
그래서 이것은 단지 "미국 영어"가 아니라 UNICODE가 국제 표준이기 때문에 국제 표준 정의입니다.

2
@fuzzy-진지하게 당신의 사실은 어디서 얻습니까? {}다람쥐 괄호라고합니다.
Anurag

7
@fuzzy lollipop-유니 코드는 문자를 이름 지정이 아닌 바이트로 인코딩하는 국제 표준입니다. 유니 코드 문서의 저자는 캐릭터의 이름이 국제 표준이라고 주장하지 않습니다. 코드 대 그들이 정의하는 문자입니다. 그러나 [및]를 대괄호 (단지 "대괄호"가 아님)로도 참조하고 [, {및 (모두를 대괄호 문자로 참조합니다. 뉘앙스를 이해하기 위해 노력해야합니다. 다른 장소에서 같은 단어를 사용하는 방식으로 국제 팀의 일원이라면 매우 중요합니다
Rob Levine

답변:


161
window.onload = initAll();

이것은 즉시 실행 되고 함수의 반환 값 을에 할당합니다 . 이것은 일반적으로 원하는 것이 아닙니다 . 이해하기 위해서는 함수를 반환해야합니다.initAll() window.onloadinitAll()

window.onload = initAll;

이것은 실제 함수 를 할당합니다. window.onloadJavaScript에서 @Felix가 말했듯이 함수는 실행하지 않고도 일류 객체이기 때문에 가능합니다. initAll로드 이벤트에 의해 실행됩니다.


18
여기서 언급해야 할 중요한 점은 함수가 JavaScript의 일급 객체라는 것입니다.
Felix Kling

136

Pekka의 말은 맞지만 함수 포인터 나 델리게이트를 완전히 이해하지 못하는 사람에게 설명하는 데 도움이되는 예를 들어 조금 더 자세히 설명하고 싶습니다.

window.onload설명하기 위해 약간 고안 되었기 때문에 사용하지 않을 것 입니다. 대신 간단한 곱하기 함수를 사용하여 데모합니다.

function Multiply(operator, operand) {
    return operator * operand;
}

다음과 같이 작성할 수 있습니다.

Multiply = function(operator, operand) {
    return operator * operand;
}

첫 번째 예에서는 그 의미가 명확하지 않을 수 있지만 두 번째 예에서는라는 변수에 매개 변수가 2 개인 함수를 할당하고 있음을 더 명확하게 보여줍니다. Multiply이 함수의 할당 개념은 JavaScript 전체에서 공통적입니다. 이것은 함수가 "일급 시민" 이라는 사실을 보여주는 작은 데모입니다. 즉 , 마치 값을 전달하는 것처럼 정확하게 전달 될 수 있습니다.

이제 할당의 차이를 살펴 보겠습니다.

var operator = 3;
var operand = 4;
var ret = Multiply(operator, operand);

ret 변수를 정의 할 때 Multiply실행되고 반환 값이 할당됩니다.- ret12가됩니다.

다른 방법으로 다시 시도해 보겠습니다.

var operator = 3;
var operand = 4;
var ret = Multiply;

이제 정의의 시점에서 ret, ret당신이됩니다 Multiply당신의에서 얻은 결과 인 반대 기능을 Multiply작동합니다. 를 호출 ret()하면 Multiply함수가 실행되며 호출 한 것처럼 정확하게 호출 할 수 있습니다 Multiply(operator, operand).

var out = ret(3, 4);

와 같다

var out = Multiply(3, 4);

ret의 대리인 으로 사용할 것이라고 효과적으로 말씀하셨습니다 Multiply(). 를 호출 할 때 ret우리는 실제로 Multiply함수를 참조 합니다.

당신의 위로 window.onload. 이것을 다음과 같이 생각하십시오.

window.onload = function() {
    //Doing what all good window.onload functions should do...
}

initAll = function() {
    return 12;
}

보시다시피 window.onload는 다른 기능과 마찬가지로 특별한 기능이 없습니다. 값을 할당하고, 함수를 할당하고, 원하는 경우 null을 출력 할 수 있습니다. 요점은 window.onload자신의 함수에 대한 것보다 더 특별한 것은 없다는 것입니다. 약간 다른 점은로드 될 때 창에 의해 호출된다는 것입니다. [면책 조항 : 실제로 창 기능을 무효화 한 적이 없으므로 이것이 부정적인 영향을 미칠지 확실하지 않습니다. 누군가는 그것을 호출하기 전에 함수가 할당되었는지 확인하기를 바랍니다 if (window.onload) window.onload();.

이제 initAll()우리가 말하는 것은 다음과 같습니다.

window.onload = initAll();

다음과 같이 말할 수도 있습니다.

window.onload = 12;

그러나 우리 initAll가 괄호없이 말할 때 우리 가 정말로 말하는 것은 내 window.onload 함수가 무엇이든 새로운 함수로 바꾸고 싶습니다. 즉 initAll, 그것을 내 함수 로 바꾸고 window.onload싶습니다. initAll암호.

그래서:

window.onload = function() {
    //Doing what all good window.onload functions should do...
}

다음으로 대체됩니다.

window.onload = function() {
    return 12;
}

따라서에 대한 호출 은 원래 있던 것이 아니라 함수를 window.onload실행합니다 . 원래 기능을 새 기능으로 교체했습니다.initAllwindow.onload

사실, 당신은 할 수 동등하게 쓰기 :

window.onload = function() {
    //Write all your init code right in here instead of having a separate 
    //initAll function.
}

더 잘 보여줄 수있는 또 다른 예는 다음과 같습니다.

var d = new Date();
var currentTime = d.getTime();

d정의 된 시간이 무엇이든 결국에 할당됩니다 currentTime. 훌륭합니다. 그러나 이는 해당 코드가 포함 된 함수가 호출 된 시간 (예 : 페이지로드 시간)을 확인하려는 경우에만 유용합니다. currentTime호출 된 시간을 현재 시간을 원하면 어떨까요?

var currentTime = function() {
    var d = new Date();
    return d.getTime();
}

var a = currentTime(); //The current time at the point a is defined...
var b = currentTime;   //b is a functional reference to currentTime...
var c = b(); //The current time when variable c is defined
var d = c; //The current time when variable c was defined

우리가 전화하는 방법을 공지 b()우리에 cd우리가 부를 수있는 정확하게 지정 currentTime()?


멋진 대답!
샤디 Almosri

이벤트 리스너에서 인수를받는 함수를 추가하려면 어떻게해야합니까?
Shemiroth dec.

16

자바 스크립트의 함수는 일류 시민이므로 다른 변수에 할당하거나 인수로 전달할 수 있습니다.

그래서 당신이 할 때

window.onload = initAll;

함수 자체 를 참조하도록 개체 의 onload속성을 설정합니다 .windowinitAll

당신이 할 때

window.onload = initAll();

initAll onload반환 값 을 유지 하도록 속성을 설정하고 있습니다 . 해당 행에서 실행되기 때문입니다.


10

initAll 함수 값에 대한 참조이며 함수 이름에 추가 된 대괄호 연산자는이 함수 개체를 실행합니다.

그래서 당신이 뭔가를한다면

a = initAll

다음 a이 될 것 같은 initAll- 예를 들어 당신이 할 수 a()있지만 함께 -

a = initAll()

변수 a는 실행 된 initAll함수 의 반환 값을 얻습니다.


8

6 년 늦었지만 위의 답변보다 훨씬 간단하게 설명 할 수있을 것 같습니다.

여기에 TLDR이 있습니다 . 또는 조감도는 사용하여 함수를 호출하고 사용하지 않을 때는 ()'들

이 함수를 예를 들어 보겠습니다.

function foo(){
return 123;
}

"foo"를 기록하는 경우- 없이 ()

console.log(foo); 

---outout------
function foo(){
return 123;
}

no ()수단을 사용 하여 함수 자체가져옵니다 . 콜백으로 전달되도록하려면 이렇게합니다.


") (foo는"당신이 로그인하는 경우 - ()

console.log(foo());
-----output-----
 123

()함수 뒤에 사용 한다는 것은 함수를 실행하고 값을 반환하는 것을 의미 합니다 .

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.