js 클로저에 대한 추가 이해-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

js 클로저에 대한 추가 이해

不言

Jul 18, 2018 pm 05:16 PM

JS 클로저

이 기사에서 공유한 내용은 js 클로저에 대한 추가 이해에 관한 내용입니다. 도움이 필요한 친구들이 참고할 수 있습니다.

몇 달 전부터 JS를 배우기 시작하면서 클로저라는 개념이 헷갈렸어요

이전에 이해했지만 오랫동안 사용하지 않아서 잊어버렸어요

클로저 : 일반인의 관점에서 대부분 사람들이 받아들이는 것은 함수가 다른 함수에서 지역 변수를 사용할 권리가 있다는 것입니다

나는 많은 차이점을 보았습니다

가장 간단한 코드로 표현되었습니다

<span style="font-size: 14px;">function out(){<br/><br/>var age=21;<br/><br/>function inner(){<br/>  <br/>  console.log(age);<br/><br/>}<br/><br/>return inner;<br/><br/>}<br/><br/>var fn=out();<br/> fn();  //22</span>

로그인 후 복사

매우 일관됨 개념

클로저는 범위를 반영하는 것이라고 생각합니다.

내부 함수는 out 함수에 정의되어 있습니다.

그래서 console(age);

은 변수 검색 메커니즘을 사용합니다. , 우선 자체(내부) 함수 범위에서 발견되지 않으면 out 함수 범위로 이동하여 검색

찾아서 출력합니다. out에서 발견되지 않으면 더 큰 범위에서 검색됩니다

창 전까지 Scope 하위 스코프는 위쪽으로 접근 가능 상위 스코프는 아래쪽으로 접근 불가

Scope는

{ }

을 의미하며 JS에는 블록 수준 스코프가 없습니다

for(var i=0 i for 루프를 종료한다고 해서 파괴되지는 않습니다

이 점에 유의해야 합니다

자, 범위 지식에 대해 조금 이야기했습니다. 이제 마무리로 돌아갑니다

클로저의 핵심은 반환입니다. 코드만 알아두세요

귀환은 내부의 함수 본문과 내부가 접근할 수 있는 범위를 반환한다는 것입니다!

그래서 내부가 접근할 수 있습니다. age 어디서나

예:

<span style="font-size: 14px;">function  test(){<br/>               var age=23;<br/>                var fn=out();<br/>                 fn();  //21<br/>             <br/>             }<br/>    <br/>    test();//21</span>

로그인 후 복사

22 대신 21을 얻습니다. 함수 본문과 범위가 함께 반환되므로 가장 가까운 범위는 out 함수 범위가 아닙니다

age가 정의되어 있어도 테스트 함수에서는 기존 범위가 다르기 때문에 덮어쓸 수 없습니다

범위를 반환하므로 해당 범위의 변수에 액세스하며 현재 함수가 있는 범위와는 아무 관련이 없습니다

폐쇄는 사실 현상입니다 DNF를 플레이하는 모든 사람들은 돈을 벌기 위해 그림을 그리고 재료를 판매하고 있습니다. 이 현상을 도둑질이라고 합니다. 실행하는 함수의 범위에 따라

이는 이와 반대입니다. 정의 시간과는 아무런 관련이 없지만 메모리 비교

그렇다면 그렇지 않습니다. 클로저를 잘 이해하지 못하시네요

그러면 저처럼 이해하실 수 있을 겁니다

반환되는 것은 함수 자체 + 함수가 접근할 수 있는 범위

자주 사용하는 클로저 탭 바 전환

<span style="font-size: 14px;"><!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  *{margin:0;padding:0<span style="font-size: 12px; color: rgb(0, 0, 0);">;}
   .box{
     width:140px;
     height:18px;
     position:relative;
     padding:6px 20px;
     margin:50px auto;
     background:#ff6666;
   }

   .box ul{
     list</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">style:none;
   } 

   .box li{
      width:18px;
      height:18px;
      background:#ff3300;
      line</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">height:18px;
      text</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">align:center;      </span><span style="font-size: 12px; color: rgb(0, 0, 255);">float</span><span style="font-size: 12px; color: rgb(0, 0, 0);">:left;
      margin</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">right:5px;
      cursor:pointer;
   }

   .current{
     background:#ffccff</span>!<span style="font-size: 12px; color: rgb(0, 0, 0);">important;
   }  </span></style>
 </head>
 <body>

  
  <p class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
  </p>
 
<script type="text/javascript">     <br/><span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);"> $(name){          <br/> <br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">return</span><span style="font-size: 12px; color: rgb(0, 0, 0);"> document.querySelectorAll(name);
       }        <br/> <br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">var</span>  list=$(".box ul li"<span style="font-size: 12px; color: rgb(0, 0, 0);">);        <br/><br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> len=<span style="font-size: 12px; color: rgb(0, 0, 0);">list.length;      <br/> </span><span style="font-size: 12px; color: rgb(0, 0, 255);">for</span>(<span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> i=0;i<len;i++<span style="font-size: 12px; color: rgb(0, 0, 0);">){
           list[i].onmouseover</span>=(<span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);">(n){               
               </span><span style="font-size: 12px; color: rgb(0, 0, 255);">return</span> <span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);">(){                  <br/><br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">for</span>(<span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> j=0;j<len;j++<span style="font-size: 12px; color: rgb(0, 0, 0);">){
                
                      list[j].className</span>=""<span style="font-size: 12px; color: rgb(0, 0, 0);">;
                
                  }
                list[n].className</span>="current"<span style="font-size: 12px; color: rgb(0, 0, 0);">;
               
               }
           })(i);


       }<br/><br/><br/><br/></span></script>



 </body>
</html></span>

로그인 후 복사

for 루프는

list[i].onmouseover

함수가 즉시 실행될 때마다 현재 변수 i가 전달되고 함수가 반환됩니다. 이것이 반환 함수와 범위를 형성합니다. 함수가

에 액세스할 수 있다는 것은 onmouseover이 트리거될 때마다 실행됩니다. 그런 다음

함수는 생성 함수에서 for 루프를 실행하여 모든 li의

className

을 지웁니다.

list[n] 실행 시 가장 중요한 문장입니다. 여기서 n은 onmouseover

을 정의할 때 전달한

i입니다. 함수가 정의되면 즉시 실행되기 때문이고 i는 익명 함수를 사용하면 이 i 는 익명 함수

의 범위에 속합니다. 각 onmouseover는 자신의 i

을 저장하므로 onmouseover이 트리거되면 li에 액세스할 수 있습니다. 이전에 범위에 저장된 i에

또한 soso

의 배경색 변경 요구 사항을 인식합니다. 관련 권장 사항:

실제 매개 변수, 형식 매개 변수 및 js 함수의 클로저 이해

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

본 웹사이트의 성명

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

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7513

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? Mar 18, 2025 pm 03:17 PM

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

Chart.js : Pie, Donut 및 Bubble Charts를 시작합니다 Mar 15, 2025 am 09:19 AM

이 튜토리얼은 Chart.js를 사용하여 파이, 링 및 버블 차트를 만드는 방법을 설명합니다. 이전에는 차트 유형의 차트 유형을 배웠습니다. JS : 라인 차트 및 막대 차트 (자습서 2)와 레이더 차트 및 극지 지역 차트 (자습서 3)를 배웠습니다. 파이 및 링 차트를 만듭니다 파이 차트와 링 차트는 다른 부분으로 나뉘어 진 전체의 비율을 보여주는 데 이상적입니다. 예를 들어, 파이 차트는 사파리에서 남성 사자, 여성 사자 및 젊은 사자의 비율 또는 선거에서 다른 후보자가받는 투표율을 보여주는 데 사용될 수 있습니다. 파이 차트는 단일 매개 변수 또는 데이터 세트를 비교하는 데만 적합합니다. 파이 차트의 팬 각도는 데이터 포인트의 숫자 크기에 의존하기 때문에 원형 차트는 값이 0 인 엔티티를 그릴 수 없습니다. 이것은 비율이 0 인 모든 엔티티를 의미합니다