Познакомьтесь с самыми аутентичными и простыми для понимания замыканиями, мама больше не боится интервьюера, задающего вопросы

Затененная ткань

Во-первых, что такое закрытие? Вы можете понимать это как разделение переменных в двух отключенных областях.
Дайте каштан:

function foo() {
	var a = 10;
	function bar () {
		console.log(a);
	}
	return bar;
}
foo()();// 10 请注意这里的10怎么来的。

Вы заметили, что переменные внутри функции foo используются ниже глобальной области видимости, это закрытие! ! !

Область действия функциональной панели покрывает функцию foo. Мы передаем ссылку на функцию bar в качестве возвращаемого значения, а затем мы можем использовать ссылку на функцию foo в ссылке.

Волшебства самого замыкания здесь нет. Вообще говоря, область foo собирается сборщиком мусора после завершения выполнения функции foo, но ее здесь нет, потому что есть ссылка на область действия foo. Передано, то есть bar, bar имеет указатель на переменную a, поэтому область действия foo не восстанавливается после использования функции foo. bar по-прежнему содержит ссылку на область действия foo, которая называется замыканием.

Есть также различные закрытия функций.

function foo() {
	var a = 2;
	function baz() {
	console.log( a ); // 2
}
	bar( baz );
}
function bar(fn) {
	fn(); // 妈妈快看呀，这就是闭包！
}

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

function wait(message) {
	setTimeout( function timer() {
		console.log( message );
	}, 1000 );
}
wait( "Hello, closure!" );

Внутренняя область таймера не исчезает через 1000 миллисекунд, а затем содержит ссылку на сообщение.

2. Петли и замыкания

for (var i=1; i<=5; i++) {
	setTimeout( function timer() {
		console.log( i );
	}, i*1000 );
}

В моем другом небольшом пункте знаний о внешнем интерфейсе я упомянул, что здесь есть переменная реклама, и она будет печатать каждый раз 6. Небольшое объяснение, потому что после задержки функции я перейду к поиску RHS для ссылки на i. i = 6, изначально мы хотели получить копию i на каждой итерации, но каждая итерация является общей областью действия, поэтому все, что мы находим, это 6:
если мы изменим код, добавив принцип области действия, Давайте попробуем:

for (var i = 0; i < 5; i++) {
	(function () {
		setTimeout( function timer() {
			console.log( i );
		}, i*1000 );
	})();
}

Это все в порядке? Ха-ха-ха-ха, все еще не работает, потому что наша лексическая область пуста, нам нужно установить для него личный атрибут.

for (var i = 0; i < 5; i++) {
		(function () {
			var j = i;
			setTimeout( function timer() {
				console.log( j );
			}, j*1000 );
		})();
	}

Это нормально, потому что я указываю на внутреннюю область j каждой внутренней анонимной функции!
Украсьте этот код:

	for (var i = 0; i < 5; i++) {
		(function (j) {
			setTimeout( function timer() {
				console.log( j );
			}, j*1000 );
		})(i);
	}

Конечно, если вы хотите закончить логику более кратко, вы можете использовать

for (let i = 0; i < 5; i++) {
	setTimeout( function timer() {
		console.log( i );
	}, i*1000 );
}

модуль

После понимания замыканий давайте разберемся, как использовать замыкания в целом.

function Car() {
	var name = "五菱宏光";
	var age = "2 年";	

	function sayName () {
		console.log(name);
	}

	function sayAge () {
		console.log(age);
	}
	function drive () {
		console.log('drived');
    }
    
    return {
        sayName: sayName,
        sayAge: sayAge,
        drive: drive
    }
}

var car = Car();
car.sayName();

Это использование модулей.
Источник идей для этого блога: (NEW) [美] -Kyle-Simpson-JavaScript, которого вы не знаете (Том 1)