Javascript Closures - Какви са негативите?

JavaScript без затваряния има три^* обхвата за променливи: на ниво блок, на ниво функция и глобално. Няма обхват на ниво обект. Без затваряния знаете, че променливата е или декларирана в текущата функция, или в глобалния обект (защото там живеят глобалните променливи).

Със затварянето вече нямате тази увереност. Всяка вложена функция въвежда друго ниво на обхват и всички затваряния, създадени в тази функция, виждат (предимно) същите променливи като съдържащата функция. Големият проблем е, че всяка функция може да дефинира свои собствени променливи по желание, които скриват външните.

Правилното използване на затваряния изисква вие (a) да сте наясно как затварянията и var влияят на обхвата и (b) да следите в кой обхват са вашите променливи. В противен случай променливите могат да бъдат споделени случайно (или псевдопроменливите да бъдат загубени!) и могат да последват всякакви глупости.

Помислете за този пример:

function ScopeIssues(count) {
    var funcs = [];
    for (var i = 0; i < count; ++i) {
        funcs[i] = function() { console.log(i); }
    }
    return funcs;
}

Кратък, ясен... и почти сигурно счупен. Гледам:

x = ScopeIssues(10);

x[0]();   // outputs 10
x[1]();   // does too
x[2]();   // same here
x[3]();   // guess

Всяка функция в масива извежда count. Какво става тук? Виждате ефектите от комбинирането на затваряния с неразбиране на затворени променливи и обхват.

Когато затварянията са създадени, те не използват стойността на i по времето, когато са създадени, за да определят какво да изведат. Те използват променливата i, която е споделена с външната функция и все още се променя. Когато го извеждат, те извеждат стойността към момента на извикването. Това ще бъде равно на count, стойността, която е причинила спирането на цикъла.

За да поправите това преди let да съществува, ще ви трябва друго затваряне.

function Corrected(count) {
    var funcs = [];
    for (var i = 0; i < count; ++i) {
        (function(which) {
            funcs[i] = function() { console.log(which); };
        })(i);
    }
    return funcs;
}

x = Corrected(10);

x[0]();  // outputs 0
x[1]();  // outputs 1
x[2]();  // outputs 2
x[3]();  // outputs 3

От ES7 можете да използвате let вместо var и всяка итерация на цикъла основно ще получи своя собствена версия на i.

function WorksToo(count) {
    var funcs = [];
    for (let i = 0; i < count; ++i) {
        funcs[i] = function() { console.log(i); }
    }
    return funcs;
}

x = WorksToo(10);

x[0]();  // outputs 0
x[1]();  // outputs 1
x[2]();  // outputs 2
x[3]();  // outputs 3

Но това идва със собствени усложнения -- променливи с едно и също име и предназначение, в един и същ блок от код, сега са ефективно прекъснати. Така че не искате винаги да използвате let. Единственото истинско решение е всички да бъдат много по-наясно с обхвата.

Друг пример:

value = 'global variable';

function A() {
    var value = 'local variable';
    this.value = 'instance variable';
    (function() { console.log(this.value); })();
}

a = new A();  // outputs 'global variable'

this и arguments са различни; за разлика от почти всичко останало, те не се споделят през границите на затваряне^?. Всяко извикване на функция ги предефинира - и освен ако не извикате функцията като

• obj.func(...),
• func.call(obj, ...),
• func.apply(obj, [...]), or
• var obj_func = func.bind(obj); obj_func(...)

за да посочите this, тогава ще получите стойността по подразбиране за this: глобалният обект.^{^}

Най-често срещаният идиом за заобикаляне на проблема с this е да декларирате променлива и да зададете нейната стойност на this. Най-често срещаните имена, които съм виждал, са that и self.

function A() {
    var self = this;
    this.value = 'some value';
    (function() { console.log(self.value); })();
}

Но това прави self реална променлива с цялата потенциална странност, която произтича от това. За щастие, рядко се случва да искате да промените стойността на self, без да предефинирате променливата... но в рамките на вложена функция, предефинирането на self, разбира се, я предефинира и за всички функции, вложени в нея. И не можете да направите нещо подобно

function X() {
    var self = this;
    var Y = function() {
        var outer = self;
        var self = this;
    };
}

поради повдигане. JavaScript ефективно премества всички декларации на променливи в горната част на функцията. Това прави горния код еквивалентен на

function X() {
    var self, Y;
    self = this;
    Y = function() {
        var outer, self;
        outer = self;
        self = this;
    };
}

self вече е локална променлива преди outer = self да се изпълни, така че outer получава локалната стойност -- която в този момент е undefined. Току-що сте загубили препратката си към външния self.

^{* От ES7. Преди имаше само две и променливите бяха още по-лесни за проследяване. :P}

^{? Функциите, декларирани чрез ламбда синтаксис (ново за ES7), не предефинират this и arguments. Което потенциално усложнява още повече въпроса.}

^{^ По-новите интерпретатори поддържат така наречения „строг режим“: функция за включване, която има за цел да накара някои съмнителни кодови модели или да се провалят изцяло, или да причинят по-малко щети. В строг режим this по подразбиране е undefined, а не глобалния обект. Но това все още е някаква съвсем различна стойност от тази, с която обикновено възнамерявате да се забърквате.}