JavaScript_javascript 기술로 함수를 호출하는 5가지 방법

본 글에서는 자바스크립트의 다양한 함수 호출 방식과 원리를 자세하게 소개하고 있어 자바스크립트 함수를 이해하는데 많은 도움이 됩니다!

자바스크립트, 함수를 호출하는 5가지 방법

버그가 있는 JavaScript 코드는 JavaScript 함수의 작동 방식을 제대로 이해하지 못한 결과라는 것을 몇 번이나 발견했습니다(그런데 저는 JavaScript가 함수형 프로그래밍 특성을 가지고 있다는 코드를 많이 작성했습니다). 그것은 우리의 발전에 장애물이 될 것입니다.

초보자로서 다섯 가지 함수 호출 방법을 테스트해 보겠습니다. 표면적으로는 이러한 함수가 C#의 함수와 매우 유사하다고 생각되지만, 여전히 매우 중요한 차이점이 있음을 곧 알게 될 것입니다. 이러한 차이점을 무시하면 의심할 여지 없이 버그 추적이 어려워집니다. 먼저 아래에서 사용할 간단한 함수를 만들어 보겠습니다. 이 함수는 이 값과 제공된 두 매개변수만 반환합니다.

코드 복사 코드는 다음과 같습니다. 함수 makeArray(arg1, arg2){ [ this, arg1, arg2 ]를 반환합니다. }

가장 일반적으로 사용되는 방법이지만 안타깝게도 전역 함수 호출입니다 우리는 자바스크립트를 배우면서 위 예제의 구문을 사용하여 함수를 정의하는 방법을 배웠습니다. , 우리는 또한 이 함수를 호출하는 것이 매우 간단하다는 것을 알고 있습니다. 우리가 해야 할 일은 다음과 같습니다:

코드 복사 코드는 다음과 같습니다. makeArray('하나', '둘'); // => [ 창, '하나', '둘' ]

잠깐만요 저 창문은 뭐죠

경고(window.methodThatDoesntExist 유형); // => 정의되지 않음 경고(window.makeArray 유형); // =>

window.makeArray('one', 'two'); // => [ 창, '하나', '둘' ]

가장 일반적인 호출 방법은 기본적으로 전역 멤버로 선언하는 함수를 발생시키기 때문에 안타깝습니다. 우리 모두는 전역 멤버가 프로그래밍에서 모범 사례가 아니라는 것을 알고 있습니다. 이는 JavaScript에서 특히 그렇습니다. 글로벌 회원 여러분, 후회하지 않으실 겁니다.

JavaScript 함수 호출 규칙 1 myFunction()과 같이 명시적인 소유자 개체 없이 직접 호출되는 함수에서는 this 값이 기본 개체(브라우저의 창)가 됩니다.

함수 호출

이제 makeArray 함수를 메서드 중 하나로 사용하여 간단한 개체를 만들어 보겠습니다. json을 사용하여 개체를 선언하고 이 메서드도 호출합니다.

코드 복사 코드는 다음과 같습니다. //객체 생성 var arrayMaker = { SomeProperty: '여기에 일부 값', 만들기: makeArray };

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

여기서 차이점을 보세요. this의 값은 왜 원래 함수 정의가 변경되지 않았는지, 왜 window가 아닌지 궁금해할 것입니다. JSavascript에서 함수가 전달되는 방식은 다음과 같습니다. 함수는 JavaScript의 표준 데이터 유형으로, 정확하게는 객체를 전달하거나 복사할 수 있습니다. 이는 매개변수 목록과 함수 본문이 있는 전체 함수를 복사하여 arrayMaker 속성 make에 할당하는 것과 같습니다. arrayMaker는 다음과 같습니다:

코드 복사 코드는 다음과 같습니다. var arrayMaker = { SomeProperty: '여기에 일부 값', Make: 함수(arg1, arg2) { return [ this, arg1, arg2 ]; } };

JavaScript 함수 호출 규칙 2

obj.myFunction() 또는 obj['myFunction']()과 같은 메서드 호출 구문에서 이 값은 obj입니다.

이것은 이벤트 처리 코드에서 버그의 주요 원인입니다. 다음 예제를 확인하세요

코드 복사 코드는 다음과 같습니다.

함수버튼클릭(){ var text = (this === 창) ? '창' : this.id; 경고(텍스트); } var 버튼1 = document.getElementById('btn1'); var 버튼2 = document.getElementById('btn2');

버튼1.onclick = 버튼클릭; 버튼2.onclick = function(){buttonClicked() };

첫 번째 버튼을 클릭하면 메서드 호출이므로 "btn"이 표시되고, 두 번째 버튼을 클릭하면 obj. (buttonClicked().) 이는 세 번째 버튼과 동일하며 이벤트 핸들러 함수를 레이블에 직접 배치합니다. 따라서 세 번째 버튼을 클릭한 결과는 두 번째 버튼과 같습니다. jQuery와 같은 JS 라이브러리를 사용하면 이벤트 처리 함수가 jQuery에 정의될 때 JS 라이브러리가 현재 이벤트 소스 요소에 대한 참조가 포함되도록 이 값을 다시 작성하는 데 도움이 된다는 이점이 있습니다.

코드 복사 코드는 다음과 같습니다. //jQuery 사용 $('#btn1').click( function() { Alert( this.id ); // jQuery는 'this'가 버튼이 되도록 보장합니다 });

jQuery는 어떻게 이것의 값을 오버로드합니까? 계속 읽기 나머지 두 개: apply() 및 call()

JavaScript 함수를 더 많이 사용할수록 Qjuery가 이벤트 핸들러에서 하는 것처럼 함수를 전달하고 다른 컨텍스트에서 호출해야 한다는 것을 더 많이 알게 되며, 종종 재설정해야 할 수도 있습니다. 내가 말한 것을 기억하세요. 함수는 Javascript의 객체이기도 합니다. 함수 객체에는 미리 정의된 메소드가 포함되어 있으며 그 중 두 가지는 이를 수정하는 데 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. var gasGuzzler = { 연도: 2008, 모델: 'Dodge Bailout' }; makeArray.apply( gasGuzzler, [ 'one', 'two' ] ); // => [ 가스Guzzler, '하나' , '둘' ] makeArray.call( gasGuzzler, 'one', 'two' ); // => [ 가스Guzzler, '하나' , '둘' ]

두 메서드는 다음 매개변수에 유사합니다. Function.apply()는 배열을 사용하여 함수에 전달하는 반면 Function.call()은 실제로 이러한 매개변수를 독립적으로 전달합니다. ) 대부분의 경우 더 편리합니다.

JSavascript 함수 호출 규칙 3

함수를 메서드에 복사하지 않고 this 값을 오버로드하려면 myFunction.apply( obj ) 또는 myFunction.call( obj )을 사용할 수 있습니다.

건축자

Javascript의 유형 정의를 자세히 조사하고 싶지는 않지만 지금은 Javascript에 클래스가 없으며 모든 사용자 정의 유형에는 프로토타입 객체를 사용하여 정의된 초기화 함수가 필요하다는 점을 알아야 합니다( 초기화 함수의 속성) 귀하의 유형도 좋은 ism입니다. 간단한 유형을 만들어 보겠습니다

코드 복사 코드는 다음과 같습니다. //생성자 선언 함수 ArrayMaker(arg1, arg2) { This.someProperty = '무엇이든'; This.theArray = [ this, arg1, arg2 ]; } // 인스턴스화 방법 선언 ArrayMaker.prototype = { SomeMethod: 함수 () { 경고( '어떤 메소드가 호출되었습니다'); }, GetArray: 함수 () { this.theArray를 반환합니다. } };

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

am.getArray(); // => [ 오전, '하나' , '둘' ]

매우 중요하고 주목할만한 점은 함수 호출 앞에 나타나는 새 연산자입니다. 이것이 없으면 함수는 전역 함수와 같으며 우리가 만드는 속성은 전역 객체(창)에 생성됩니다. 그것을 원하지 않는데, 또 다른 주제는 생성자에 반환 값이 없기 때문에 new 연산자를 사용하는 것을 잊어버리면 일부 변수가 정의되지 않은 상태로 할당된다는 것입니다. 대문자로 시작하는 좋은 습관은 전화할 때 이전 새 교환원을 잊지 않도록 상기시키는 역할을 할 수 있습니다.

이 점을 주의하여 초기화 함수의 코드는 다른 언어로 작성하는 초기화 함수와 유사합니다. 이 값이 생성할 개체가 됩니다.

Javascript 함수 호출 규칙 4

MyFunction()과 같은 함수를 초기화 함수로 사용하면 Javascript 런타임은 새로 생성된 객체에 이 값을 할당합니다.

다양한 함수가 호출되는 방식의 차이점을 이해하면 JavaScript 코드가 버그로부터 보호되고, 이 값을 항상 아는 것이 버그를 방지하는 첫 번째 단계가 되기를 바랍니다.