2010-09-02 20 views
162

Pensé que sería algo que fácilmente podría buscar en Google, pero quizás no estoy haciendo la pregunta correcta ...¿Cómo paso el contexto a una función?

¿Cómo configuro lo que "esto" se refiere a una función de JavaScript determinada?

por ejemplo, al igual que con la mayoría de las funciones de jQuery, tales como:

$(selector).each(function() { 
    //$(this) gives me access to whatever selector we're on 
}); 

¿Cómo escribo/llamar a mis propias funciones independientes que tienen una adecuada "este" de referencia cuando se le llama? Yo uso jQuery, así que si hay una manera específica de jQuery de hacerlo, sería ideal.

+0

Posible duplicado: http://stackoverflow.com/questions/520019/controlling-the-value-of-this-in-a-jquery-event/520417#520417 – user123444555621

+0

Sé que esto es una cuestión de edad , pero para otros que aterricen aquí, ve jQuery '$ .proxy' – RyBolt

Respuesta

240

Los métodos de JavaScript .call() y .apply() le permiten configurar contexto para una función.

var myfunc = function(){ 
    alert(this.name); 
}; 

var obj_a = { 
    name: "FOO" 
}; 

var obj_b = { 
    name: "BAR!!" 
}; 

Ahora puede llamar:

myfunc.call(obj_a); 

Qué alertaría FOO. A la inversa, pasar obj_b alertaría BAR!!. La diferencia entre .call() y .apply() es que .call() toma una lista separada por comas si le pasa argumentos a su función y .apply() necesita una matriz.

myfunc.call(obj_a, 1, 2, 3); 
myfunc.apply(obj_a, [1, 2, 3]); 

Por lo tanto, se puede escribir fácilmente una función hook utilizando el método apply(). Por ejemplo, queremos agregar una función al método jQuerys .css(). Podemos almacenar la referencia de función original, sobrescribir la función con código personalizado y llamar a la función almacenada.

var _css = $.fn.css; 
$.fn.css = function(){ 
    alert('hooked!'); 
    _css.apply(this, arguments); 
}; 

Desde el arguments objeto mágico es una matriz como objeto, que sólo lo puede transmitir a apply(). De esta forma, garantizamos que todos los parámetros pasan a la función original.

+2

. Solo un pequeño rumor: si necesitas llamar a la función repetidamente en referencia a' obj_a', por ejemplo, puedes crear una copia con 'var boud_myfunc = myfunc .bind (obj_a) 'y simplemente llame a' bound_myfunc() 'según sea necesario. – Will

37

Use:

_function.call(that, arg1, arg2, etc); 

Dónde that es el objetivo que desea this en la función de ser.

+0

'function' es una palabra clave reservada; considere actualizar su respuesta para incluir una función nombrada ya que 'function.call (...)' no es JavaScript válido. –

+0

@DanielAllen: Sin la definición del nombre de la función de muestra que proporcionaría, el código arrojará un error JS. Pero, actualicé el nombre de la función de muestra. – palswim

14

jQuery usa un método .call(...) para asignar el nodo actual a this dentro de la función que pasa como parámetro.

EDIT:

No tenga miedo de mirar dentro de código de jQuery cuando se tiene una duda, que todo está en clara y bien documentada Javascript.

es decir: la respuesta a esta pregunta es alrededor de la línea 574,
callback.call(object[ name ], name, object[ name ]) === false

1

Puede utilizar la función bind para establecer el contexto de this dentro de una función.

function myFunc() { 
    console.log(this.str) 
} 
const myContext = {str: "my context"} 
const boundFunc = myFunc.bind(myContext); 
boundFunc(); // "my context" 
Cuestiones relacionadas