이 기사의 내용은 JavaScript 클로저 기능의 기본 사용법과 발생한 문제에 대한 해결책입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
인터뷰 때마다 클로저가 무엇인지 묻는 질문을 받았는데, 예전에는 요약은커녕 별로 관심도 없었습니다.
#🎜🎜 # 클로저 는 다른 함수의 내부 변수를 읽을 수 있는 함수입니다. 그래서 클로저란 본질적으로 함수 내부와 함수 외부를 연결하는 다리입니다.
少废话,上代码 还是<<javascript高级程序设计>>的栗子，
function createComparisonFunction(propertyName) {
return function(object1, object2) {
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if(value1 < value2) {
return -1;
} else if(value1 > value2) {
return 1;
} else {
return 0;
}
};
}
var compare = createComparisonFunction("name");
var result = compare({ name: "Nicholas" }, { name: "Greg" });(1) 클로저 함수는 외부 함수에 접근할 수 있습니다
return out 이 익명 함수는 클로저 함수입니다. 이 익명 함수의 외부 함수에 액세스하는 활성 개체는 propertyName 매개 변수입니다. 외부 범위 체인이 이 익명 함수에 포함되어 있기 때문에(비교 함수에
createComparisonFunction() 함수의 활성 개체와 전역 변수 개체가 포함되어 있다고 이해될 수도 있음), 반환된 익명 함수는 항상 해당 함수에 액세스할 수 있습니다. external 이 propertyName 및 전역 변수입니다.
(2) 클로저가 참조하는 외부 변수는 해당 변수가 위치한 범위가 파괴되어도 파괴되지 않습니다.
외부 함수의 활성 객체는 반환된 클로저 함수에서 참조되므로, 따라서 createComparisonFunction()이 실행된 후에 활성 개체(예: propertyName)가 삭제되지 않습니다. createComparisonFunction은 실행 후 실행 환경에서 범위 체인을 삭제하지만 해당 활성 객체는 여전히 클로저 함수에 의해 참조되고 익명 함수의 실행 환경 범위에 배치됩니다.
#🎜🎜 #(2) Side 클로저의 효과
(1). 클로저는 포함하는 함수에 있는 모든 변수의 마지막 값만 얻을 수 있습니다
function createFunctions(){
var result = new Array();
for (var i=0; i < 10; i++){
result[i] = function(){
return i;
};
}
return result;
}
var res = createFunctions();
console.log(res[0]()); //10
console.log(res[1]()); //10Principle:
Because createFunctions() 함수는 각 함수의 범위 체인에 저장되므로 모두 동일한 변수 i를 참조합니다. createFunctions() 함수가 반환되면 변수 i의 값은 10이 됩니다. 이때 각 함수는 변수 i를 저장하는 동일한 변수 객체를 참조하므로 각 함수 내부의 i 값은 10#🎜 🎜 #해결책:
获取内部函数的对象result[i]时,使用匿名函数,并在匿名函数中再使用闭包函数,使得当前环境下的num被闭包函数函数调用,存储在作用域中不会被释放.
function createFunctions2(){
var result = new Array();
for(var i = 0 ; i <10 ; i++){
result[i] = (function(num){
return function(){
return num
}
})(i)
}
return result;
}
var res2 = createFunctions2();
console.log(res2[0]()); // 0
console.log(res2[1]()); // 1익명 함수를 정의하고 익명 함수의 즉각적인 실행 결과를 배열에 할당합니다. 여기서 익명 함수에는 최종 함수에서 반환할 값인 매개 변수 num이 있습니다. 각 익명 함수를 호출할 때 변수 i를 전달합니다. 함수 매개변수는 값으로 전달되므로 변수 i의 현재 값이 매개변수 num에 복사됩니다. 이 익명 함수 내에서 num에 액세스하는 클로저가 생성되고 반환됩니다. 이렇게 하면 결과 배열의 각 함수에 num 변수의 자체 복사본이 있으므로 다른 값을 반환할 수 있습니다.
(2) 익명 함수가 클로저 함수 외부에 포함된 경우 이는 전역
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function () {
return function () { //匿名函数执行具有全局性
return this.name; //this指向window
};
}
};
console.log(object.getNameFunc()()) // The Window각 함수는 자동으로 두 개의 특수 함수를 가져옵니다. 변수: this 및 인수. 내부 함수
는 이 두 변수를 검색할 때 활성 객체까지만 검색하므로 외부 this를 얻을 수 없습니다. 이때 getNameFunc()는 익명 함수를 반환하며, 익명 함수는 전역입니다. 그래서 이것은 전역 창을 가리킵니다
해결책:
이 개체를 클로저가 액세스할 수 있는 변수의 외부 범위에 저장하여 클로저가 개체에 액세스할 수 있도록
var name2 = "The Window";
var object2 = {
name:"My Object",
getNameFunc:function(){
var that = this; //将外部函数的this保存在外部函数的活动对象中(函数中申明的变量中)
return function (){
return that.name
}
}
}
console.log(object2.getNameFunc()()) //My Object
(3)
(2) 클로저는 포함하는 함수에 있는 모든 변수의 마지막 값만 얻을 수 있으므로
#🎜🎜 쓰기에 주의하세요. #
칼럼
~
姧姧鲁
~
~
3분 전에 게시됨
7번 읽으세요
읽는 데 12분이 걸립니다.
~
~
~
被 면접 때 클로저가 무엇인지 질문을 받았는데, 예전에는 크게 신경 쓰지 않았고, 요약하고 유도하지도 않았습니다. 
클로저 다른 함수 내부 변수를 읽을 수 있는 함수 .
(1) 클로저의 가장 기본적인 적용:
少废话,上代码 还是<<javascript高级程序设计>>的栗子，
function createComparisonFunction(propertyName) {
return function(object1, object2) {
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if(value1 < value2) {
return -1;
} else if(value1 > value2) {
return 1;
} else {
return 0;
}
};
}
var compare = createComparisonFunction("name");
var result = compare({ name: "Nicholas" }, { name: "Greg" });분석:
(1) 클로저 함수는 외부 함수에 액세스할 수 있습니다.
반환된 익명 함수는 클로저 함수이며, 외부 함수는 이 익명 함수에서 액세스됩니다. 개체는 propertyName 매개변수입니다. 외부 범위 체인이 이 익명 함수에 포함되어 있기 때문에(비교 함수에는 createComparisonFunction() 함수의 활성 객체와 전역 변수 객체가 포함되어 있다고 이해될 수도 있음), 반환된 익명 함수는 항상 외부 propertyName 및 Global에 액세스할 수 있습니다. 변수.
(2) 클로저가 참조하는 외부 변수는 해당 변수가 위치한 범위가 파괴되어도 소멸되지 않습니다.
외부 함수의 활성 개체는 반환된 클로저 함수에서 참조되므로 활성 개체(예: propertyName ) in createComparisonFunction() createComparisonFunction()이 실행된 후에도 삭제되지 않습니다. createComparisonFunction은 실행 후 실행 환경에서 범위 체인을 삭제하지만 해당 활성 객체는 여전히 클로저 함수에 의해 참조되고 익명 함수의 실행 환경 범위에 배치됩니다. (2) 패키지의 클로저 부작용
function createFunctions(){
var result = new Array();
for (var i=0; i < 10; i++){
result[i] = function(){
return i;
};
}
return result;
}
var res = createFunctions();
console.log(res[0]()); //10
console.log(res[1]()); //10원리:
createFunctions() 함수의 활성 객체는 각 함수의 범위 체인에 저장되므로 모두 동일한 변수 i를 참조합니다. createFunctions() 함수가 반환되면 변수 i의 값은 10이 됩니다. 이때 각 함수는 변수 i를 저장하는 동일한 변수 객체를 참조하므로 각 함수 내부의 i 값은 10해결책:
获取内部函数的对象result[i]时,使用匿名函数,并在匿名函数中再使用闭包函数,使得当前环境下的num被闭包函数函数调用,存储在作用域中不会被释放.
function createFunctions2(){
var result = new Array();
for(var i = 0 ; i <10 ; i++){
result[i] = (function(num){
return function(){
return num
}
})(i)
}
return result;
}
var res2 = createFunctions2();
console.log(res2[0]()); // 0
console.log(res2[1]()); // 1 var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function () {
return function () { //匿名函数执行具有全局性
return this.name; //this指向window
};
}
};
console.log(object.getNameFunc()()) // The Window이 개체를 클로저가 액세스할 수 있는 변수의 외부 범위에 저장하면 클로저가 개체에 액세스할 수 있습니다
var name2 = "The Window";
var object2 = {
name:"My Object",
getNameFunc:function(){
var that = this; //将外部函数的this保存在外部函数的活动对象中(函数中申明的变量中)
return function (){
return that.name
}
}
}
console.log(object2.getNameFunc()()) //My Object클로저 단점
(1). 이를 포함하는 함수의 범위에 따라 다른 함수보다 더 많은 메모리를 차지하게 됩니다. 클로저를 과도하게 사용하면 과도한 메모리 사용량이 발생할 수 있습니다
~
시간 정렬 载 로드 ...
위 내용은 JavaScript 클로저 기능의 기본 사용 및 발생한 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
