이 기사는 다양한 기능 호출의 방법과 원리를 JavaScript의 자세히 소개합니다. 이는 JavaScript 기능을 이해하는 데 큰 도움이됩니다!
JavaScript, 기능을 호출하는 5 가지 방법
몇 번이고, 나는 버그가없는 JavaScript 코드가 JavaScript 기능의 작동 방식을 실제로 이해하지 못하여 발생한다는 것을 알았습니다. JavaScript는 기능적 프로그래밍의 특성을 가지고 있으며, 이는 우리가 직면하기로 선택할 때 우리의 진보에 장애가 될 것입니다.
초보자로서 5 가지 기능 호출을 테스트합시다. 표면에서 우리는 이러한 기능이 C#의 기능과 매우 유사하다고 생각할 것입니다. 그러나 앞으로도 여전히 중요한 차이가 있음을 알 수 있습니다. 이러한 차이를 무시하면 의심 할 여지없이 트랙 버그가 어려워집니다. 먼저 아래에서 사용될 간단한 함수를 만들고이 함수는이 값과 두 개의 제공된 매개 변수 만 반환합니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
함수 makearray (arg1, arg2) {
반환 [this, arg1, arg2];
}
</스크립트>
가장 일반적으로 사용되는 방법이지만 불행히도 글로벌 기능이 호출됩니다.
JavaScript를 배울 때 위의 예에서 구문을 사용하여 함수를 정의하는 방법을 배웁니다.
, 우리는 또한이 기능을 부르는 것이 매우 간단하다는 것을 알고 있습니다. 우리가해야 할 일은 다음과 같습니다.
코드 사본은 다음과 같습니다.
Makearray ( 'One', 'Two');
// => [창, '하나', '둘']]
잠깐 기다려요. 그 창은 뭐야
Alert (typeof window.methodthatdoesntexist);
// => 정의되지 않았습니다
경고 (typeof window.makearray);
// =>
Window.makearray ( 'One', 'Two');
// => [창, '하나', '둘']]
가장 일반적인 호출 방법은 불행한 일이라고 말합니다. 왜냐하면 우리가 선언하는 함수가 기본적으로 글로벌이기 때문입니다. 우리는 모두 글로벌 회원이 프로그래밍을위한 모범 사례가 아니라는 것을 알고 있습니다. 이것은 JavaScript에서 특히 정확합니다. JavaScript의 글로벌 회원을 피하는 것을 후회하지 않을 것입니다.
JavaScript 기능 호출 규칙 1
myFunction ()과 같은 명시 적 소유자 객체가 직접 호출하지 않은 함수 에서이 값은 기본 오브젝트 (브라우저의 창)이됩니다.
기능 호출
지금 간단한 객체를 만들고 Makearray 함수를 메소드로 사용합시다. 우리는 JSON 메소드를 사용하여 객체를 선언 하고이 방법을 호출합니다.
코드 사본은 다음과 같습니다.
// 객체 생성
var arraymaker = {
SomeProperty : '여기에 일부 가치',
Make : Makearray
};
// make () 메소드를 호출합니다
Arraymaker.make ( 'One', 'Two');
// => [Arraymaker, 'one', 'two']]
// 사각형 괄호를 사용하는 대체 구문
Arraymaker [ 'make'] ( 'one', 'two');
// => [Arraymaker, 'one', 'two']]
차이점을 참조하십시오.이 값은 객체 자체가됩니다. 원래 함수 정의가 왜 변경되지 않았는지, 왜 창이 아닌지 궁금 할 것입니다. 글쎄, 이것이 Jsavar에서 기능이 통과되는 방식입니다. 함수는 JavaScript의 표준 데이터 유형이거나 정확하게 객체입니다. 당신은 그들을 전달하거나 복사 할 수 있습니다. 마치 전체 함수와 매개 변수 목록과 기능 본문이 배열 제조업체에있는 속성에 복사되어 할당되는 것처럼 이와 같이 배열 메이커를 정의하는 것과 같습니다.
코드 사본은 다음과 같습니다.
var arraymaker = {
SomeProperty : '여기에 일부 가치',
MATE : 기능 (Arg1, Arg2) {
반환 [this, arg1, arg2];
}
};
JavaScript 기능 호출 규칙 2
Method Call Syntax, 예 : obj.myfunction () 또는 obj [ 'myFunction'] ()와 같은 값은 OBJ입니다.
이것은 이벤트 처리 코드의 주요 버그 소스입니다. 이 예를 살펴보십시오
코드 사본은 다음과 같습니다.
<입력 유형 = "버튼"value = "버튼 1"id = "btn1" />
<입력 유형 = "버튼"value = "버튼 2"id = "btn2" />
<입력 유형 = "버튼"value = "버튼 3"id = "btn3"onclick = "buttonClicked ();"/>
<script type = "text/javaScript">
함수 buttonclicked () {
var text = (this === 창)? '창': this.id;
경고 (텍스트);
}
var button1 = document.getElementById ( 'btn1');
var button2 = document.getElementById ( 'btn2');
button1.onclick = buttonclicked;
button2.onclick = function () {buttonClicked (); };
</스크립트>
첫 번째 버튼을 클릭하면 "BTN"이 표시되므로 메소드 호출이므로 표시되는 객체 (버튼 요소)입니다. ButtonClicked가 직접 호출되므로 두 번째 버튼을 클릭하면 "Window"가 표시됩니다 (OBJ.ButtonClicked ()와 달리) 이것은 세 번째 버튼과 동일하므로 이벤트 처리 기능이 레이블에 직접 처리됩니다. 따라서 세 번째 버튼을 클릭 한 결과는 두 번째 버튼과 동일합니다.
jQuery와 같은 JS 라이브러리를 사용하는 것이 장점이 있습니다. 이벤트 핸들러가 jQuery에 정의되면 JS 라이브러리는이 값을 무시하여 현재 이벤트 소스 요소에 대한 참조를 포함하는지 확인합니다.
코드 사본은 다음과 같습니다.
// jQuery를 사용합니다
$ ( '#btn1'). 클릭 (function () {
경고 (this.id); // jQuery는 'this'가 버튼이 될 것입니다
});
jQuery는 이것의 값을 어떻게 과부하합니까? 계속 읽으십시오
다른 두 사람 : apply () 및 콜 ()
JavaScript 함수를 더 많이 사용할수록 함수를 전달하고 다른 상황에서 호출해야한다는 것을 알게됩니다. Qjuery가 이벤트 처리 기능을 처리하는 것처럼 종종이 값을 재설정해야합니다. 내가 당신에게 말한 것을 기억하십시오. JavaScript 기능에서도 객체입니다. 함수 객체에는 일부 사전 정의 된 메소드가 포함되어 있으며 그 중 2 개는 apply () 및 call () 이며이를 재설정하는 데 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
var gasguzzler = {year : 2008, 모델 : '닷지 구제 금융'};
Makearray.apply (Gasguzzler, [ 'one', 'two']);
// => [Gasguzzler, 'one', 'two']]
Makearray.call (Gasguzzler, 'One', 'Two');
// => [Gasguzzler, 'one', 'two']]
이 두 가지 방법은 비슷하며 차이는 다음 매개 변수의 차이입니다. function.apply ()는 배열을 사용하여 함수로 전달하고 function.call ()은 이러한 매개 변수를 독립적으로 전달합니다. 실제로, 당신은 대부분의 경우 apply ()가 더 편리하다는 것을 알게 될 것입니다.
jsavarscript 함수 호출 규칙 3
기능을 메소드에 복사하지 않고이 값을 과부하하려면 MyFunction.Apply (OBJ) 또는 MyFunction.Call (OBJ)을 사용할 수 있습니다.
건설자
JavaScript에서 유형의 정의를 파헤치고 싶지는 않지만이 순간에 JavaScript에는 클래스가 없다는 것을 알아야하며 사용자 정의 유형에는 초기화 기능이 필요합니다. 또한 프로토 타입 객체 (초기화 함수의 속성)를 사용하여 유형을 정의하는 것이 좋습니다. 간단한 유형을 만들어 봅시다
코드 사본은 다음과 같습니다.
// 생성자를 선언합니다
함수 배열 메이커 (arg1, arg2) {
this.someproperty = '뭐든지';
this.thearray = [this, arg1, arg2];
}
// 인스턴스화 방법을 선언합니다
Arraymaker.prototype = {
somemethod : function () {
Alert ( 'Somemethod lall');
},
getArray : function () {
이것을 반환하십시오.
}
};
var am = 새로운 배열 메이커 ( 'One', 'Two');
var Other = New Arraymaker ( 'First', 'Second');
am.getArray ();
// => [am, 'one', 'two']]
매우 중요하고 주목할만한 것은 함수 호출 앞에 나타나는 새로운 연산자입니다. 그 없이는 귀하의 기능은 글로벌 기능과 같으며 우리가 만든 속성은 글로벌 객체 (창)에서 생성 될 것이며, 그렇게하고 싶지 않습니다. 또 다른 주제는 생성자에 반환 값이 없기 때문에 새 연산자를 사용하는 것을 잊어 버리면 일부 변수가 정의되지 않은 채 할당된다는 것입니다. 이러한 이유로 대문자로 시작하는 것은 좋은 습관입니다. 이것은 호출 할 때 이전의 새 연산자를 잊지 않도록 알림으로 사용할 수 있습니다.
이러한주의로 초기화 기능의 코드는 다른 언어로 작성한 초기화 기능과 유사합니다. 이것의 가치는 당신이 생성 할 객체가 될 것입니다.
JavaScript 기능 호출 규칙 4
myFunction ()과 같은 초기화 함수로 함수를 사용하면 JavaScript 런타임은 이것의 값을 새로 생성 된 객체로 지정합니다.
다양한 기능 호출 방법의 차이를 이해하면 SjavaScript 코드가 버그에서 멀어지게되며, 이러한 버그는 항상이 값이 피하는 첫 번째 단계임을 알 수 있습니다.