JavaScript 함수 클로저 사용에 대한 자세한 토론 및 자세한 코드 설명
클로저에 대한 영어 단어는 closure입니다. 이는 JavaScript 지식의 매우 중요한 부분입니다. 왜냐하면 클로저를 사용하면 코드의 양을 크게 줄이고 코드를 더 명확하게 보이게 하는 등의 작업을 할 수 있기 때문입니다. 한마디로 매우 강력합니다.
클로저의 의미: 직설적으로 말하면 클로저는 함수의 중첩입니다. 외부 함수가 실행되더라도 내부 함수는 외부 함수의 모든 변수를 사용할 수 있습니다(여기에는 JavaScript 범위 체인이 포함됩니다).
예제 1
function checkClosure(){
var str = 'rain-man';
setTimeout(
function(){ alert(str); } //这是一个匿名函数
, 2000);
}
checkClosure();이 예는 실행 프로세스를 주의 깊게 분석한 후에도 여전히 많은 지식 포인트가 있습니다. checkClosure 함수의 실행은 즉각적이며(아마도 0.00001밀리초만 소요될 수 있음) 함수에서 생성됩니다. checkClosure의 본문 변수 str을 얻었습니다. checkClosure가 실행된 후에는 str이 해제되지 않습니다. 이는 setTimeout의 익명 함수에 str에 대한 참조가 있기 때문입니다. 2초 후 함수 본문의 익명 함수가 실행되고 str이 해제됩니다.
예제 2, 코드 최적화
function forTimeout(x, y){
alert(x + y);
}
function delay(x , y , time){
setTimeout('forTimeout(' + x + ',' + y + ')' , time);
}
/**
* 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰
* function delay(x , y , time){
* setTimeout(
* function(){
* forTimeout(x , y)
* }
* , time);
* }
*/익명 함수의 가장 큰 용도는 클로저(JavaScript 언어의 기능 중 하나)를 만드는 것이고, 네임스페이스를 구축하여 전역 변수의 사용을 줄일 수도 있습니다.
예제 3:
var oEvent = {};
(function(){
var addEvent = function(){ /*代码的实现省略了*/ };
function removeEvent(){}
oEvent.addEvent = addEvent;
oEvent.removeEvent = removeEvent;
})();예제 4:
var rainman = (function(x , y){
return x + y;
})(2 , 3);
/**
* 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。
* var rainman = function(x , y){
* return x + y;
* }(2 , 3);
*/여기서 변수 rainman을 만들고 익명 함수를 직접 호출하여 5로 초기화합니다. 이 작은 트릭은 때때로 매우 실용적입니다.
예제 5:
var outer = null;
(function(){
var one = 1;
function inner (){
one += 1;
alert(one);
}
outer = inner;
})();
outer(); //2
outer(); //3
outer(); //4이 코드의 변수 one은 (함수 내에서 정의되기 때문에) 지역 변수이므로 외부에서 접근할 수 없습니다. 하지만 여기서는 변수 1에 액세스할 수 있는 내부 함수를 만들었고 전역 변수 외부는 내부를 참조하므로 외부를 세 번 호출하면 증분 결과가 나타납니다.
참고: 클로저를 사용하면 내부 함수가 상위 함수의 변수를 참조할 수 있지만 변수는 최종 값입니다.
예 6:
/**
* <body>
* <ul>
* <li>one</li>
* <li>two</li>
* <li>three</li>
* <li>one</li>
* </ul>
*/
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
lists[ i ].onmouseover = function(){
alert(i);
};
}마우스를 각 해결책 1: 해결책 2: 해결책 3: 위 내용은 JavaScript 함수 클로저 사용에 대한 자세한 토론 및 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
(function(index){
lists[ index ].onmouseover = function(){
alert(index);
};
})(i);
}var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists.length; i < len; i++){
lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标
lists[ i ].onmouseover = function(){
alert(this.$$index);
};
}function eventListener(list, index){
list.onmouseover = function(){
alert(index);
};
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
eventListener(lists[ i ] , i);
}
핫 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)
뜨거운 주제
7555
15
1383
52
83
11
59
19
28
96
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
Mingchao 시험 중 주의 사항 소개
Mar 13, 2024 pm 08:13 PM
Mingchao 테스트 중에는 정보 손실 및 비정상적인 게임 로그인을 방지하기 위해 시스템 업그레이드, 공장 초기화, 부품 교체를 피하시기 바랍니다. 특별 알림: 테스트 기간에는 이의 제기 채널이 없으므로 주의해서 처리하시기 바랍니다. Mingchao 테스트 중 주의 사항 소개: 시스템 업그레이드, 공장 설정 복원, 장비 구성 요소 교체 등을 수행하지 마십시오. 참고: 1. 정보 손실을 방지하려면 테스트 기간 동안 시스템을 주의 깊게 업그레이드하십시오. 2. 시스템이 업데이트될 경우 게임에 로그인할 수 없는 문제가 발생할 수 있습니다. 3. 이 단계에서는 아직 어필 채널이 열리지 않았습니다. 플레이어는 자신의 재량으로 업그레이드 여부를 선택하는 것이 좋습니다. 4. 동시에 하나의 게임 계정은 하나의 Android 기기와 하나의 PC에서만 사용할 수 있습니다. 5. 휴대폰 시스템을 업그레이드하거나 공장 설정으로 복원하거나 장치를 교체하기 전에는 테스트가 완료될 때까지 기다리는 것이 좋습니다.
Douyin에서 처음으로 라이브 방송을 시작하는 방법은 무엇입니까? 처음 생방송을 할 때 주의할 점은 무엇인가요?
Mar 22, 2024 pm 04:10 PM
단편 동영상 플랫폼의 등장으로 Douyin은 많은 사람들의 일상생활에서 없어서는 안 될 부분이 되었습니다. Douyin을 통한 라이브 방송과 팬들과의 소통은 많은 사용자들의 꿈입니다. 그렇다면 처음으로 Douyin에서 라이브 방송을 시작하는 방법은 무엇입니까? 1. Douyin에서 처음으로 라이브 방송을 시작하는 방법은 무엇입니까? 1. 준비 생방송을 시작하려면 먼저 Douyin 계정이 실명 인증을 완료했는지 확인해야 합니다. Douyin 앱의 "나" -> "설정" -> "계정 및 보안"에서 실명인증 튜토리얼을 확인하실 수 있습니다. 실명인증을 완료하신 후, 라이브 방송 조건을 충족하시면 Douyin 플랫폼에서 라이브 방송을 시작하실 수 있습니다. 2. 생방송 허가 신청 생방송 조건을 충족한 후 생방송 허가를 신청해야 합니다. Douyin 앱을 열고 "나"->"크리에이터 센터"->"직접"을 클릭하세요.
로컬 스토리지를 사용하여 데이터를 저장하는 단계 및 주의사항
Jan 11, 2024 pm 04:51 PM
localStorage를 사용하여 데이터를 저장하는 단계 및 주의 사항 이 문서에서는 주로 localStorage를 사용하여 데이터를 저장하는 방법을 소개하고 관련 코드 예제를 제공합니다. LocalStorage는 서버를 통하지 않고 사용자 컴퓨터에 로컬로 데이터를 유지하는 브라우저에 데이터를 저장하는 방법입니다. 다음은 localStorage를 사용하여 데이터를 저장할 때 주의해야 할 단계와 사항입니다. 1단계: 브라우저가 LocalStorage를 지원하는지 확인
네트워크 없이 pip를 설치하는 단계 및 주의사항
Jan 18, 2024 am 10:02 AM
오프라인 환경에서 pip 설치 방법 및 주의사항 네트워크가 원활하지 않은 오프라인 환경에서는 pip 설치가 어렵습니다. 이 글에서는 오프라인 환경에서 pip를 설치하는 여러 가지 방법을 소개하고 구체적인 코드 예제를 제공합니다. 방법 1: 오프라인 설치 패키지를 사용합니다. 인터넷에 연결할 수 있는 환경에서 다음 명령을 사용하여 공식 소스에서 pip 설치 패키지를 다운로드합니다. 이 명령은 공식 소스에서 pip 및 해당 종속 패키지를 자동으로 다운로드합니다. 소스를 다운로드하여 현재 디렉터리에 저장합니다. 다운로드한 압축 패키지를 원격 위치로 이동
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
js와 vue의 관계
Mar 11, 2024 pm 05:21 PM
js와 vue의 관계: 1. 웹 개발의 초석인 JS 2. 프론트엔드 프레임워크로서의 Vue.js의 등장 3. JS와 Vue의 상호 보완적인 관계 4. JS와 Vue의 실제 적용 Vue.
자주 묻는 질문 및 참고 사항: 일괄 쿼리에 MyBatis 사용
Feb 19, 2024 pm 12:30 PM
MyBatis 일괄 쿼리 문에 대한 참고 사항 및 FAQ 소개 MyBatis는 유연하고 효율적인 데이터베이스 작업을 지원하는 탁월한 지속성 계층 프레임워크입니다. 그 중 일괄 쿼리는 한 번에 여러 데이터를 쿼리함으로써 데이터베이스 연결 및 SQL 실행의 오버헤드를 줄이고 시스템 성능을 향상시킬 수 있는 일반적인 요구 사항입니다. 이 기사에서는 MyBatis 배치 쿼리문에 대한 몇 가지 예방 조치와 일반적인 문제를 소개하고 구체적인 코드 예제를 제공합니다. 이것이 개발자에게 도움이 되기를 바랍니다. M 사용 시 주의할 점
