разница JS между типами глобальных переменных

Question

В соответствии с этим:

(function(window) { 
    window.MyClass1 = function(val) { 
     this.val = val; 
     console.log(this.val); 
    }; 
}(window)); 

(function() { 
    window.MyClass2 = function(val) { 
     this.val = val; 
     console.log(this.val); 
    }; 
}()); 

(function() { 
    this.MyClass3 = function(val) { 
     this.val = val; 
     console.log(this.val); 
    }; 
}()); 

(function() { 
    MyClass4 = function(val) { 
     this.val = val; 
     console.log(this.val); 
    }; 
}()); 

new MyClass1('works1'); 
new MyClass2('works2'); 
new MyClass3('works3'); 
new MyClass4('works4'); 

на jsFiddle

В чем разница между MyClass1, MyClass2, MyClass3 и MyClass4? Не все ли они привязаны к объекту окна точно так же? Какая практика и почему?

Answer 1

В чем разница между MyClass1, MyClass2, MyClass3 и MyClass4? Не все ли они привязаны к объекту окна в точно так же?

Разница между MyClass1 и MyClass2.

MyClass3 не будет работать в строгом режиме, поскольку this внутри IIFE будет undefined, не равное window.

MyClass4 не будет работать в строгом режиме, потому что строгий режим запрещает неявные глобальные переменные (переменные, назначенные без объявления), такие как MyClass4.

В нестандартном режиме все четыре будут работать. На мой взгляд, неявные глобальные перемены просто злые (слишком подверженные несчастным случаям), поэтому MyClass4 следует исключить даже в нестрогом режиме. И, если MyClass3 хочет назначить window, кажется, что он может просто обратиться к window.MyClass3 (например, MyClass2), а не пройти через this, что делает код менее очевидным и несовместимым со строгим режимом.

Какая практика и почему?

Лучшей практикой будет реализация, которая работает как в строгом, так и в нестрогом режиме и максимально проста для достижения цели. Поскольку IIFE не добавляет никакой функциональности, которая используется, я не понимаю, почему это необходимо в этом обстоятельстве. Простота в некоторой степени определяется мнением, но я бы сказал, что ничего больше, чем это не требуется:

function MyClass1(val) { 
    this.val = val; 
    console.log(this.val); 
}; 

var x = new MyClass1("foo"); 
console.log(x.val);   // "foo"