rule_javascript 기술을 호출하는 javascript 함수

JavaScript 함수 호출 규칙 1

(1) 전역 함수 호출:
function makeArray( arg1, arg2 ){
return [this , arg1 , arg2 ]
}
함수를 정의하는 데 가장 일반적으로 사용되는 방법입니다. 나는 JavaScript를 배우는 사람들이 그 사용법에 익숙하다고 믿습니다.
호출 코드는 다음과 같습니다.
makeArray('one', 'two')
// => [ window, 'one', 'two' ]

이렇게 하면 됩니다. 전역 함수 호출이라고 할 수 있습니다.
왜 글로벌 기능이라고 하나요?
전역 개체 창의 메서드이므로
다음 메서드로 확인할 수 있습니다.
alert( typeof window.methodThatDoesntExist )
// => undefine

alert( typeof window.makeArray);
// => function

따라서 makeArray를 호출하는 데 사용한 메서드는 아래에서 호출한 메서드와 동일합니다.
window.makeArray('one', 'two') ;
// => [ window, 'one', 'two' ]

규칙 2를 호출하는 JavaScript 함수

(1) 객체 메소드 호출:
//객체 생성
var arrayMaker = {
someProperty: '여기에 일부 값',
make: makeArray
}

arrayMaker.make( 'one', 'two'); // => [ arrayMaker, 'one', 'two' ]
//또는 다음 메서드를 사용하여 호출합니다:
arrayMaker['make']('one' , 'two') ; // => [ arrayMaker, 'one', 'two' ]

이것과 지금의 차이점을 보면 this의 값이 객체 자체가 됩니다.
질문: 원래 함수 정의는 변경되지 않았지만 이것이 변경된 이유는 무엇입니까?

훌륭하다, 의심하는 게 맞다. 이는 JavaScript에서 함수가 전달되는 방식과 관련이 있습니다.
정확히 말하면 객체를 전달하거나 복사할 수 있습니다.
전체와 같습니다. function 매개변수 목록과 함수 본문이 모두 복사되고
이 arrayMaker의 make 속성에 할당됩니다. 이는 다음과 같이 arrayMaker를 정의하는 것과 같습니다.
var arrayMaker = {
someProperty: 'some value here. ',
make: function (arg1, arg2) {
return [ this, arg1, arg2 ]
}
}

두 번째 호출을 이해하지 못하는 경우 규칙을 적용하면 이벤트 처리 코드에서 다양한 버그가 자주 발생합니다. 예:





function 버튼클릭( ){
var text = (this === window) ? 'window' : this.id;
alert( text )
}
varbutton1 = document.getElementById('btn1') ;
var 버튼2 = document.getElementById('btn2');

button1.onclick =
button2.onclick = function(){
buttonClicked(); ;


첫 번째 버튼을 클릭하면 "btn1"이 표시됩니다. 이는 메서드 호출이고 이것이 속한 개체(버튼 요소)이기 때문입니다.
주의하시기 바랍니다:
button1.onclick = 버튼클릭;
button2.onclick = function(){
buttonClicked()
}; 차별화.


JavaScript 함수 호출 규칙 3


물론 jQuery 라이브러리를 사용한다면 그렇게 많이 생각할 필요는 없습니다. 현재 이벤트 소스 요소에 대한 참조가 포함되어 있는지 확인하기 위한 값입니다.
//jQuery 사용 $('#btn1').click( function() { alert( this.id ); // jQuery는 'this'가 버튼이 되도록 보장합니다
}) ;

그렇다면 jQuery는 어떻게 이 값을 오버로드합니까?
답은 다음과 같습니다: call() 및 apply()

함수를 점점 더 많이 사용하면 당신이 필요로 하는 것이 동일한 맥락에 있지 않다는 것을 알게 되었고, 이는 의사소통을 극도로 어렵게 만듭니다.

Javascript에서 함수는 객체이기도 합니다. 함수 객체에는 사전 정의된 메소드가 포함되어 있으며 그 중 두 가지는 apply() 및 call()을 사용하여 컨텍스트를 재설정할 수 있습니다.






functionbuttonClicked(){
var text = (this === window ) ? 'window' : this.id;
alert(text );
}
varbutton1 = document.getElementById('btn1')
doc.getElementById('btn2' );

buttonClicked;
button2.onclick = function(){
buttonClicked.call(this) //btn2
}; 🎜>
규칙 4를 호출하는 JavaScript 함수
(1) 생성자
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' ]
other.getArray()
// => [ other , 'first', 'second' ]

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

따라서 생성자 함수를 대문자로 시작하는 것이 좋은 습관입니다. 이는 호출할 때 이전 new 연산자를 잊지 않도록 알림으로 사용할 수 있습니다. 초기화 함수는 다음과 같습니다. 다른 언어로 작성하는 초기화 함수도 이와 유사하게 생성할 객체가 됩니다.