Javascript object_javascript 기술의 setTimeout 및 setInterval에 대한 소개입니다.

Javascript에서 setTimeout과 setInterval이 받는 첫 번째 매개변수는 문자열 또는 함수입니다. 객체의 메소드 호출을 지연시키기 위해 객체에서 setTimeout을 사용할 때

코드를 복사하세요. 코드는 다음과 같습니다.

function obj() {
this.fn = function() {
alert("ok");
console.log(this);
setTimeout(this.fn, 1000);//현재 객체를 참조하려면 이를 직접 사용하십시오.
}
}
var o = new obj( );
o.fn();

그런 다음 위의 코드가 원하는 결과가 아니라는 것을 발견했습니다. 그 이유는 setTimeout의 이것이 창을 가리키기 때문입니다. window.fn 이 되고 정의되지 않으므로 비극이었습니다. 그래서 문제의 핵심은 현재 객체의 참조를 얻는 것이므로 다음 세 가지 방법이 있습니다

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

// 방법 1:

function obj() {
this.fn = function() {
alert("ok" );
console.log(this );
setTimeout(this.fn.bind(this), 1000);//Function.prototype.bind를 통해 현재 객체 바인딩
}
}
var o = new obj();
o.fn();

안타깝게도 Function.prototype.bind 메서드는 ES5의 새로운 표준입니다. IE 시리즈를 테스트한 결과 IE6-8에서는 지원되지 않으며 IE9만 사용할 수 있는 것으로 나타났습니다. 호환이 되려면 간단히 바인드를 시뮬레이트하면 됩니다. 아래 코드를 보세요

코드를 복사하세요 코드는 다음과 같습니다. 다음:

// 방법 2:
function obj() {
this.fn = function() {
alert("ok")
setTimeout( (function(a,b){
return function(){
b.call(a);
}
})(this,this.fn), 1000);//함수 시뮬레이션 .prototype.bind
}
}
var o = new obj();
o.fn();

먼저 현재 객체와 객체 메소드를 전달합니다. 자체 실행 익명 함수, 즉 내부 매개변수 a와 b는 클로저를 반환하고 호출 메서드를 사용하여 이 지점을 올바른 지점으로 만듭니다. 다음은 더 간단한 방법입니다

코드를 복사하세요 코드는 다음과 같습니다.

// 방법 3:
function obj() {
this.fn = function() {
var that = this;//현재 객체 저장 this
alert("ok")
setTimeout(function() {
that.fn();
}, 1000);//클로저를 통해 현재 범위를 가져오고
}
} var o = new obj();
o.fn();

위 세 번째 방법의 두 가지 핵심 사항은 현재 개체를 별칭으로 저장하고 가져오는 것입니다. 클로저를 통해 현재 범위, 중첩된 함수 또는 setTimeout, setInterval 및 기타 메서드의 여러 레이어가 개체 메서드에 있는 경우 저장된 개체에 액세스합니다. 즉, 이는 현재 개체가 아니라 창을 가리킵니다. ), 따라서 this가 가리키는 올바른 범위에 var that = this를 저장하면 매우 실용적입니다.