JavaScript에서 함수를 호출하는 5가지 방법

버그가 있는 JavaScript 코드는 JavaScript 함수의 작동 방식을 제대로 이해하지 못한 결과라는 것을 몇 번이나 발견했습니다(그런데 저는 JavaScript가 함수형 프로그래밍 특성을 가지고 있다는 코드를 많이 작성했습니다).
초보자로서 5가지 함수 호출 방법을 표면적으로 테스트해 보겠습니다. 이 함수들은 C#의 함수와 매우 유사하다고 생각됩니다. 잠시 후에 살펴보겠지만, 여전히 매우 중요한 차이점이 있습니다. 이러한 차이점을 무시하면 의심할 여지 없이 추적하기 어려운 버그가 발생하게 됩니다. 먼저 아래에서 사용할 간단한 함수를 만들어 보겠습니다. 이 함수는


가장 일반적으로 사용되는 메서드이지만 안타깝게도 전역 함수 호출을 배웠을 때 Javascript에서는 위 예제의 구문을 사용하여 함수를 정의하는 방법을 배웠습니다. , 우리는 또한 이 함수를 호출하는 것이 매우 간단하다는 것을 알고 있습니다.


makeArray('one', 'two');
// => 'one', 'two' ]

잠깐만 요.


alert( typeof window.methodThatDoesntExist );
// => 경고( typeof window.makeArray);
// =>


window.makeArray('one', 'two');
// => one ', 'two' ]
　
가장 일반적인 호출 방법은 기본적으로 전역 멤버로 선언하는 함수를 발생시키기 때문에 불행하다고 생각합니다. 이는 JavaScript에서 특히 그렇습니다. JavaScript에서 전역 멤버를 사용하지 않으면 후회하지 않을 것입니다.
JavaScript 함수 호출 규칙 1
myFunction()과 같은 명확한 소유자 개체 없이 직접 호출되는 함수에서는 , 이 값이 기본 객체(브라우저의 창)가 됩니다.
함수 호출 이제 makeArray 함수를 메서드 중 하나로 사용하여 간단한 개체를 만들어 보겠습니다. json을 사용하여 개체를 선언하고 이 메서드도 호출합니다.


/ / 객체 생성
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
};

//make() 메서드 호출
arrayMaker .make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// 대괄호를 사용하는 대체 구문
arrayMaker['make ' ]('one', 'two');
// => [ arrayMaker, 'one', 'two' ]

　
여기서 차이점을 보세요. 이 값은 객체가 됩니다. 원래 함수 정의가 왜 변경되지 않았는지 궁금할 것입니다. JSavascript에서 함수가 전달되는 방식은 정확하게 말하면 객체입니다. 또는 이를 복사하면 매개변수 목록과 함수 본문이 복사되어 arrayMaker의 속성 make에 할당되는 것과 같습니다. 그러면 다음과 같이 arrayMaker를 정의하는 것과 같습니다.

var arrayMaker = {
someProperty: '여기에 일부 값',
make: function (arg1, arg2) {
return [ this, arg1, arg2 ];
}
};

　
JavaScript 함수 호출 규칙 2
obj.myFunction() 또는 obj['myFunction']()과 같은 메소드 호출 구문에서 이 값은 obj입니다.
이것이 이벤트 버그의 주요 소스입니다. 코드를 처리하려면 다음 예제를 살펴보세요 www.2cto.com







　
첫 번째 버튼을 클릭하면 메서드 호출이기 때문에 "btn"이 표시되고, 이는 해당 버튼이 속한 개체(버튼 요소)입니다. 두 번째 버튼을 클릭하면 obj.buttonClicked( obj.buttonClicked와 달리)가 직접 호출되기 때문에 "창"이 표시됩니다. ).) 이는 이벤트 핸들러 함수를 레이블에 직접 배치하는 세 번째 버튼과 동일합니다. 따라서 세 번째 버튼을 클릭한 결과는 jQuery와 같은 JS 라이브러리를 사용하는 경우 다음과 같은 장점이 있습니다. 이벤트 처리 함수가 jQuery에 정의되어 있으면 JS 라이브러리는 이 값을 다시 작성하여 현재 이벤트 소스 요소에 대한 참조가 포함되도록 합니다.
//jQuery 사용 $('#btn1').click( function() { 경고( this.id ); // jQuery는 'this'가 버튼이 되도록 보장합니다. });
jQuery는 this 값을 어떻게 재정의하나요? 계속 읽기
나머지 두 개: apply () 및 call() JavaScript 함수를 더 많이 사용할수록 Qjuery가 이벤트 핸들러에서 하는 것처럼 함수를 전달하고 다른 컨텍스트에서 호출해야 한다는 것을 더 많이 알게 되며, 이 값을 재설정해야 하는 경우가 많습니다. 함수는 Javascript의 객체이기도 합니다. 함수 객체에는 미리 정의된 메소드가 포함되어 있는데 그 중 두 가지는 apply()와 call()입니다. 이를 재설정하는 데 사용할 수 있습니다.
var gasGuzzler = { year: 2008, 모델: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// = > [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler, 'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]
　
다음을 제외하고 두 메서드는 유사합니다. Function.apply()는 배열을 사용하여 함수에 전달하는 반면 Function.call()은 이러한 매개변수를 독립적으로 전달합니다. 예, 실제로는 대부분의 경우 apply()가 더 편리합니다.
JSavascript 함수 호출 규칙 3
함수를 메서드에 복사하지 않고 this의 값을 오버로드하려면 myFunction.apply( obj ) 또는 myFunction.call( obj )을 사용할 수 있습니다. Javascript의 유형 정의로 들어가십시오. 그러나 현재 우리는 Javascript에는 클래스가 없으며 모든 사용자 정의 유형에는 초기화 기능이 필요하다는 것을 알아야 합니다. 프로토타입 객체를 속성으로 사용하는 것도 좋은 생각입니다. 초기화 함수)를 사용하여 유형을 정의해 보겠습니다. // 생성자 선언

function ArrayMaker (arg1, arg2) {
this.someProperty = 'whatever';
this. theArray = [ this, arg1, arg2 ];
}
// 인스턴스화 메서드 선언
ArrayMaker.prototype = {
someMethod: function () {
Alert( 'someMethod Called') ;
},
getArray: function () {
return this.theArray;
}
};

var am = new ArrayMaker( 'one', 'two ' );
var other = new ArrayMaker( '첫 번째', '두 번째' );

am .getArray();
// => [ am, 'one' , 'two ' ]

　
매우 중요하고 주목할만한 점은 함수 호출 앞에 나타나는 새로운 연산자입니다. 그것이 없으면 함수는 전역 함수와 같으며 우리가 만드는 속성이 생성됩니다. 또 다른 주제는 반환 값이 없기 때문에 new 연산자를 사용하는 것을 잊어버리면 일부 변수에 다음 값이 할당된다는 것입니다. 이러한 이유로 생성자 함수를 대문자로 시작하는 것이 좋은 습관입니다. 이는 이전 new 연산자를 호출할 때 알림 역할을 할 수 있습니다. 이렇게 주의하면 초기화 함수의 코드가 비슷해집니다. 이 값은 생성할 객체가 됩니다.
Javascript 함수 호출 규칙 4
MyFunction()과 같은 함수를 초기화 함수로 사용하면 Javascript는 런타임은 이 값을 새로 생성된 개체로 지정합니다.
다양한 함수 호출 방법을 이해하고 싶습니다. 차이점을 통해 JavaScript 코드가 버그로부터 보호되고 이 값을 항상 알도록 하는 것이 버그를 방지하는 첫 번째 단계입니다. 그들을.