JavaScript 역할 도메인 클로즈업 상세 정보

JavaScript Clock은 JS 개발 엔지니어가 반드시 깊이 이해해야 할 지식입니다.3월에 자신이 블로그인 을 썼는데 블로그에서 간단하게 클라이언트의 작업 과정을 논술하고 몇 가지 예시를 열거했을 뿐 꼬치꼬치 캐묻지 않고 이를 이해하지 못했다!
지금은 자바스크립트에 대해 더욱 깊이 있게 이해하면서 《당신이 모르는 자바스크립트(상권)》라는 책을 막 읽었기 때문에 기회를 타서 정리하고 밑바닥과 원리를 훑어보았다.
JavaScript에는 동적 역할 영역이 없으며 구문 역할 영역만 있습니다.어법 작용역은 코드를 쓰거나 정의를 말할 때 확정되고, 동적 작용역은 실행할 때 결정된다.패키지를 닫기 전에 먼저 우리는 어법 작용역이 무엇인지 알아야 한다. (작용역은 코드를 쓸 때 함수 성명의 위치에 의해 결정된다.)
1. 무엇을 폐쇄하는가
예 1:

function foo(){
	var a = 2;
	function bar(){
		console.log(a);
	}
	return bar;
}
var baz = foo();
bzz(); //2

foo()가 실행된 후에 일반적으로 쓰레기 회수 메커니즘이foo()의 전체 내부 작용역을 소각할 것이라고 여긴다.폐쇄는 이런 일의 발생을 막고 내부 작용역이 여전히 존재하도록 할 수 있다.bar () 는foo () 내부에 있기 때문에, foo () 작용역을 포함하는 패키지를 가지고 있으며, 이 작용역은 bar () 이후 언제든지 인용할 수 있도록 계속 살아남을 수 있습니다.
bar () 는 여전히 이 역할 영역에 대한 인용을 가지고 있으며, 이 인용을 폐쇄라고 합니다.
간단히 말하면 함수가 있는 어법 작용역을 기억하고 접근할 수 있을 때 함수가 현재 어법 작용역 밖에서 실행되더라도 폐쇄가 발생한다.
예 2:
어떤 방식으로 함수 유형의 값을 전달하든지 함수가 다른 곳에서 호출될 때 패키지를 닫는 것을 관찰할 수 있다.

function foo(){
	var a = 2;
	function baz(){
		console.log(a);
	}
	bar(baz);
}

function bar(fn){
	fn();	//  
}

예 3:
내부 함수(timer)를 setTimeout에 전달합니다.timer는wait() 작용역을 포함하는 패키지를 가지고 변수 메시지에 대한 인용을 가지고 있습니다.
wait () 가 1000밀리초 동안 실행되면 그 작용역은 사라지지 않으며,timer는 여전히wait () 작용역의 패키지를 가지고 있습니다.

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

예 4:
다음 activator () 는 setupBot () 역할 영역을 포함하는 패키지를 가지고 있습니다!

function setupBot(name, selector){
	$(selector).click(function activator(){
		console.log("Activating: "+ name);
	});
}
setupBot("Closure Bot 1", "#bot_1");
setupBot("Closure Bot 2", "#bot_2");

2. 순환과 폐쇄

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

먼저 설명하자면'i*1000'은 5개의 정시가 각각 1s, 2s, 3s, 4s, 5s 후에 실행되며 1s, 3s, 6s, 10s, 15s가 아니다.즉, 주파수는 1s로 매번 간격이 1s 증가하는 것이 아니다.i를 빼고'1000'이라고 쓰면 for가 1s를 실행한 후 6번을 다섯 번 출력합니다.
리셋 함수는 순환이 끝난 후에야 실행되기 때문에 순환 종료 조건은 i값입니다.사실상, 타이머가 실행될 때, 모든 교체가 setTimeout (..., 0) 으로 실행되더라도, 모든 리셋 함수는 순환이 끝난 후에야 실행됩니다.
작용역의 작업 원리에 따라 비록 다섯 개의 함수는 각 교체에서 각각 정의되었지만, 그것들은 모두 공유된 전역 작용역에 폐쇄되어 실제로는 하나의 i만 있다.
솔루션 1:

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

모든 교체는 새로운 작용역을 생성하여 지연 함수의 리셋을 통해 새로운 작용을 모든 교체 내부에 폐쇄할 수 있고, 모든 교체에는 정확한 값을 가진 변수가 포함되어 있습니다.
솔루션 2(ES6):

for(var i=0; i<=5; i++){
	let j = i;
	setTimeout(function timer(){
		console.log(j);
	}, j*1000 );
}
//  ： 1~5
for(let i=0; i<=5; i++){
	setTimeout(function timer(){
		console.log(i);
	}, i*1000 );
}
//  ： 6

모듈
모듈에는 다음과 같은 두 가지 필수 조건이 필요합니다.
(1) 외부 폐쇄 함수가 있어야 합니다. 이 함수는 최소한 한 번 호출되어야 합니다. 호출할 때마다 새로운 모듈 실례를 만듭니다.
(2) 폐쇄 함수는 최소한 하나의 내부 함수를 되돌려야 내부 함수가 사유 작용역에서 패키지를 형성하고 사유 상태에 접근하거나 수정할 수 있다.
일반적인 모듈화:

function CoolMoudle(){
	var something = "cool";
	var doSomething = function(){
		console.log(something);
	}
	return{
		doSomething: doSomething
	};
}
var foo = CoolMoudle();	// CoolMoudle()， 
foo.doSomething();	//cool

단일 모드:

var foo = (function CoolModule(id){
	function change(){
		//  API
		publicAPI.identify = identify2;
	}
	function identify1(){
		console.log(id);
	}
	function identify2(){
		console.log(id.toUpperCase());
	}
	var publicAPI = {
		change: change,
		identify: identify1
	};
	return publicAPI;
})("foo module");
foo.identify();	//foo module
foo.change();
foo.identify(); //FOO MODULE

다음은 JavaScript 역할 영역 클립에 대한 상세한 내용입니다. JavaScript 역할 영역 클립에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!