찾다
웹 프론트엔드JS 튜토리얼JS 클로저에 대한 간단한 설명

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

Jan 04, 2018 am 09:30 AM
javascript단순한설명하다

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

什么是闭包?

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

为什么需要闭包?

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

特点

  • 占用更多内存

  • 不容易被释放

何时使用?

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

如何使用?

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

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

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

相关推荐:

PHP中的闭包和匿名函数分析

深入理解javascript闭包

详解JavaScript作用域和闭包

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Java vs JavaScript : 개발자를위한 세부 비교Java vs JavaScript : 개발자를위한 세부 비교May 16, 2025 am 12:01 AM

javaandjavaScriptAredistIntLanguages ​​: javaisusedforenterpriseandmobileApps, whilejavaScriptisforInciveWebPages.1) javaiscompiled, 정적으로 정적, Andrunsonjvm.2) javaScriptISNaterPreted, doineslicallytyted, andrunsinbrowsorsornode.js.3) javausepith

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경