La anulación es básicamente cuando define varias funciones o variables que tienen el mismo nombre, la última definida anulará todas las definidas anteriormente y cada vez que invoque una función, se ejecutará la última definida. La anulación generalmente ocurre cuando tiene varios archivos javascript en su página. Puede ser un archivo externo o el archivo que ha creado internamente. Esto suele ocurrir debido a la presencia de variables o funciones con el mismo nombre en el ámbito global.
Supongamos que tenemos los siguientes archivos:
Nombre de archivo: index.html
<!DOCTYPE html> <html> <head> <title>IIFE</title> <script src="script1.js"></script> <script src="script2.js"></script> <script src="app.js"></script> </head> <body></body> </html>
Este archivo ha vinculado script1.js, script2.js y app.js como archivos javascript externos que se detallan a continuación:
Nombre de archivo: script1.js
var arsalanGreeter = {};
arsalanGreeter.name = "Arsalan";
var greeting = "Hello ";
arsalanGreeter.sayHello = function() {
console.log(greeting + arsalanGreeter.name);
}
Nombre de archivo: script2.js
var johnGreeter = {}
johnGreeter.name = "John";
var greeting = "Hi ";
johnGreeter.sayHi = function() {
console.log(greeting + johnGreeter.name);
}
Nombre de archivo: app.js
arsalanGreeter.sayHello(); johnGreeter.sayHi();
Aquí app.js es responsable de invocar funciones dentro de script1.js y script2.js y obtendrá el siguiente resultado en la ventana de su consola como se muestra a continuación: 
Bueno, esto sucede porque tenemos el mismo nombre de variable en script1.js y script2.js como «saludo». Esta es la razón por la que script2.js reemplaza a script1.js.
Para solucionar este problema, utilizaremos el concepto de expresión de función invocada inmediatamente (IIFE) como se describe a continuación:
Ahora nuestros archivos se verán así:
Nombre de archivo: index.html
<!DOCTYPE html> <html> <head> <title>IIFE</title> <script src="script1.js"></script> <script src="script2.js"></script> <script src="app.js"></script> </head> <body></body> </html>
Nombre de archivo: script1.js
(function (window) {
var arsalanGreeter = {};
arsalanGreeter.name = "Arsalan";
var greeting = "Hello ";
arsalanGreeter.sayHello = function() {
console.log(greeting + arsalanGreeter.name);
}
window.arsalanGreeter = arsalanGreeter;
})(window);
Nombre de archivo: script2.js
(function (window) {
var johnGreeter = {};
johnGreeter.name = "John";
var greeting = "Hi ";
johnGreeter.sayHi = function() {
console.log(greeting + johnGreeter.name);
}
window.johnGreeter = johnGreeter;
})(window);
En los dos archivos anteriores, creamos IIFE y pasamos a la variable de ventana e invocamos eso.
Nombre de archivo: app.js
arsalanGreeter.sayHello(); johnGreeter.sayHi();
Después de hacer los cambios mencionados anteriormente que agregan la expresión de función invocada inmediatamente, la salida de la consola se verá como se muestra a continuación:
Publicación traducida automáticamente
Artículo escrito por MohdArsalan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA