javascript - peso - La mejor manera de definir una función?

no consumir lacteos adelgaza?

Question

Siempre aprendí a definir una función en JavaScript como esta:

function myFunction(arg1, arg2) { ... }

Sin embargo, recién estaba leyendo la guía de Google para Javascript , mencionó que debería definir métodos como este:

Foo.prototype.bar = function() { ... };

Pregunta : ¿Es "Foo" en el ejemplo un Objeto, o es un espacio de nombres? ¿Por qué no es el ejemplo de Google el siguiente código (que no funciona):

prototype.bar = function() { ... };

ACTUALIZACIÓN : en caso de que sea útil saber, el navegador de los usuarios llamará a todo mi JavaScript para mi aplicación web.

Answer 1

Funciona así:

(function(){ // create an isolated scope
    // My Object we created directly
    var myObject = {
        a: function(x,y) {
            console.log(''a'');
        },
        b: function(x,y) {
            console.log(''b'');
            this.a(x,y);
        }
    };
})();

(function(){ // create an isolated scope

    // Create a Object by using a Class + Constructor
    var myClass = function(x,y) {
        console.log(''myClass: constructor'');
        this.b(x,y);
    };
    myClass.prototype = {
        a: function(x,y) {
            console.log(''myClass: a'');
        },
        b: function(x,y) {
            console.log(''myClass: b'');
            this.a(x,y);
        }
    };

    // Define a function that should never inherit
    myClass.c = function(x,y) {
        console.log(''myClass: c'');
        this.a(x,y);
    };

    // Create Object from Class
    var myObject = new myClass();
    // Will output:
    // myClass: constructor
    // myClass: b
    // myClass: a

    // Define a function that should never inherit
    myObject.d = function(x,y) {
        console.log(''myObject: d'');
        this.a(x,y);
    };

    // Test the world is roung
    console.log(typeof myClass.c, ''should be undefined...'');
    console.log(typeof myClass.d, ''should be function...'');
})();

(function(){ // create an isolated scope
    // If you are using a framework like jQuery, you can obtain inheritance like so

    // Create a Object by using a Class + Constructor
    var myClass = function(x,y) {
        console.log(''myClass: constructor'');
        this.b(x,y);
    };
    myClass.prototype = {
        a: function(x,y) {
            console.log(''myClass: a'');
        },
        b: function(x,y) {
            console.log(''myClass: b'');
            this.a(x,y);
        }
    };

    // Create new Class that inherits
    var myOtherClass = function(x,y) {
        console.log(''myOtherClass: constructor'');
        this.b(x,y);
    };
    $.extend(myOtherClass.prototype, myClass.prototype, {
        b: function(x,y) {
            console.log(''myOtherClass: b'');
            this.a(x,y);
        }
    });

    // Create Object from Class
    var myOtherObject = new myOtherClass();
    // Will output:
    // myOtherClass: constructor
    // myOtherClass: b
    // myClass: a
})();

(function(){ // create an isolated scope
    // Prototypes are useful for extending existing classes for the future
    // Such that you can add methods and variables to say the String class
    // To obtain more functionality
    String.prototype.alert = function(){
        alert(this);
    };
    "Hello, this will be alerted.".alert();
    // Will alert:
    // Hello, this will be alerted.
})();

Editar: código fijo para que realmente se ejecute en tu navegador si copias y pegas :-)

Answer 2

La definición de una función de prototipo es útil cuando se crean constructores o ''clases'' en JavaScript. por ejemplo, un func que usted new

var MyClass = function(){};
MyClass.prototype.doFoo = function(arg){ bar(arg); }

pero no sirve de nada en las antiguas funciones de la biblioteca, por ejemplo

function doPopup(message){ /* create popup */};

Hay varios beneficios de usar una función de prototipo que incluye pero no se limita a

• velocidad
• uso de memoria
• extensibilidad

Pero, de nuevo, esto es en el contexto de la creación de constructores para ''clases'' instanciables

HTH

Answer 3

Sus dos ejemplos no son funcionalmente equivalentes. El primer ejemplo simplemente define una función (probablemente una función global, a menos que la defina dentro de otra función). El segundo ejemplo amplía el prototipo de un constructor. Piense que es como agregar un método a la clase Foo .

A menos que esté compilando una biblioteca de JavaScript, mi sugerencia sería no usar ninguna y usar algún tipo de sistema de espacio de nombres. Cree un único objeto global que actúe como un espacio de nombres a través del cual puede acceder a todas sus funciones.

var MyObject = {
    utils: {
        someUtil: function() {},
        anotherUtil: function() {}
    },
    animation: {
        // A function that animates something?
        animate: function(element) {}
    }
};

Entonces:

// Assuming jQuery, but insert whatever library here
$(''.someClass'').click(function() {
    MyObject.animation.animate(this);
});

Si desea emular clases en JavaScript, debe definir la "clase" como una función (la función misma es el constructor) y luego agregar métodos a través de la propiedad del prototype .

function Foo() {
    // This is the constructor--initialize any properties
    this.a = 5;
}
// Add methods to the newly defined "class"
Foo.prototype = {
    doSomething: function() { /*...*/ },
    doSomethingElse: function() { /*...*/ }
};

Entonces:

var bar = new Foo();
console.log(bar.a); // 5
bar.doSomething();
// etc...

Answer 4

=====> Actualización de 2017 <=====

Esta pregunta y respuestas tiene 7 años y está muy desactualizada. Esta respuesta incluye nueva sintaxis para las versiones de ES5 , ES6 y compatible con ES7 .

La mejor manera de definir una función?

No hay una "mejor" forma de definir una función. La forma de definir la función depende del uso previsto y la duración de la función.

Funciones globales

Definido como una declaración con el token de función seguido por el nombre de la función con camelcase minúscula

function functionName (arguments) {
    // function body
}

es preferible a la expresión de la función ...

var functionName = function (arguments) {
     // function body
}

... como la asignación a la variable de la función no se produce hasta que se ejecuta la línea de definición. A diferencia del método preferido que está disponible inmediatamente después del análisis antes de que se ejecute cualquier código.

const functionName = function(arguments){/*function body*/}
var functionName = function functionName(arguments){/*function body*/}
var functionName = function functionAltName(arguments){/*function body*/}

Objetos de función

Como una declaración de función con mayúsculas y minúsculas función nombre

function MyObjectFunction (arguments) {
    /*function body*/
    // if this function is called with the new token
    // then it exits with the equivalent return this;
}

const obj = new MyObjectFunction(foo);

Expresión de función anónima

Una práctica común es crear objetos a través de una función invocada inmediatamente que no tiene nombre (y por lo tanto es anónima)

;(function (arguments) { /*function body*/ } ("argument val"))

O

;(function(arguments){ /*function body*/ })("argument val")

NOTE la inclusión de ; antes de la función. Esto es muy importante ya que la apertura "(" evitará la inserción automática de punto y coma en cualquier código por encima de la función.

Expresión de función invocada inmediatamente.

const functionResult = (function (arguments) {
      /*function body*/
      return functionResult;
}());

const functionResult = (function (arguments) {
      /*function body*/
      return functionResult;
})();

Como const var o block const , let

Devolución de llamada anónima

Con ES6 debe usar la sintaxis de la función de flecha en lugar de las expresiones de función anónima.

 myArray.forEach((item,i) => {/*function body*/});
 myArray.filter(item => !item);
 setTimeout(() => {/*function body*/}, 1000);

Función como propiedades.

Usando la sintaxis abreviada de la función de declaración de objeto.

var myObj = {
    functionName (arguments) {/*function body*/},
}

// called 
myObj.functionName("arg");

es preferible sobre

var myObj = {
    functionName : function (arguments) {/*function body*/},
}

O a través de declaraciones de objeto de función

function MyObjectFunction(arguments){
     this.propertyFunction = function(arguments) { /*function body*/ }
     // or arrow notation is fine
     this.propertyFunction = (argument) => { /*function body*/ };
}

Funciones como prototipos

function MyObj (arguments) {
      MyObj.prototype.functionName = function(arguments) { /*function body*/ }
}

o

function MyObj (arguments) {}
MyObj.prototype.functionName = function(arguments) { /*function body*/ }

o

MyObj.prototype = {
    functionName(arguments) { /*function body*/ }
}

Answer 5

Foo es a la vez un objeto y un espacio de nombres. Ver esta pregunta

El uso de objetos como espacios de nombres evita colisiones de nombres. Siempre es una buena idea, pero especialmente cuando desarrolla y / o usa bibliotecas compartidas.

Si no espera hacer múltiples objetos Foo (y por lo tanto no necesita el estilo orientado a objetos), puede crear sus funciones como métodos en un objeto singleton:

var Foo = {}
Foo.bar = function() { ... }

o

var Foo = {
    bar: function() {...},
    quux: function() {...}
};

Entonces, simplemente llama a la función como:

Foo.bar()

(Este tipo de declaración es más o menos equivalente a un método estático en C ++ o Java).

Answer 6

Siempre aprendí a definir una función en JavaScript de esta manera: function myFunction(arg1, arg2) { ... }

Hay dos formas de definir una función. Ya sea como una declaración de función

function foo(...) {
    ...
}

O como una expresión de función

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

Lea más aquí .

Sin embargo, recién estaba leyendo la guía de Google para Javascript, mencionó que debería definir métodos como este: Foo.prototype.bar = function() { ... };

Esto está específicamente relacionado con la creación de métodos para objetos, no solo funciones normales y autónomas. Suponiendo que tiene la declaración de objeto base:

var Foo = function() {
    ...
};

Al igual que cualquier otra asignación, para asignar una función a la propiedad de un objeto, debe usar una expresión de asignación. Puedes hacer esto de dos maneras. La manera sucinta y común (como lo sugiere la referencia de Google)

Foo.prototype.bar = function() {};

O bien, si desea continuar utilizando la forma declarativa de definición de funciones

function bar() {
    ...
};
Foo.prototype.bar = bar;

Esto normalmente es más detallado de lo necesario, pero puede ser útil en situaciones en las que desee asignar el mismo método a múltiples prototipos de objetos.

Pregunta: ¿Es "Foo" en el ejemplo un Objeto, o es un espacio de nombres? ¿Por qué el ejemplo de Google no es el siguiente código (que no funciona): prototype.bar = function() { ... };

1. Foo es un objeto. Aunque el concepto puede expresarse mediante el uso de objetos estáticos, como lo he demostrado en mi respuesta a su otra pregunta , no existe el espacio de nombres en JavaScript. Además, especialmente en el código de ejemplo dado, es probable que Foo sea ​​un objeto instanciado, lo que impide que se comporte como un espacio de nombres.

2. Por supuesto, no funciona: el prototype no se ha definido como un objeto (a menos que, por supuesto, lo defina como tal). La propiedad prototype existe en cada objeto (una función también es un objeto), por lo que puede hacer Foo.prototype.bar = ...; . Lea más aquí .