¿Puedo agregar atributos al objeto 'ventana' en javascript?

Question

¿Puedo agregar cualquier atributo aleatorio al objeto 'ventana' en javascript? Algo así como:

window.my_own_attr = "my_value" 

¿Tiene algún efecto secundario con alguna biblioteca? ¿Y es compatible con varios navegadores?

Answer 1

¿Puedo agregar cualquier atributo aleatorio al objeto 'ventana' en javascript?

Sí, como usted ha demostrado.

¿Tiene algún efecto secundario con alguna biblioteca?

No, a menos que use una biblioteca que establece una propiedad que sobrescribe.

¿Y es compatible con varios navegadores?

Sí, completamente.

---

Habiendo dicho eso, esta práctica es generalmente mal vista. Podrías terminar sobrescribiendo algo que no quieres.

Answer 2

Sí, puede, pero en general no debería.

El objeto window es también el objeto "global" predeterminado de JS, por lo que todas las variables globales se agregan allí.

Es poco probable que rompa nada a menos que sobrescriba una propiedad que ya está allí, pero se considera una mala práctica volcar variables en window, o de lo contrario crear muchas variables globales.

Answer 3

Eso funcionará bien, no hay conflicto con ninguna biblioteca hasta que se use el mismo nombre de variable, funcionará en todos los navegadores, pero no se recomienda ya que creará una variable global JS.

Answer 4

En todos los navegadores, window es el espacio de nombres global javascript. Cada propiedad o método 'vive' en ese espacio de nombres. Por lo tanto, si asigna una propiedad a window, es en efecto una variable global.

ejemplo:

window.myConstant = 5; 

function multiply(val){ 
    return myConstant * (val || 1); 
} 
multiply(10); //=> 50 
multiply(); //=> 5 

Hay que tener cuidado con javascript marcos. Por ejemplo, si declara window.JQuery y usa el marco JQuery, el espacio de nombres JQuery será reemplazado por su asignación, dejándolo inútil.

Answer 5

En IE si un elemento tiene un id, entonces ese nodo es accesible en el objeto de ventana como una propiedad:

<div id="num"></div>

alert(num); //Element

num = 3; //throws exception

var num = 3; //ok

Answer 6

No voy a repetir lo que otros han dicho sobre: ​​el hackyness de t su práctica. Pero puede ser increíblemente útil cuando se usa un marco rígido como Angular mezclado con código vainilla HTML/JS (o jQuery). Lo cual también es hacky y mal visto, pero a veces hay buenas razones, como si tienes muchos códigos JS preexistentes que serán difíciles de integrar en el marco.

La pregunta más interesante para mí es CÓMO hacer uso de la capacidad de agregar propiedades al objeto global window. Hay un patrón que uso cuando quiero exponer los métodos de un proveedor angular (servicio) a un código que de otro modo no podría inyectar el servicio, probablemente porque se ejecuta fuera del marco de DI angular. La forma en que lo hago es la siguiente:

1. Defina su servicio como proveedor en su módulo de nivel superior.
2. En el constructor o onInit de app.component.js (o lo que su componente de nivel superior es que las importaciones del proveedor), inyecte el proveedor normalmente, lleve a cabo cualquiera de inicialización de tiempo que necesita, y luego llamar a window['MyServiceName'] = this

Suponiendo que haya diseñado el proveedor para seguir un patrón de Singleton, los métodos de su proveedor ahora se pueden llamar de forma segura desde cualquier lugar. Una secuencia de comandos no angular necesita simplemente llamar al window['MyServiceName'].methodName()