JS 클로저 사용을 위한 샘플 코드 공유
이 글에서는 주로 JS 클로저의 사용법을 소개하고, javascript 클로저의 원리와 실행 단계, 관련 동작 스킬을 구체적인 예시를 통해 분석해보겠습니다. 다음
이 글의 예제에서는 JS 클로저의 사용법을 설명합니다. 참고할 수 있도록 자세한 내용은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 第一，函数作为返回值
function fn(){
var max = 10;
return function bar(x){
if(x > max) {
console.log(x);
}
};
}
var f1 = fn();
f1(15);
</script>
<script type="text/javascript">
// 第二，函数作为参数被传递
var max = 10;
fn = function(x){
if(x > max){
console.log(x);//15
}
};
(function(f){
var max = 100;
f(15);
})(fn);
</script>
<script>
function fn(){
var max = 10;
return function bar(x){
if(if > max){
console.log(x);
}
};
}
var f1 = fn();
max = 100;
f1(15);
</script>
</body>
</html>첫 번째 단계는 코드가 실행되기 전에 전역 컨텍스트 환경을 생성하고 변수가 실행 중입니다. 현재 전역 컨텍스트가 활성화되어 있습니다.
전역 컨텍스트: max가 정의되지 않음두 번째 단계, var f1 = fn() 코드를 실행할 때 fn()을 호출하면 fn()이 발생합니다. 실행 컨텍스트가 스택에 푸시되고 활성 상태로 설정됩니다.
fn() context: max is 103단계, var f1 = fn();을 실행한 후 fn() 호출이 완료됩니다. fn()의 실행 컨텍스트를 삭제해야 하는 것은 당연한 일이지만 여기서는 이를 수행할 수 없습니다.
여기서 중요한 점이 있습니다. fn()이 실행되면 함수가 반환되기 때문입니다. 함수의 특별한 점은 독립적인 범위를 만들 수 있다는 것입니다. 반환된 함수 본문에는 fn 범위의 fn() 컨텍스트에서 max를 참조하는 자유 변수 max도 있습니다. 따라서 이 max는 소멸될 수 없습니다. 소멸된 후에는 bar 함수의 max 값을 찾을 수 없습니다. 따라서 여기서 fn() 컨텍스트는 파괴될 수 없으며 여전히 실행 컨텍스트 스택에 존재합니다. max = 100;이 실행되면 전역 컨텍스트가 활성화되지만 fn() 컨텍스트는 여전히 실행 컨텍스트 스택에 남아 있습니다. 또한 max = 100이 실행된 후에는 전역 컨텍스트에서 max에 100이라는 값이 할당됩니다. 전역 컨텍스트: max는 100 fn() 컨텍스트: max는 104단계, f1(15)로 실행;, f1(15)을 실행합니다. 즉, bar(15)를 실행하고 bar(15) 컨텍스트를 생성한 후 활성 상태로 설정합니다.
bar(15) 실행시 max는 자유변수이고, bar 함수가 생성된 스코프에서 검색해서 max 값을 10으로 구해야 합니다. 여기서 중요한 점은 fn()이 실행될 때 bar 함수가 생성된다는 점입니다. fn()의 실행은 오래 전에 종료되었지만 fn()의 실행 컨텍스트는 여전히 스택에 존재하므로 bar(15)를 실행하면 max를 찾을 수 있습니다. fn() 컨텍스트가 파괴되면 max를 찾을 수 없습니다. 클로저를 사용하면 콘텐츠 오버헤드가 증가한다는 것은 이제 명백합니다!f1(15)을 실행한 후의 다섯 번째 단계는 컨텍스트 환경의 파괴 프로세스이므로 여기서는 설명하지 않습니다.
클로저는 범위와 맥락에서 분리될 수 없습니다. 정말 “당신을 사랑하는 것은 쉽지 않습니다!” 게다가 클로저는 고전프레임워크/클래스 라이브러리에 대해 배우고 싶든 jQuery의 많은 애플리케이션에서 사용됩니다. 플러그인이나 클래스 라이브러리를 직접 개발하려면 클로저, 프로토타입 등의 기본 이론을 알아야 합니다. 그렇지 않으면 버그가 나타날 때 이유를 알 수 없습니다. 이러한 버그는 완전히 귀하의 지식 범위를 벗어날 수 있기 때문입니다.
위 내용은 JS 클로저 사용을 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7530
15
1379
52
82
11
54
19
21
76
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
C++ 람다 표현식에서 클로저의 의미는 무엇입니까?
Apr 17, 2024 pm 06:15 PM
C++에서 클로저는 외부 변수에 액세스할 수 있는 람다 식입니다. 클로저를 생성하려면 람다 표현식에서 외부 변수를 캡처하세요. 클로저는 재사용성, 정보 숨기기, 지연 평가와 같은 이점을 제공합니다. 이는 클로저가 외부 변수가 파괴되더라도 여전히 접근할 수 있는 이벤트 핸들러와 같은 실제 상황에서 유용합니다.
C++ 람다 표현식에서 클로저를 구현하는 방법은 무엇입니까?
Jun 01, 2024 pm 05:50 PM
C++ Lambda 표현식은 함수 범위 변수를 저장하고 함수에 액세스할 수 있도록 하는 클로저를 지원합니다. 구문은 [캡처 목록](매개변수)->return-type{function-body}입니다. 캡처 목록은 캡처할 변수를 정의합니다. [=]를 사용하여 모든 지역 변수를 값으로 캡처하고, [&]를 사용하여 모든 지역 변수를 참조로 캡처하거나, [변수1, 변수2,...]를 사용하여 특정 변수를 캡처할 수 있습니다. 람다 표현식은 캡처된 변수에만 액세스할 수 있지만 원래 값을 수정할 수는 없습니다.
C++ 함수에서 클로저의 장점과 단점은 무엇입니까?
Apr 25, 2024 pm 01:33 PM
클로저는 외부 함수의 범위에 있는 변수에 액세스할 수 있는 중첩 함수입니다. 클로저의 장점에는 데이터 캡슐화, 상태 보존 및 유연성이 포함됩니다. 단점으로는 메모리 소비, 성능 영향, 디버깅 복잡성 등이 있습니다. 또한 클로저는 익명 함수를 생성하고 이를 콜백이나 인수로 다른 함수에 전달할 수 있습니다.
클로저로 인한 메모리 누수 문제 해결
Feb 18, 2024 pm 03:20 PM
제목: 클로저로 인한 메모리 누수 및 솔루션 소개: 클로저는 내부 함수가 외부 함수의 변수에 액세스할 수 있도록 하는 JavaScript에서 매우 일반적인 개념입니다. 그러나 클로저를 잘못 사용하면 메모리 누수가 발생할 수 있습니다. 이 문서에서는 클로저로 인해 발생하는 메모리 누수 문제를 살펴보고 솔루션과 구체적인 코드 예제를 제공합니다. 1. 클로저로 인한 메모리 누수 클로저의 특징은 내부 함수가 외부 함수의 변수에 접근할 수 있다는 것입니다. 즉, 클로저에서 참조되는 변수는 가비지 수집되지 않습니다. 부적절하게 사용하는 경우,
js와 vue의 관계
Mar 11, 2024 pm 05:21 PM
js와 vue의 관계: 1. 웹 개발의 초석인 JS 2. 프론트엔드 프레임워크로서의 Vue.js의 등장 3. JS와 Vue의 상호 보완적인 관계 4. JS와 Vue의 실제 적용 Vue.
함수 포인터와 클로저가 Golang 성능에 미치는 영향
Apr 15, 2024 am 10:36 AM
함수 포인터와 클로저가 Go 성능에 미치는 영향은 다음과 같습니다. 함수 포인터: 직접 호출보다 약간 느리지만 가독성과 재사용성이 향상됩니다. 클로저: 일반적으로 느리지만 데이터와 동작을 캡슐화합니다. 실제 사례: 함수 포인터는 정렬 알고리즘을 최적화할 수 있고 클로저는 이벤트 핸들러를 생성할 수 있지만 성능 저하를 가져옵니다.
PHP 함수의 연쇄 호출 및 폐쇄
Apr 13, 2024 am 11:18 AM
예, 체인 호출 및 클로저를 통해 코드 단순성과 가독성을 최적화할 수 있습니다. 체인 호출은 함수 호출을 유창한 인터페이스에 연결합니다. 클로저는 재사용 가능한 코드 블록을 생성하고 함수 외부의 변수에 액세스합니다.
