JavaScript 이 호출 규칙 설명_javascript 기술

JavaScript 함수 호출 규칙 1
(1) 전역 함수 호출:

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

function makeArray( arg1, arg2 ){
return [this , arg1 , arg2 ];
}

이것은 함수를 정의하는 데 가장 일반적으로 사용되는 방법입니다. . 나는 JavaScript를 배우는 사람들이 그 사용법에 익숙하다고 믿습니다.
호출 코드는 다음과 같습니다.
makeArray('one', 'two')
// => [ window, 'one', 'two' ]
이 메서드는 다음과 같습니다. 전역 함수 호출이라고 합니다.
왜 글로벌 기능이라고 하나요?
전역 개체 창의 메서드이므로
다음 메서드로 확인할 수 있습니다.
alert( typeof window.methodThatDoesntExist )
// => ( typeof window .makeArray);
// => function
따라서 makeArray를 호출하는 데 사용한 메소드는 아래 호출된 메소드와 동일합니다
window.makeArray('one', 'two') ;
// => [ window, 'one', 'two' ]
JavaScript 함수 호출 규칙 2
(1) 객체 메서드 호출:

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

//객체 생성
var arrayMaker = {
someProperty: 'some value here ',
make: makeArray
};
arrayMaker.make('one', 'two') // => [ arrayMaker, 'one', 'two' ]
//또는 다음 메소드를 사용하여 호출하세요.
arrayMaker['make']('one', 'two') // => [ arrayMaker, 'one', 'two' ]

여기와 지금 차이점을 확인하세요. this의 값은 객체 자체가 됩니다.
당신은 질문할 수 있습니다: 원래 함수 정의는 변경되지 않지만 이것이 변경되는 이유는 무엇입니까?
아주 좋습니다. 의심하시는 것이 맞습니다. 이는 JavaScript에서 함수가 전달되는 방식과 관련이 있습니다.
정확히 말하면 객체를 전달하거나 복사할 수 있습니다.
전체와 같습니다. function 매개변수 목록과 함수 본문이 모두 복사되고
이 arrayMaker의 make 속성에 할당됩니다. 이는 다음과 같이 arrayMaker를 정의하는 것과 같습니다.

복사 code 코드는 다음과 같습니다:

var arrayMaker = {

someProperty: 'some value here',
make: function (arg1, arg2 ) {
return [ this, arg1, arg2 ];
}
};


두 번째 호출 규칙을 이해하지 못하면 종종 다양한 문제에 직면하게 됩니다. 이벤트 처리 코드 버그, 예:

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

< ;input type= "button" value="Button 1" id="btn1" />

;input type= "button" value="Button 3" id="btn3" onclick="buttonClicked();"/>
< script type="text/javascript"> ){
var text = (this === window) ? 'window' : this.id;
alert( text )
}
varbutton1 = document.getElementById('btn1') ;
var 버튼2 = document.getElementById('btn2');
button1.onclick =
button2.onclick = function(){
buttonClicked()
< / script>


첫 번째 버튼을 클릭하면 "btn1"이 표시됩니다. 이는 메서드 호출이고 이것이 속한 개체(버튼 요소)이기 때문입니다. 그러니 주의해주세요:

코드 복사


코드는 다음과 같습니다:

button1 .onclick = 버튼클릭; button2.onclick = function(){ buttonClicked() };

이 포인터는 다릅니다.
JavaScript 함수 호출 규칙 3
물론 jQuery 라이브러리를 사용하는 경우에는 너무 많이 생각할 필요가 없습니다. 현재 항목에 대한 참조가 포함되도록 이 값을 다시 작성하는 데 도움이 됩니다. 이벤트 소스 요소.

코드 복사


코드는 다음과 같습니다.

//jQuery 사용 $( '#btn1').click( function() { alert( this.id ); // jQuery는 'this'가 버튼임을 보장합니다 });
그럼 jQuery는 어떻게 this의 값을 오버로드하나요?
답은 다음과 같습니다: call() 및 apply()
함수를 점점 더 많이 사용하면 필요한 this가 아니라는 것을 알게 됩니다. 같은 맥락에서 이는 의사소통을 극도로 어렵게 만듭니다.
Javascript에서 함수는 객체이기도 합니다. 함수 객체에는 사전 정의된 메소드가 포함되어 있으며 그 중 두 가지는 apply() 및 call()의 컨텍스트를 재설정하는 데 사용할 수 있습니다.

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

< script type="text/javascript">
function 버튼클릭(){
var text = (this = == 창) ? '창' : this.id;
}
varbutton1 = document.getElementById('btn1'); .getElementById( 'btn2');
button1.onclick =
button2.onclick = function(){
buttonClicked.call(this) // btn2
}; ; /script> ;


규칙 4를 호출하는 JavaScript 함수
(1) 생성자

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( 'first', 'second' )
am.getArray( );
// = > [ am, 'one' , 'two' ]
other.getArray()
// => [ other, 'first' ]


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

이런 식으로 초기화 함수의 코드는 다음과 같습니다. 언어로 작성된 다른 초기화 함수에서 사용하는 코드와 동일하며 이 값이 생성할 객체가 됩니다.
요약
이를 통해 차이점을 이해할 수 있기를 바랍니다. 다양한 함수를 호출하여
JavaScript 코드에 버그가 없도록 하세요.
이것의 가치를 아는 것이 버그를 피하는 첫 번째 단계입니다.