자바스크립트에서 클로저란 무엇인가요? 자바스크립트 클로저를 사용하는 방법은 무엇입니까?
- 伊谢尔伦원래의
- 2017-07-20 15:10:321698검색
소위 "클로저"는 많은 변수와 이러한 변수에 바인딩된 환경을 포함하는 표현식(일반적으로 함수)을 의미하므로 이러한 변수도 표현식의 일부입니다.
클로저와 관련하여 가장 간단한 설명은 ECMAScript가 내부 함수의 사용을 허용한다는 것입니다. 즉, 함수 정의와 함수 표현식이 다른 함수의 함수 본문에 위치합니다. 또한 이러한 내부 함수는 모든 지역 변수, 매개변수 및 해당 함수가 존재하는 외부 함수에 선언된 기타 내부 함수에 액세스할 수 있습니다. 이러한 내부 함수 중 하나가 이를 포함하는 외부 함수 외부에서 호출되면 클로저가 형성됩니다. 즉, 외부 함수가 반환된 후에 내부 함수가 실행됩니다. 이 내부 함수가 실행되면 여전히 외부 함수의 지역 변수, 매개변수 및 기타 내부 함수에 액세스해야 합니다. 이러한 지역 변수, 매개변수, 함수 선언(초기)의 값은 외부 함수가 반환될 때의 값이지만 내부 함수의 영향도 받습니다.
요컨대 클로저의 기능은 out 함수가 실행되고 반환된 후 Javascript의 가비지 수집 메커니즘인 GC가 out 함수가 점유한 리소스를 회수하는 것을 방지하는 것입니다. out 함수의 변수에 따라 다릅니다.
클로저의 두 가지 특징:
1. 함수 변수에 대한 참조로서 - 함수가 반환될 때 활성화됩니다.
2. 클로저는 함수가 반환될 때 리소스를 해제하지 않는 스택 영역입니다.
예제 1:
<script type="text/javascript">
function setupSomeGlobals() {
// Local variable that ends up within closure
var num = 666;
// Store some references to functions as global variables
gAlertNumber = function() { alert(num); }
gIncreaseNumber = function() { num++; }
gSetNumber = function(x) { num = x; }
}
</script>
<button onclick="setupSomeGlobals()">生成 - setupSomeGlobals()</button>
<button onclick="gAlertNumber()">输出值 - gAlertNumber()</button>
<button onclick="gIncreaseNumber()">增加 - gIncreaseNumber()</button>
<button onclick="gSetNumber(5)">赋值5 - gSetNumber(5)</button>예제 2:
<script type="text/javascript">
function newClosure(someNum, someRef) {
// Local variables that end up within closure
var num = someNum;
var anArray = [1,2,3];
var ref = someRef;
return function(x) {
num += x;
anArray.push(num);
alert('num: ' + num +
' nanArray ' + anArray.toString() +
' nref.someVar ' + ref.someVar);
}
}
var closure1 = newClosure(40, {someVar:' never-online'})
var closure2 = newClosure(99, {someVar:' BlueDestiny'})
closure1(4)
closure2(3)
</script>예제 3:
<script language="javascript">
/* 声明一个全局变量 - getImgInPositionedDivHtml - 并将一次调用一个外部函数表达式返回的内部函数赋给它。
这个内部函数会返回一个用于表示绝对定位的 DIV 元素包围着一个 IMG 元素 的 HTML 字符串，这样一来，
所有可变的属性值都由调用该函数时的参数提供：
*/
var getImgInPositionedDivHtml = (function(){
/* 外部函数表达式的局部变量 - buffAr - 保存着缓冲数组。这个数组只会被创建一次，生成的数组实例对内部函数而言永远是可用的
因此，可供每次调用这个内部函数时使用。
其中的空字符串用作数据占位符，相应的数据
将由内部函数插入到这个数组中：
*/
var buffAr = [
'<div id="',
'', //index 1, DIV ID 属性
'" style="position:absolute;top:',
'', //index 3, DIV 顶部位置
'px;left:',
'', //index 5, DIV 左端位置
'px;width:',
'', //index 7, DIV 宽度
'px;height:',
'', //index 9, DIV 高度
'px;overflow:hidden;\"><img src=\"',
'', //index 11, IMG URL
'\" width=\"',
'', //index 13, IMG 宽度
'\" height=\"',
'', //index 15, IMG 调蓄
'\" alt=\"',
'', //index 17, IMG alt 文本内容
'\"><\/div>'
];
/* 返回作为对函数表达式求值后结果的内部函数对象。
这个内部函数就是每次调用执行的函数
- getImgInPositionedDivHtml( ... ) -
*/
return (function(url, id, width, height, top, left, altText){
/* 将不同的参数插入到缓冲数组相应的位置：
*/
buffAr[1] = id;
buffAr[3] = top;
buffAr[5] = left;
buffAr[13] = (buffAr[7] = width);
buffAr[15] = (buffAr[9] = height);
buffAr[11] = url;
buffAr[17] = altText;
/* 返回通过使用空字符串（相当于将数组元素连接起来）
连接数组每个元素后形成的字符串：
*/
return buffAr.join('');
}); //:内部函数表达式结束。
})();//自调用
alert(getImgInPositionedDivHtml);//显示返回的函数
alert(getImgInPositionedDivHtml("img.gif","img",100,50,0,0,"Test"));
</script>설명: 핵심 요령은 인라인 함수 표현식을 실행하여 추가 실행 환경을 만들고, 함수를 표현하는 것입니다. 표현식은 외부 코드에서 함수로 사용됩니다. 이때 버퍼배열은 함수식의 지역변수로 정의된다. 함수 표현식은 한 번만 실행하면 되며, 배열은 한 번 생성되고 이에 의존하는 함수에서 재사용될 수 있습니다.
위 내용은 자바스크립트에서 클로저란 무엇인가요? 자바스크립트 클로저를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!