set Timeout 콜백에 올바른 "이" 컨텍스트를 전달하시겠습니까?

set Timeout 콜백에 올바른 "이" 컨텍스트를 전달하시겠습니까?

콘텍스트를 어떻게 전달합니까?setTimeout전화하고 싶다this.tip.destroy()한다면this.options.destroyOnHide1000밀리초 후내가 어떻게 그럴 수 있을까?

if (this.options.destroyOnHide) {
     setTimeout(function() { this.tip.destroy() }, 1000);
} 

위의 것을 시도해 보면,this창을 가리킵니다.

편집: 요약하면, 이 문제를 해결하기 위한 가장 일반적인 방법은 2010년에 이 질문을 받았을 때,setTimeout함수 호출이 이루어집니다.setTimeout를 사용하여 기능을 실행합니다.this글로벌 오브젝트를 가리키고 있습니다.

var that = this;
if (this.options.destroyOnHide) {
     setTimeout(function(){ that.tip.destroy() }, 1000);
} 

그 1년 전에 출시된 ES5 사양에서는 이 방법을 도입했습니다.아직 널리 지원되지 않고 사용하기 위해 폴리필이 필요하기 때문에 당초 답변에서는 권장되지 않았습니다.그러나 현재는 모든 곳에 도입되어 있습니다.

if (this.options.destroyOnHide) {
     setTimeout(function(){ this.tip.destroy() }.bind(this), 1000);
}

그bind함수는 새로운 함수를 만듭니다.this값이 미리 채워져 있습니다.

현재 현대 JS에서는 ES6에서 해결되는 문제 화살표 함수는 다음과 같습니다.

if (this.options.destroyOnHide) {
     setTimeout(() => { this.tip.destroy() }, 1000);
}

화살표 기능에는 다음이 없습니다.this그 자체의 값, 액세스 할 때,this동봉된 어휘 범위 값.

또한 HTML5는 2011년에 타이머를 표준화하여 콜백 함수에 인수를 전달할 수 있습니다.

if (this.options.destroyOnHide) {
     setTimeout(function(that){ that.tip.destroy() }, 1000, this);
}

다음 항목도 참조하십시오.

• set Timeout - '이'

@CMS가 응답한 기능 래퍼에 대한 기성 숏컷(통사설탕)이 있습니다. (아래의 가정은 다음과 같습니다.)this.tip.)

---

ECMAScript 2015 (모든 공통 브라우저 및 스마트폰, Node.js 5.0.0+)

거의 모든 Javascript 개발(2020년)에 ECMAScript 2015(Harmony/ES6/ES2015) 사양에 포함된 Fat Arrow 기능을 사용할 수 있습니다.

화살표 함수식(팻 화살표 함수라고도 함)은 함수식에 비해 구문이 짧고,this값 [...]

(param1, param2, ...rest) => { statements }

이 경우는, 다음과 같이 시험해 주세요.

if (this.options.destroyOnHide) {
    setTimeout(() => { this.tip.destroy(); }, 1000);
}

---

ECMAScript 5(구형 브라우저 및 스마트폰, Node.js) 및 프로토타입.js

ECMA-262, 5th Edition(ECMAScript 5), 또는 Node.js(2020년)와 호환되는 브라우저를 대상으로 하는 경우 를 사용할 수 있습니다.임의로 임의의 함수 인수를 전달하여 부분 함수를 만들 수 있습니다.

fun.bind(thisArg[, arg1[, arg2[, ...]]])

다시 한 번 말씀드리지만, 다음과 같습니다.

if (this.options.destroyOnHide) {
    setTimeout(this.tip.destroy.bind(this.tip), 1000);
}

동일한 기능이 프로토타입(다른 라이브러리?)에도 구현되어 있습니다.

Function.prototype.bind 커스텀의 역호환성을 필요로 하는 경우는, 이렇게 실장할 수 있습니다(단, 주의해 주세요).

---

j쿼리

1.4+ 를 사용하고 있는 는, 「jQuery 1.4+」, 「jQuery 1.4+」, 「jQuery 1.4+」를 기능이 this함수의 컨텍스트

jQuery.proxy(): 함수를 가져와 항상 특정 컨텍스트를 포함하는 새 함수를 반환합니다.

$.proxy(function, context[, additionalArguments])

이 경우는, 다음과 같이 시험해 주세요.

if (this.options.destroyOnHide) {
    setTimeout($.proxy(this.tip.destroy, this.tip), 1000);
}

---

밑줄.js, lodash

되며 Underscore.js ash lodash lod unders _.bind(...)^{1, 2}

함수를 오브젝트에 바인드합니다.즉, 함수가 호출될 때마다 값이this대상이 됩니다.필요에 따라 인수를 함수에 바인드하여 사전에 입력합니다.이치노

_.bind(function, object, [*arguments])

이 경우는, 다음과 같이 시험해 주세요.

if (this.options.destroyOnHide) {
    setTimeout(_.bind(this.tip.destroy, this.tip), 1000);
}

---

묶다 쿼리 언더스코어.삭제 에코스크립트-5 시제품 node.displaces(node.

Internet Explorer 이외의 브라우저에서는 지연 후 파라미터가 함수에 함께 전달됩니다.

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

다음과 같이 할 수 있습니다.

var timeoutID = window.setTimeout(function (self) {
  console.log(self); 
}, 500, this);

은 스코프 룩업()보다 퍼포먼스 합니다.this즉, 시간 초과/간격 표현식 사용).$.proxy ★★★★★★★★★★★★★★★★★」Function.prototype.bind

Web Reflection의 IE에서 동작하도록 하기 위한 코드:

/*@cc_on
(function (modifierFn) {
  // you have to invoke it as `window`'s property so, `window.setTimeout`
  window.setTimeout = modifierFn(window.setTimeout);
  window.setInterval = modifierFn(window.setInterval);
})(function (originalTimerFn) {
    return function (callback, timeout){
      var args = [].slice.call(arguments, 2);
      return originalTimerFn(function () { 
        callback.apply(this, args) 
      }, timeout);
    }
});
@*/

메모: IE에서는 동작하지 않습니다.

var ob = {
    p: "ob.p"
}

var p = "window.p";

setTimeout(function(){
    console.log(this.p); // will print "window.p"
},1000); 

setTimeout(function(){
    console.log(this.p); // will print "ob.p"
}.bind(ob),1000);

를 사용하고 있는 경우는,bind.

예.

if (this.options.destroyOnHide) {
     setTimeout(_.bind(this.tip.destroy, this), 1000);
}

TypeScript를 사용하는 경우 함수를 다음과 같이 매개 변수로 전달할 수 있습니다.

setTimeout(this.tip.destroy, 1000);

★★★★★★★★★★★★★★★★.this컨텍스트는 JavaScript의 화살표 함수에 콜을 캡슐화한 것처럼 할당됩니다.

언급URL : https://stackoverflow.com/questions/2130241/pass-correct-this-context-to-settimeout-callback