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

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

[예 1]

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

getName 함수에서 이름을 얻으려면 먼저 getName 함수의 범위에서 이름을 검색하세요. 그래서 user 함수 범위에서 검색했는데 역시 발견되지 않았습니다. 계속해서 위쪽으로 추적해 보니 전역 범위에 이름이 존재하는 것을 발견하여 이름 값을 얻어서 출력했습니다. 여기서 이해하기 쉽습니다. 즉, 지정된 범위에 변수가 존재합니다. 현재 범위에서 원하는 변수를 찾을 수 없으면 동일한 이름을 가진 첫 번째 변수가 나올 때까지 범위 체인을 통해 상위 범위에서 검색이 계속됩니다. 변수가 발견되었습니다(또는 찾을 수 없는 경우 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

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 // 销毁闭包，释放内存

2번 항목에 따라 코드를 분석해 보겠습니다. userName 변수(할아버지)는 전역 범위에서 생성되고 사용자의 최종 반환 결과는 다음과 같습니다. 함수는 참조(즉, 지역 변수 이름의 값), user()()(dad) 실행 및 반환 이름(손자)이 저장됩니다. 일반적인 상황에서는 사용자 환경입니다. (dad)는 삭제되어야 합니다. 그러나 반환된 결과 이름(손자)은 아버지의 환경을 참조하므로(이름은 원래 사용자 범위에 존재하므로) 사용자 환경을 해제할 수 없습니다(이로 인해 메모리 손실이 발생함).

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

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

위의 예를 보세요.

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

3. "JavaScript의 함수는 실행되는 범위가 아니라 정의된 범위에서 실행됩니다."이 문장은 클로저의 변수에 대한 참조를 매우 명확하게 이해하고 있습니다. . 다음 예를 살펴보겠습니다.

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

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 中闭包的理解，如果有误，欢迎指正。最后引用一段知乎问题下关于闭包概念的一个回答。

什么是闭包?

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

为什么需要闭包？

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

特点

• 占用更多内存

• 不容易被释放

何时使用？

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

如何使用？

1. 定义外层函数，封装被保护的局部变量。

2. 定义内层函数，执行对外部函数变量的操作。

3. 外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。

위 내용은 JS 클로저에 대한 간단한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!