used - void(0) javascript href

jQuery/JavaScript "this" confusión de puntero

Question

El comportamiento de "esto" cuando se llama a la bar funciones 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! :RE

Te has adentrado en el ámbito de alcance y cierre de JavaScript.

Para la respuesta corta:

this.bar()

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

var barf = this.bar;
barf();

se ejecuta bajo el alcance global.

this.bar básicamente significa:

ejecuta la función señalada por this.bar, bajo el alcance de esto (foo). Cuando copiaste this.bar a barf, y ejecutas barf. Javascript entendido como, ejecutar la función señalada por Barf, y como no existe esto , solo se ejecuta en alcance global.

Para corregir esto, puedes cambiar

barf();

a algo como esto:

barf.apply(this);

Esto le dice a Javascript que vincule el alcance de esto a barf antes de ejecutarlo.

Para los eventos de jquery, necesitará 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:

• Buena explicación sobre el alcance
• La extensión de jQuery se une a supportscoping

Answer 2

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

Puede ayudarse a sí mismo con una función anónima como esta:

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

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

Answer 3

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

Answer 4

Obtenga el libro: JavaScript: las buenas partes.

Además, lea todo lo que pueda por Douglas Crockford http://www.crockford.com/javascript/

Answer 5

Puede encontrar esto:

Controlando el valor de ''esto'' en un evento jQuery

o esto:

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

Útil.

Answer 6

Puede usar Function.apply en la función para establecer a qué se debe referir:

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

Answer 7

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

este comentario es incorrecto cuando foo se usa como una función normal, no como un constructor. aquí:

foo();//this stands for window