Ver el jsfiddle.

Cuando ejecuto el siguiente código:

  var divs = $('div');

  // The first three methods of showing a div work
  divs.eq(0).show();
  (divs.eq(1).show)();
  var f = function() {
    divs.eq(2).show();
  }
  f();

  // But this doesn't. Why?
  var g = divs.eq(3).show;
  g();

El último método no muestra el div, y no hay error en la consola. Quiero usarlo porque quiero almacenar la función de manera concisa sin crear un bloque de funciones anónimo. Esto es lo que normalmente haría en Python. No puedo entender lo que sale mal aquí.

EDITAR: los comentarios realmente no me están ayudando a entender el problema. ¿Cómo se perdió this? ¿A qué cambió y por qué? ¿Por qué no sucede eso con (divs.eq(1).show)();?

2
Alex Hall 14 may. 2016 a las 22:18

3 respuestas

La mejor respuesta

Como ya se explicó en los comentarios, no funciona porque show() depende del valor de this.

El valor de this depende de cómo se llama una función :

  • Cuando se llama como una función "normal" (foo()), this se referirá al objeto global o undefined (en modo estricto).
  • Cuando se llama como método de objeto (obj.foo()), this se refiere al objeto (obj).

Comprender cómo funciona this en JS es crucial. Ver:

3
2 revs 23 may. 2017 a las 12:01

Cuando llama a g(), el valor de this no se establece en divs.eq(3). Aquí hay una forma de solucionarlo.

divs.eq(0).show();
(divs.eq(1).show)();
var f = function() {
  divs.eq(2).show();
}
f();

var div3 = divs.eq(3);
var g = div3.show;
g.call(div3);
0
cambunctious 14 may. 2016 a las 20:16

divs.eq(3).show es este código de función (échale un vistazo por console.log(g)):

(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(mb(b,!0),a,d,e)}

Eso {{X 0}} es a lo que la gente se ha referido.

La función g debe aplicarse a algo. Ese algo, en el primer caso fue a jQuery element (el div). Sin embargo, en el segundo caso, es el elemento #document.

0
rollingBalls 14 may. 2016 a las 20:08