문제_자바스크립트 팁을 가리키는 jQuery AJAX 콜백 함수

예를 들어, 이것을 포함하는 객체가 전역 범위에서 호출되면 현재 객체의 this가 window를 가리킵니다. 이 점을 원하는 대로 만들기 위해 JavaScript는 이 점을 변경하는 두 가지 메서드, 즉 호출 및 적용을 제공합니다. 물론 이를 달성하기 위해 클로저를 사용하는 메서드도 있습니다. 이 문서에서는 예제를 통해 이러한 문제를 설명합니다.

먼저 데모 코드를 살펴보겠습니다. 이 코드는 데모용일 뿐 실제적인 의미는 없습니다.

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

//소켓 연결 실질적인 의미 없음 Object
var 소켓 =
{
connect: function(host, port)
{
alert('소켓 서버 연결 중, 호스트:' 호스트 ', 포트:' 포트) ;
}
};
//connect 메소드가 AJAX 콜백 함수로도 호출되는 인스턴트 메시징 클래스
function classIm()
{
this. 호스트 = '192.168.1.28';
this.port = '8080';
this.connect = function(data)
{
socket.connect(this.host, this.port);
};
}
//인스턴트 메시징 클래스 인스턴스화
var IM = new classIm()
//AJAX 요청, 여기서는 소켓 연결을 여는 것으로 가정합니다. 먼저 사용자의 WEB 로그인 성공 여부를 WEB를 통해 알아야 합니다
$.get('CheckWebLogin.aspx', IM.connect)
위의 예를 실행하면 팝업 호스트와 포트가 표시됩니다. 둘 다 정의되지 않았습니다. 이는 콜백 함수가 IM 객체를 가리키지 않고 jQuery의 AJAX 구성 객체인 ajaxSettings를 가리키기 때문입니다. jQuery 내부에서는 들어오는 콜백 함수 대신 s.success를 사용하여 실행하며, 성공 호출 객체는 아래 ajaxSettings 객체의 약어인 s이다.

ajaxSettings:
{
url: location.href,
global: true,
type: "GET",
contentType: "application/x-www-form -urlencoded",
processData: true,
async: true
}

이를 증명하려면 다음과 같이 코드를 수정하여 테스트하면 URL이 표시됩니다. , 전역, 유형, 콘텐츠 유형 및 기타 개체의 속성 이름:

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

this .connect = function(data)
{
for (var key in this)
{
alert(key)
}
}

이제 문제를 이해했으니 해결 방법을 찾아보겠습니다. 실제로 우리의 목적은 AJAX 콜백 함수 코드에서 this.connect(this.host, this.port)가 classIm의 인스턴스 객체 IM을 가리키거나, 소켓.connect() 메서드가 올바른 값을 얻을 수 있기를 바라는 것입니다. 매개변수 값. AJAX 콜백 함수의 예상되는 실행 결과를 얻기 위해 다음 메소드를 분석했습니다.

방법 1

대신 객체의 올바른 참조를 직접 전달합니다. 이 포인터 또는 객체 전송이라고 합니다. 이는 가장 일반적인 접근 방식입니다. 즉, 클래스가 인스턴스화될 때 변수를 사용하여 현재 개체에 대한 참조를 저장하고 이 변수를 사용하는 대신 후속 메서드에서 직접 이 변수를 사용하는 것입니다. 참고: 이 방법은 이것이 가리키는 내용을 실제로 변경하지 않습니다. 데모 코드는 다음과 같습니다. 두 코드의 전후 차이점에 주목하세요. 또한 코드의 다른 부분을 강조합니다.

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

var 소켓 =
{
connect: function(host, port)
{
alert('소켓 서버 연결 중, 호스트:' 호스트 ', 포트:' 포트)
}
}; )
{
var self = this;
this.host = '192.168.1.28';
this.port = '8080'; >{
socket.connect(self.host, self.port);
}
var IM = new classIm()
$.get('CheckWebLogin.aspx' , IM.connect);



방법 2

이 방향을 완전히 바꾸려면 적용 및 폐쇄를 사용하세요. 다음 메서드는 함수가 임시 변수 _method에 호출될 때 this 개체를 저장한 다음 클로저를 사용하여 반환된 함수 개체에 전달합니다. 호출 개체의 this 개체를 교체합니다. 대상 객체 thisObj. 이 방법은 많은 JavaScript 프레임워크의 관행이며, 아래의 Function 프로토타입 방법은 프로토타입 프레임워크에서 단순화한 것입니다. 먼저 함수 프로토타입에 Apply 메서드를 추가했습니다. 이 Apply는 스크립트에 내장된 적용이 아닙니다. 원하는 경우 다른 이름을 지정할 수 있습니다.


코드 복사

코드는 다음과 같습니다.

/**
* jQuery AJAX 콜백 함수 this 포인터를 변경하여
* @param {Object} thisObj 현재 this 포인터를 대체할 객체
* @return {Function} function(data){}
*/
Function.prototype.Apply = function(thisObj)
{
var _method = this
return function(data)
{
return _method.apply(thisObj,[data]);
};
}
var 소켓 =
{
connect: 함수(호스트, 포트)
{
alert('소켓 서버 연결 중, 호스트:' 호스트 ', 포트:' 포트)
}
}
function classIm()
{
this.host = ' 192.168.1.28';
this.port = '8080';
this.connect = function(data)
{
socket.connect(this.host, this.port); };
}
var IM = new classIm();
$.get('CheckWebLogin.aspx', IM.connect.Apply(IM))

방법 3
익명 콜백 함수에서 실제 콜백 처리 함수를 호출한다. 이 방법을 사용하면 동일한 문제를 해결할 수 있지만 코드가 약간 길고 중복되므로 실제 개발에서는 권장되지 않습니다. 이 메서드는 연결 메서드를 호출하는 개체가 여전히 IM 개체임을 확인하므로 이 개체가 IM 개체를 가리키는지 확인합니다. 코드는 다음과 같습니다.

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

$.get ('CheckWebLogin.aspx' , function(data){IM.connect(data)})