2010-02-19 18 views
8

¿Quién puede explicar por qué los resultados son [20, 20, 10, 10] en este código:función javascript alcance

var x = 10; 
var foo = { 
    x: 20, 
    bar: function() { 
    var x = 30; 
    return this.x; 
    } 
}; 

console.log(
    foo.bar(), 
    (foo.bar)(), 
    (foo.bar = foo.bar)(), 
    (foo.bar, foo.bar)() 
); 

Enlaces a la especificación son recibidos

+0

en IE parece que la salida es 20,20, undefined, undefined .. – RameshVel

Respuesta

7

No puedo apuntarlo a las especificaciones, pero recomiendo leer Douglas Crockford's "Javascript: The good parts". Este libro lo ayudará a comprender la mayoría de las funciones extrañas pero geniales de JavaScript.

A partir de la pregunta:

  1. foo.bar(), this palabra clave en función de bar está obligado a foo objeto
  2. (foo.bar)() es el mismo que el anterior,
  3. En javascript puede asignar variables de derecha a izquierda varias veces

    z = 3; x = (y = z); console.log (x); // 3

Las funciones son variables como cualquier otra cosa. Así que está asignando la función foo.bar a foo.bar, pero el paréntesis hace que se devuelva la función asignada y luego se ejecuta.

(foo.bar = foo.bar)(); 
//is the same as 
var f = (foo.bar = foo.bar); 
f(); 
//and this also the same as: 
var f= foo.bar; 
f(); 

La función regresó de paréntesis no está obligado a nada, así this se referirá al objeto global, en el caso de los navegadores - al objeto window.

4 .. La cláusula (foo.bar, foo.bar)() es sólo por igual:

a = (3, 4); //last value is returned, first just parsed. 
//a contains 4 

var f = (foo.bar, foo.bar); 
//f contains body of foo.bar function, 
f() // is executed in the context of `global` object, eg. `window`. 

favor, lea acerca binding de funciones en JavaScript.

0

creo siguiente question será útil para esto.

0

Las dos primeras llamadas a funciones son equivalentes. Están llamando al método foobar en el contexto de foo - por lo tanto, el valor devuelto por this.x es el valor de foo 's x propiedad, que es 20.

Las dos segundas llamadas son sintaxis cuestionable/inválida. Intente ejecutar su código a través del JSLint y verá que escupe varios errores y luego se ahoga por completo. Mi mejor estimación sobre por qué devuelven 10 es que está intentando analizar su código en un caso en el que realmente no debería y se está confundiendo. 10 puede ser devuelto porque el navegador no puede determinar lo que está tratando de hacer y se encuentra por defecto en el alcance global (ventana) donde el valor de x es 10. Esto también explicaría el comentario de Ramesh Vel de que los segundos dos valores aparecen como undefined en IE. Debido al hecho de que la sintaxis no es válida, es probable que las diferentes implementaciones de JavaScript las manejen de forma diferente.

Cuestiones relacionadas