jQuery/JavaScript "this" puntero confusión

Question

El comportamiento de "esto" cuando se llama a la función bar me desconcierta. Vea el código a continuación. ¿Hay alguna manera de organizar "esto" para que sea una simple instancia de objeto js antiguo cuando se llama a la barra desde un manejador de clics, en lugar de ser el elemento html?

// a class with a method 

function foo() { 

    this.bar(); // when called here, "this" is the foo instance 

    var barf = this.bar; 
    barf(); // when called here, "this" is the global object 

    // when called from a click, "this" is the html element 
    $("#thing").after($("<div>click me</div>").click(barf)); 
} 

foo.prototype.bar = function() { 
    alert(this); 
} 

Answer 1

Bienvenido al mundo de javascript! : D

Se ha adentrado en el ámbito de alcance y cierre de JavaScript.

Para la respuesta corta:

this.bar() 

se ejecuta bajo el alcance de foo, (como este se refiere a foo)

var barf = this.bar; 
barf(); 

se ejecuta bajo la alcance global.

this.bar básicamente significa:

ejecutar la función señalado por this.bar, bajo el alcance de esta (foo). Cuando copió this.bar a barf, y ejecutar barf. Javascript entendido como, ejecuta la función apuntada por barf, y como no hay este, solo se ejecuta en alcance global.

Para corregir esto, se puede cambiar

barf(); 

a algo como esto:

barf.apply(this); 

Esto le dice Javascript para unir el alcance de esta a vomitar antes de ejecutarlo.

Para eventos jquery, deberá usar una función anónima o extender la función de vinculación en prototipo para admitir el alcance.

Para más información:

• Good explanation on scoping
• Extending jQuery bind to supportscoping

Answer 2

Esto se debe a este es siempre el caso en que la función está conectada. En el caso de un EventHandler, es la clase que activó el evento.

Usted puede ayudar a su auto con una función anónima como esto:

function foo() { 
    var obj = this; 
    $("#thing").after($("<div>click me</div>").click(function(){obj.bar();})); 
} 

foo.prototype.bar = function() { 
    alert(this); 
} 

Answer 3

Usted puede utilizar Function.apply en la función para establecer lo que this debería hacer referencia a:

$("#thing").after($("<div>click me</div>").click(function() { 
    barf.apply(document); // now this refers to the document 
}); 

Answer 4

Hay una buena explicación sobre this palabra clave en JavaScript disponible en QuirksMode.

Answer 5

Usted puede encontrar esto:

Controlling the value of 'this' in a jQuery event

o esto:

http://www.learningjquery.com/2007/08/what-is-this

útil.

Answer 6

conseguir el libro: JavaScript: las partes buenas.

También, leer tanto como sea posible por Douglas Crockford http://www.crockford.com/javascript/

Answer 7

this.bar(); // when called here, "this" is the foo instance 

este comentario está mal cuando foo se utiliza como una función normal, no como un constructor. aquí:

foo();//this stands for window