2009-12-08 11 views
27

¿Los fragmentos de código JavaScript están debajo de algún tipo de declaración de función? Si no, ¿alguien puede dar una visión general de lo que son?Declaración de función de JavaScript

some_func = function(value) { 
    // some code here 
} 

y

show:function(value){ 
    // some code here 
} 

Respuesta

25

La primera de ellas es simplemente crear una función anónima y asignarlo a una variable some_func. Entonces, usar some_func() llamará a la función.

El segundo debe ser parte de una notación de objetos

var obj = { 
    show:function(value){ 
    // some code here 
    } 
}; 

Así, obj.show() llamará a la función

En ambos casos, se está creando una función anónima.Pero en el primer caso, simplemente lo estás asignando a una variable. Mientras que en el segundo caso lo está asignando como miembro de un objeto (posiblemente entre muchos otros).

+0

El paréntesis externo en 'obj' es superfluo –

+1

¡Oh! Una respuesta a una de mis publicaciones en SO sobre cómo escribir código usando el patrón del módulo decía que sin esos paréntesis, a veces las funciones anónimas pueden fallar. Todavía no recibí una explicación de por qué. No estoy seguro de si se aplican solo a patrones de módulos o a todas las funciones anónimas. Es por eso que los agregué. –

+0

Creo que es solo cuando evalúa un objeto como 'eval (" ({a: 1}) ")' – YOU

2

Una forma de hacerlo:

var some_func = function(value) { 
    // some code here 
} 

Otra forma:

function some_funct() { 
} 

embargo, otra forma:

var some_object={}; 
some_object["some_func"] = function() {}; 

o:

var some_object={}; 
some_object.some_func = function() {}; 

En otras palabras, son muchas formas de declarar una función en JS.


Su segundo ejemplo no es correcto.

+0

'some_object [" some_func "] = function() {};' es engorroso. El uso de la notación de punto es más claro: 'some_object.some_func = function() {};' –

+0

@Justin: ... ¡y otra forma de declarar una función! – jldupont

+0

La declaración es la misma (RHS), es solo la notación de acceso diferente (LHS);) –

1

La primera es una declaración de función asignada a una variable (al menos debería ser, a pesar de que primero falta la declaración de tipo de variable), la segunda probablemente esté relacionada con una declaración de objeto.

+0

La segunda forma se usa a veces en literales de objeto: 'some_obj = { init: function() {}, show: function() {} };' – MBO

+0

actualizó la publicación, la respuesta de @ senthil también es correcta. – yoda

4

En primer lugar es variable local (o global) con función anónima asignado.

var some_name = function(val) {}; 
some_name(42); 

En segundo lugar, es propiedad de algún objeto (o función con etiqueta delante) con función anónima asignada.

var obj = { 
    show: function(val) {}, 
    // ... 
}; 
obj.show(42); 

Las funciones son ciudadanos de primera clase en JavaScript, por lo que podría asignarlas a variables y llamar a esas funciones desde variables.

Incluso puede declarar la función con otro nombre que no sea la variable a la que se asignará esa función. Es útil cuando se desea definir métodos recursivos, por ejemplo, en lugar de esto:

var obj = { 
    show: function(val) { 
     if (val > 0) { this.show(val-1); } 
     print(val); 
    } 
}; 

se podría escribir:

var obj = { 
    show: function f(val) { 
     if (val > 0) { f(val-1); } 
     print(val); 
    } 
}; 
1

El primer ejemplo crea una variable global (si una variable local de ese nombre no existe todavía) llamada some_func, y le asigna una función, de modo que se puede invocar some_func().

El segundo ejemplo es una declaración de función dentro de un objeto. se asigna una función que el valor de la propiedad de un objeto show:

var myObj = { 
    propString: "abc", 
    propFunction: function() { alert('test'); } 
}; 

myObj.propFunction(); 
+0

Su notación JSON es incorrecta. –

+0

d'oh. Gracias por notarlo. si * eso * hubiera sido lo que quise escribir, no habría abordado la pregunta real: D –

0

El primero ...

some_func = function(value) { 
    // some code here 
} 

declara una variable y le asigna un anonymous function a ella, lo que equivale a ...

function some_func (value) { 
    // some code here 
} 

El segundo debe tener este aspecto ...

obj = { 
    show:function(value){ 
     // some code here 
    } 
} 
// obj.show(value) 

y equivalente a ...

//pseudo code 
class MyClass { 
    function show (value) { 
     // some code here 
    } 
} 
obj = new MyClass(); // obj.show(value) 

Saludos

+0

Sus dos últimos ejemplos no son equivalentes ya que no puede crear instancias literales de objeto (error: "TypeError: obj no es un constructor") 'var Obj = function() {this.show = function() {}; } 'es equivalente a tu pseudo código. –

+0

@Justin Johnson - ¡Oh! De Verdad? Entonces, ¿por qué funciona esto perfectamente? 'obj = {show: function (value) {alert (" work ");}} obj.show();' –

+0

Sí, realmente. No dije que 'obj.show()' no funciona, dije que tus ejemplos no son equivalentes. –

72

Hay seis maneras/contextos en los que para crear funciones:

1) notación estándar declarativa (más conocidos por la personas con antecedentes C)

function foo() {} 

Todo el resto son función expresiones:

2) como un método de un objeto literal

var obj = { 
    foo: function() {} 
}; 

3) Como un método de un objeto instanciado (creado cada vez new se exectued)

var Obj = function() { 
    this.foo = function() {}; 
}; 

4) Como método de un prototipo (creada sólo una vez, independientemente del número de veces que se ejecuta new)

var Obj = function() {}; 
Obj.prototype.foo = function() {}; 

5) Como una función anónima con una referencia (mismo efecto que # 1) *

var foo = function() {}; 

6) Como una función anónima inmediatamente ejecutado (completamente anónima)

(function() {})(); 

* Cuando Miro esta afirmación, considero el resultado. Como tal, realmente no los considero anónimos porque se crea inmediatamente una referencia a la función y, por lo tanto, ya no es anónima. Pero es lo mismo para la mayoría de las personas.

+0

¿Hay alguna razón para preferir # 1 o # 5? Veo el n. ° 5 en muchas librerías y ocasionalmente n. ° 1. – EsTeGe

+6

No importa, encontré la respuesta yo mismo aquí: http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ – EsTeGe

+0

Esto es brillante. +1. –

Cuestiones relacionadas