javascript - usar - Agregar propiedades personalizadas a una función

title html css (8)

La búsqueda de una respuesta adecuada resultó difícil debido a la existencia de muchos otros problemas relacionados con mis palabras clave, por lo que le preguntaré aquí.

Como sabemos, las funciones en javascript son objetos y tienen sus propias propiedades y métodos (más propiamente, funciones istances, heredadas de Function.prototype).

Estaba considerando agregar propiedades personalizadas para una función (método), vamos a omitir el "¿por qué?" parte e ir directamente al código:

var something = { myMethod: function () { if (something.myMethod.someProperty === undefined) { something.myMethod.someProperty = "test"; } console.log(something.myMethod); } }

Cuando se inspecciona con Firebug DOM Explorer, la propiedad se define como se espera. Sin embargo, como no me considero un experto en JavaScript, tengo las siguientes preguntas:

¿Se puede considerar este método como "adecuado" y compatible con los estándares? Funciona en Firefox, pero hay muchas cosas que funcionan como se espera en los navegadores web y de ninguna manera son estándares.
¿Es este tipo de alteración de objetos al agregarles nuevas propiedades una buena práctica?

"necromancing" aquí, pero creo que toda gran pregunta necesita respuestas simples:

Sí y Sí *

Al asociar las propiedades a la función, se limpia el alcance, se mejora la legibilidad y se agrega cohesión lógica. Un beneficio adicional es que documenta la relación entre la función y las variables. Creo que es un diseño superior, mucho mejor que agregar variables en el alcance

Creé algunos ejemplos divertidos aquí y aquí. HERE Y AQUÍ

* Creo que vale la pena señalar que probablemente no veas esto muy a menudo. la mayoría de los desarrolladores probablemente no se dan cuenta de que es posible. Algunas personas están locas por cada gota de rendimiento ... "Los motores de JavaScript optimizan en función de la ''forma'' de un objeto ''..." blah blah blah ... ut Creo que puedes seguir la regla que tienes para Objects y para ti lo haré bien

Acepto que esta es una pregunta difícil que podría tener múltiples respuestas, por lo que prefiero hacer un ejemplo diferente:

Supongamos que tenemos una Array JavaScript, poblada por un generador:

var arr = [...new Array(10).keys()];

es decir

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Ahora queremos asignar esto a una nueva matriz: la misma longitud, aplicando alguna función, para poder usar la propiedad de función de map nativa:

arr = arr.map((value,index) => ++value)

Acabamos de hacer un value=value+1 y return, por lo que ahora la matriz se verá como

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Ok, ahora se supone que tiene un Object JavaScript como

var obj=new Object()

que se definió como la matriz anterior (por alguna razón loca):

arr.forEach((value,index) => obj[value]=value)

es decir

{0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9}

En este punto no podemos aplicar el mismo método de map ya que no está definido para un Object por lo que debemos definirlo como un nuevo prototype de un Object :

Object.defineProperty(Object.prototype, ''mapObject'', { value: function(f, ctx) { ctx = ctx || this; var self = this, result = {}; Object.keys(self).forEach(function(k) { result[k] = f.call(ctx, self[k], k, self); }); return result; } });

En este punto podríamos hacer lo mismo con la matriz antes:

obj=obj.mapObject((value,key) => ++value )

para que tengamos:

{0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 5: 6, 6: 7, 7: 8, 8: 9, 9: 10}

Puede ver que hemos actualizado solo los valores:

[...Object.keys(obj)] ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

y podemos volver luego a la matriz de salida:

[...Object.keys(obj).map(k=>obj[k])] [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Aquí está en el trabajo:

// Array.map var arr = [...new Array(10).keys()]; console.log("array", arr) arr = arr.map((value, index) => ++value) console.log("mapped array", arr) // new property Object.defineProperty(Object.prototype, ''mapObject'', { value: function(f, ctx) { ctx = ctx || this; var self = this, result = {}; Object.keys(self).forEach(function(k) { result[k] = f.call(ctx, self[k], k, self); }); return result; } }); // Object.mapObject var obj = new Object() arr = [...new Array(10).keys()]; arr.forEach((value, index) => obj[value] = value) console.log("object", obj) obj = obj.mapObject((value, key) => ++value) console.log("mapped object", obj) console.log("object keys", [...Object.keys(obj)]) console.log("object values", [...Object.keys(obj).map(k => obj[k])])

Adjuntar propiedades a funciones es una forma hermosa (posiblemente inactiva / piratea) de sobrecargar al operador () , que a su vez se usa generalmente para implementar functors : tipos de objetos que tienen un trabajo realmente importante y todas sus otras funcionalidades (si hay es alguno) es solo un grupo de ayudantes. También podría interpretar estos funtores como, básicamente, una función "con estado" donde el estado es público (la mayoría de las funciones en línea, por ejemplo, tienen un estado privado, es decir, un estado del ámbito local).

Este JSFiddle demuestra cómo podemos usar una función con propiedades personalizadas para una función de translator con utilidades adicionales:

/** * Creates a new translator function with some utility methods attached to it. */ var createTranslator = function(dict) { var translator = function(word) { return dict[word]; }; translator.isWordDefined = function(word) { return dict.hasOwnProperty(word); }; // Add more utilities to translator here... return translator; }; // create dictionary var en2deDictionary = { ''banana'': ''Banane'', ''apple'': ''Apfel'' }; // simple use case: var translator = createTranslator(en2deDictionary); var pre = $(''<pre>''); $("body").append(pre); pre.append(translator(''banana'') + ''/n''); pre.append(translator(''apple'') + ''/n''); pre.append(translator.isWordDefined(''w00t'') + ''/n'');

Como puede ver, esto es perfecto para un traductor cuyo único propósito es traducir. Por supuesto, hay muchos más ejemplos de estos tipos de objetos, pero por lejos no son tan comunes como los tipos con funcionalidades diversificadas, como los tipos clásicos de User , Car Animal , etc. Para ese tipo de tipos, solo desea agregar propiedades personalizadas en muy pocos casos. Por lo general, desea definirlos como clases más completas, y tener sus propiedades públicas accesibles a través de this y su prototype .

En primer lugar, es importante darse cuenta de que las propiedades de función estándar (argumentos, nombre, llamante y duración) no se pueden sobrescribir. Por lo tanto, olvídate de agregar una propiedad con ese nombre.

Agregar sus propias propiedades personalizadas a una función se puede hacer de diferentes maneras que deberían funcionar en cada navegador.

Agregar sus propias propiedades personalizadas a una función

Modo 1: agregar propiedades al ejecutar la función:

var doSomething = function() { doSomething.name = ''Tom''; doSomething.name2 = ''John''; return ''Beep''; }; console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2); console.log(''doSomething() : '' + doSomething()); console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2);

Salida:

doSomething.name : doSomething.name2 : undefined doSomething() : Beep doSomething.name : doSomething.name2 : John

Camino 1 (sintaxis alternativa):

function doSomething() { doSomething.name = ''Tom''; doSomething.name2 = ''John''; return ''Beep''; }; console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2); console.log(''doSomething() : '' + doSomething()); console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2);

Salida:

doSomething.name : doSomething doSomething.name2 : undefined doSomething() : Beep doSomething.name : doSomething doSomething.name2 : John

Camino 1 (segunda sintaxis alternativa):

var doSomething = function f() { f.name = ''Tom''; f.name2 = ''John''; return ''Beep''; }; console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2); console.log(''doSomething() : '' + doSomething()); console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2);

Salida:

doSomething.name : f doSomething.name2 : undefined doSomething() : Beep doSomething.name : f doSomething.name2 : John

Un problema con esta estrategia es que necesita ejecutar su función al menos una vez para asignar las propiedades. Para muchas funciones, obviamente eso no es lo que quieres. Entonces, consideremos las otras opciones.

Modo 2: agregar propiedades después de definir la función:

function doSomething() { return ''Beep''; }; doSomething.name = ''Tom''; doSomething.name2 = ''John''; console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2); console.log(''doSomething() : '' + doSomething()); console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2);

Salida:

doSomething.name : doSomething doSomething.name2 : John doSomething() : Beep doSomething.name : doSomething doSomething.name2 : John

Ahora, no necesita ejecutar su función primero antes de que pueda acceder a sus propiedades. Sin embargo, una desventaja es que sus propiedades se sienten desconectadas de su función.

Forma 3: ajuste su función en función anónima:

var doSomething = (function(args) { var f = function() { return ''Beep''; }; for (i in args) { f[i] = args[i]; } return f; }({ ''name'': ''Tom'', ''name2'': ''John'' })); console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2); console.log(''doSomething() : '' + doSomething()); console.log(''doSomething.name : '' + doSomething.name); console.log(''doSomething.name2 : '' + doSomething.name2);

Salida: