¿Pasar el contexto "this" correcto a la devolución de llamada de Timeout?

¿Cómo paso el contexto setTimeout? Quiero llamar this.tip.destroy()si this.options.destroyOnHidedespués de 1000 ms. ¿Cómo puedo hacer eso?

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

Cuando intento lo anterior, se thisrefiere a la ventana.

EDITAR: En resumen, en 2010, cuando se hizo esta pregunta, la forma más común de resolver este problema era guardar una referencia al contexto donde se realiza la setTimeoutllamada a la función, porque setTimeoutejecuta la función thisapuntando al objeto global:

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

En la especificación ES5, recién lanzada un año antes de ese momento, introdujo el bindmétodo , esto no se sugirió en la respuesta original porque aún no era ampliamente compatible y necesitabas polyfills para usarlo, pero ahora está en todas partes:

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

La bindfunción crea una nueva función con el thisvalor precargado.

Ahora en JS moderno, este es exactamente el problema que las funciones de flecha resuelven en ES6 :

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

Las funciones de flecha no tienen un thisvalor propio, cuando accede a él, está accediendo al thisvalor del ámbito léxico adjunto.

HTML5 también estandarizó los temporizadores en 2011, y ahora puede pasar argumentos a la función de devolución de llamada:

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

Ver también:

• setTimeout - El problema 'esto'

Hay atajos ya preparados (azúcar sintáctico) para el contenedor de funciones con el que respondió @CMS. (A continuación, suponiendo que el contexto que desea es this.tip).

ECMAScript 5 ( navegadores actuales , Node.js) y Prototype.js

Si apunta a un navegador compatible con ECMA-262, 5a edición (ECMAScript 5) o Node.js , puede usarlo Function.prototype.bind. Opcionalmente, puede pasar cualquier argumento de función para crear funciones parciales .

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

Nuevamente, en su caso, intente esto:

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

La misma funcionalidad también se ha implementado en Prototype (¿alguna otra biblioteca?).

Function.prototype.bindpuede implementarse de esta manera si desea compatibilidad con versiones anteriores personalizadas (pero tenga en cuenta las notas).

ECMAScript 2015 ( algunos navegadores , Node.js 5.0.0+)

Para el desarrollo de vanguardia (2015) puede utilizar las funciones de flecha gruesa , que forman parte de la especificación ( ejemplos ) ECMAScript 2015 (Harmony / ES6 / ES2015 ).

Una expresión de función de flecha (también conocida como función de flecha gruesa ) tiene una sintaxis más corta en comparación con expresiones de función y enlaza léxicamente el thisvalor [...].

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

En su caso, intente esto:

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

jQuery

Si ya está utilizando jQuery 1.4+, hay una función lista para configurar explícitamente el thiscontexto de una función.

jQuery.proxy () : toma una función y devuelve una nueva que siempre tendrá un contexto particular.

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

En su caso, intente esto:

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

Underscore.js , lodash

Está disponible en Underscore.js, así como lodash, como _.bind(...)^{1 , 2}

enlazar Vincula una función a un objeto, lo que significa que siempre que se llame a la función, el valor dethisserá el objeto. Opcionalmente, vincule argumentos a la función para completarlos previamente, también conocida como aplicación parcial.

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

En su caso, intente esto:

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

enlazar jquery underscore.js ecmascript-5 prototypejs node.js

En navegadores que no sean Internet Explorer, puede pasar parámetros a la función juntos después del retraso:

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

Entonces, puedes hacer esto:

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

Esto es mejor en términos de rendimiento que una búsqueda de alcance (almacenamiento thisen caché en una variable fuera del tiempo de espera / expresión de intervalo), y luego crear un cierre (mediante el uso de $.proxyo Function.prototype.bind).

El código para hacerlo funcionar en IE de Webreflection :

/*@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);
    }
});
@*/

NOTA: Esto no funcionará en 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);

Si está usando underscore, puede usarbind .

P.ej

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