> 웹 프론트엔드 > JS 튜토리얼 > Javascript 클래스에서 setTimeout_javascript 트릭 사용

Javascript 클래스에서 setTimeout_javascript 트릭 사용

PHP中文网
풀어 주다: 2016-05-16 19:06:26
원래의
1023명이 탐색했습니다.

최근 발생한 자바스크립트 테스트 문제, 내용은 다음과 같습니다.

댓글 부분에 자바스크립트 코드를 구현해 보시고, 다른 곳에
코드를 더 추가하시면 됩니다(구현할 수 없는 경우, 구현할 수 없는 이유를 설명하세요. ):

var Obj = function(msg){
this.msg = msg
this.shout = function(){
Alert(this.msg; );
}

this.waitAndShout = function(){
// 5초 후에 위의shout 메소드를 실행합니다.
}
}

var testObj = new Obj(" Hello, World!");
testObj.shout(); 솔직히 이전에는 Javascript 클래스에서 setTimeout/setInterval을 사용해 본 적이 없어서 처음에는 불가능하다고 생각했습니다. 하지만 곰곰이 생각해 본 결과, 달성할 수 있다는 것을 알게 되었습니다. 한발 물러서려면 5초마다 특정 명령문을 실행하는 것이 매우 쉽습니다. 예를 들어, 다른 요소를 고려하지 않고 질문의 함수는 다음과 같이 작성할 수 있습니다.

this.waitAndShout = function(){
setTimeout('this.shout()', 5000)
} 실행한 후에는 모두가 이 변수를 찾을 수 없다는 것을 알게 될 것입니다. 그런데 왜 그럴까요? setTimeout/setInterval이 실제로는 window 개체의 메서드이므로 window.setTimeout/window.setInterval로도 작성할 수 있다는 사실을 곧 깨닫게 될 것입니다. 그렇다면 위의 this.shout()은 매우 이해하기 쉽습니다. 이유는 실제로 window.shout()을 호출하기 때문에 실행할 수 없습니다.

이유를 알고 나면 해결하기가 매우 쉽습니다. 객체를 윈도우 객체에 바인딩하기만 하면 됩니다(Javascript의 흥미로운 객체 메커니즘에 흥미를 느낍니다). 그런 다음 위 함수를 약간 수정합니다.

this.waitAndShout = function() {
window.Obj = this
setTimeout('Obj.shout()', 5000) ;
} 그게 다입니다. 실제로

setTimeout('Obj.shout()', 5000); 은

window.setTimeout('window.Obj.shout()', 5000); , 이전에는 객체를 배열로 저장한 다음 참조로 호출하는 것을 생각했습니다. 코드는 다음과 같습니다.

function ObjectClass (property) {
this.property =
this; .id = ObjectClass.cnt;
ObjectClass.objects[ObjectClass.cnt] = this;
this.method = ObjectClass_method;

ObjectClass.cnt = 0; .objects = new Array();

function ObjectClass_method () {
setTimeout('ObjectClass.objects[' this.id '].method();', 5000)
} 🎜>
var obj1 = new ObjectClass('feelinglucky');
obj1.method(); 하지만 개인적으로는 위의 첫 번째 방법이 훨씬 더 명확하다고 생각합니다.

Postscript, Javascript에는 주의해서 다뤄야 할 영역이 많은 것 같습니다. 특히 객체 메커니즘은 더욱 그렇습니다. 앞서 말했듯이 자바스크립트는 다른 언어에 비해 복잡하지는 않지만, 생각만큼 간단하지는 않습니다.

PS: 이 질문을 완성한 후 Google은 여기, 여기 등 다른 형제들이 이미 이런 문제를 해결했음을 발견했으며 비교하고 참고할 수 있습니다.


---------------------------- ---------------------------------------

업데이트됨, Brother님 덕분에 Sheneyan 참고로 Closure를 통해 이를 달성하는 또 다른 방법이 있습니다.

var Obj = function(msg){
this.msg = msg; = function() {
경고(this.msg);
this.waitAndShout();

var _self = this; function() {
setTimeout(function(){_self.shout()}, 5000);
}
}

var testObj = new Obj("Hello, World!"); testObj.shout(); 이 질문은 더 이상 사람들에게 해를 끼치지 못할 것 같습니다 :^)


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿