집 > 기사 > 웹 프론트엔드 > JS 클로저에 대한 간단한 설명

JS 클로저에 대한 간단한 설명

小云云원래의: 2018-01-04 09:30:371454검색

JS의 클로저에 대해 들어본 적이 있을 것입니다. 이 글은 JS의 클로저에 대해 샘플 코드를 통해 소개하고 있습니다. 관심 있는 친구들이 꼭 읽어보길 바랍니다.

1. "클로저는 범위를 넘어 변수에 액세스하는 것입니다."

[예제 1]

var name = 'wangxi'
function user () {
 // var name = 'wangxi'
 function getName () {
 console.log(name)
 }
 getName()
}
user() // wangxi

getName 함수에서 이름을 얻으려면 먼저 getName 함수 범위에서 이름을 검색하지만 찾을 수 없습니다. , 그런 다음 사용자 함수 검색 범위에서 역시 찾을 수 없으며 계속해서 위쪽으로 추적하여 전역 범위에 이름이 존재하는 것을 찾으므로 이름 값을 가져와 인쇄합니다. 여기서 이해하기 쉽습니다. 즉, 지정된 범위에 변수가 존재합니다. 현재 범위에서 원하는 변수를 찾을 수 없으면 동일한 이름을 가진 첫 번째 변수가 나올 때까지 범위 체인을 통해 상위 범위에서 검색이 계속됩니다. 변수가 발견되었습니다(또는 찾을 수 없는 경우 ReferenceError가 발생합니다). 이것이 js의 스코프 체인 개념입니다. 즉, 스코프 체인에 따라 자식 스코프가 부모 스코프의 변수에 접근할 수 있습니다. 반대로 부모 스코프가 자식 스코프의 변수에 접근하고 싶다면 어떻게 될까요? ——이것은 폐쇄를 통해 달성되어야 합니다.

【예제 2】

function user () {
 var name = 'wangxi'
 return function getName () {
 return name
 }
}
var userName = user()()
console.log(userName) // wangxi

코드를 분석해 보면 name은 사용자 함수 범위 내에 존재하는 지역 변수라는 것을 알 수 있습니다. 일반적인 상황에서 name 변수는 외부 범위(여기서는 전역)에서 접근할 수 없지만, 클로저를 통해(변수가 포함된 함수를 반환합니다. 여기서는 getName 함수입니다), 이는 변수에 대한 교차 범위 액세스(내부에 대한 외부 액세스)를 가능하게 합니다. 따라서 위의 설명은 다음과 같이 완전히 이해되어야 합니다.

Closure는 범위 전체에서 변수에 액세스하는 것을 의미합니다. 내부 범위는 외부 범위의 변수에 대한 참조를 유지할 수 있으므로 (더욱) 외부 범위가 . (아직 이해가 안 되신다면 다음 분석을 읽어보세요)

2. "결론: 아빠는 할아버지 환경에서 처형되었고, 손자는 아버지 환경에서 돌려받았습니다. 원래는 아버지가 처형됐고, 아버지 환경에서 돌아가야 합니다." 클리어는 되는데 손자가 인용을 하니까 아빠가 해제를 못하더라고요. 간단히 말해서 클로저는 상위 환경을 참조해서 상위 환경으로 돌려주는 객체입니다."

이걸 어떻게 이해하셨나요? 먼저 아래 코드를 살펴보세요.

[예제 3]

function user () {
 var name = 'wangxi'
 return name
}
var userName = user()
console.log(userName) // wangxi

Q: 이것이 클로저인가요?

A: 물론 아닙니다. 먼저 클로저가 무엇인지 이해해야 합니다. user 함수에 있는 지역변수 이름은 전역 범위에서 접근하는 것 같지만, 문제는 user가 실행된 후에 name도 소멸된다는 것, 즉 함수에 있는 지역변수의 생명주기가 While에만 존재한다는 것입니다. 함수의 선언 주기에 따라 함수는 소멸되고 함수 내의 변수도 자동으로 소멸됩니다.

그러나 클로저를 사용하는 것은 함수가 실행된 후 수명 주기가 종료되지만 클로저가 참조하는 외부 범위의 변수는 여전히 존재하며 클로저를 실행하는 범위가 소멸될 때까지 항상 존재합니다. 지역 변수는 파괴됩니다(클로저가 전역 환경에서 참조되는 경우 클로저가 참조하는 범위는 프로그램이 종료되거나 브라우저가 닫히는 등 전역 환경이 파괴될 때만 파괴됩니다). 따라서 클로저로 인한 메모리 손실을 방지하려면 클로저 사용 후 수동으로 파기하는 것이 좋습니다. 위의 예 2와 동일하지만 약간 수정되었습니다.

[예 4]

function user () {
 var name = 'wangxi'
 return function getName () {
 return name
 }
}
var userName = user()() // userName 变量中始终保持着对 name 的引用
console.log(userName) // wangxi
userName = null // 销毁闭包，释放内存

[user()()에 두 개의 대괄호가 있는 이유: user()를 실행하면 getName 함수가 반환됩니다. 반환된 getName 함수는 한 번 실행되었으므로 user()() 입니다.

포인트 2에 따르면 코드를 분석합니다. userName 변수(할아버지)는 전역 범위에서 생성되고 최종 반환 결과에 대한 참조는 user 함수(즉, 로컬 변수 이름의 값)가 저장되고, user()()(아빠)를 실행하면 이름(손자)이 반환됩니다. 일반적인 상황에서는 user()()를 실행한 후 사용자 환경(아빠)이 반환되어야 합니다. 삭제되지만 반환된 결과 이름(손자)은 아버지의 환경을 참조하므로(이름은 원래 사용자 범위에 존재하므로) 사용자 환경을 해제할 수 없습니다(이로 인해 메모리 손실이 발생함).

그래서 ["클로저는 상위 환경을 참조하고 상위 환경에서 상위 환경으로 개체를 반환하는 개체입니다."] 어떻게 이해해야 할까요?

다르게 말하면, 함수가 상위 환경의 개체를 참조하고 이 함수의 상위 수준 환경에 개체를 반환하는 경우 이 함수는 클로저입니다.

위의 예를 보세요.

getName 함수는 사용자(부모) 환경의 개체(변수 이름)를 참조하고 함수 내에서 이름 변수를 전역 환경(상위 환경)으로 반환합니다. getName 클로저입니다.

3. "JavaScript의 함수는 실행되는 범위가 아니라 정의된 범위에서 실행됩니다."

이 문장은 클로저의 변수 참조를 이해하는 데 매우 유용합니다. 다음 예를 살펴보겠습니다.

var name = 'Schopenhauer'
function getName () {
 console.log(name)
}
function myName () {
 var name = 'wangxi'
 getName()
}
myName() // Schopenhauer

myName()을 실행한 결과가 예상과 다른 경우 다시 위의 문장을 살펴봐야 합니다.

JavaScript의 함수는 범위가 정의되면 실행됩니다. 실행되는 범위보다는

执行 myName，函数内部执行了 getName，而 getName 是在全局环境下定义的，因此尽管在 myName 中定义了变量 name，对getName 的执行并无影响，getName 中打印的依然是全局作用域下的 name。

我们稍微改一下代码:

var name = 'Schopenhauer'
function getName () {
　 var name = 'Aristotle'
 var intro = function() { // 这是一个闭包
  console.log('I am ' + name)
 }
 return intro
}
function showMyName () {
 var name = 'wangxi'
 var myName = getName()
 myName()
}
showMyName() // I am Aristotle

结果和你想象的一样吗？结果留作聪明的你自己分析~

以上就是对 js 中闭包的理解，如果有误，欢迎指正。最后引用一段知乎问题下关于闭包概念的一个回答。

什么是闭包?

简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。

为什么需要闭包？

局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

特点

占用更多内存
不容易被释放

何时使用？

变量既想反复使用，又想避免全局污染

如何使用？

定义外层函数，封装被保护的局部变量。
定义内层函数，执行对外部函数变量的操作。
外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。

JS 클로저에 대한 간단한 설명

관련 기사