¿Cuál es el punto de void operator en JavaScript?


He visto a algunas personas usando el operador void en su código. También he visto esto en href atributos: javascript:void(0) que no parece nada mejor que javascript:;

Entonces, ¿cuál es la justificación de usar el operador void?

Author: Michał Perłakowski, 2009-03-20

3 answers

Explicación de su uso en enlaces :

Esta es la razón por la que bookmarklets a menudo envuelve el código dentro de void() o una función anónima que no devolver cualquier cosa para detener el navegador de intentar mostrar el resultado de ejecutando el bookmarklet. Para ejemplo:

javascript:void(window.open("dom_spy.html"))

Si utiliza directamente el código que devuelve algo (una nueva instancia de ventana en este caso), el navegador terminará mostrando que:

javascript:window.open("dom_spy.html");

En Firefox el arriba se mostrará:

[object Window]
 47
Author: Crescent Fresh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-09 06:11:41

El valor undefined no fue directamente accesible en JavaScript hasta ES1.3.

Por lo tanto, se incluyó un operador void <expression> para permitir el acceso a este valor.

A veces es útil, particularmente cuando se trabaja con la API Web (por ejemplo, controladores de eventos), para asegurarse de que el resultado de una expresión es consistente undefined.

Cuando se agregó la propiedad undefined al objeto global en ES1.3, la utilidad de void se volvió no obvia.

De ahí su pregunta.

 12
Author: Ben,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-31 21:38:12

Considere lo siguiente:

<a href="javascript:void(fish=document.getElementById('foo').value);void(document.getElementById('bar').value=fish);">With Void</a>

<a href="javascript:fish=document.getElementById('foo').value;document.getElementById('bar').value=fish;">Without Void</a>

<input type="text" id="foo" value="one fish" />
<input type="text" id="bar" value="no fish" />

El primer enlace intercambiará los valores de los campos de texto. El segundo enlace abrirá una nueva página con el texto "un pez". Si utiliza un javascript: link, en el momento en que una expresión devuelve algo que no sea null o undefined, el navegador interpretará eso como lo que debe hacer el enlace. Al envolver todas las expresiones / estados en una función void(), se asegura de que se ejecutará todo el fragmento de código. En estos días, esto es principalmente de uso en Bookmarklets, como el uso de un onclick atributo, o configurar controladores de eventos en bloques/archivos Javascript separados es la "norma".

Como a javascript: vs javascript:void(), la primera afirmación es ambigua. Usted está diciendo, "hey, quiero ejecutar un poco de javascript", pero entonces usted no proporciona ningún código. No está necesariamente claro lo que el navegador debe hacer aquí. Con la segunda declaración estás diciendo "oye, ejecuta un poco de javascript", y tu código eventualmente devuelve undefined, lo que el navegador sabe que significa"no hacer nada".

Ya que soy aquí, también señalaré que usar javascript: o javascript:void(); ha caído en desgracia con la mayoría de las personas que se preocupan por el marcado. Lo mejor que puedes hacer es que tu controlador onclick devuelva false, y que el enlace apunte hacia una página/recurso que tenga sentido para las personas que tienen javascript desactivado, o que están usando un bloqueador de javascript como NoScript.

 11
Author: Alan Storm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-31 17:13:53