js 클로저에 대한 추가 이해
- 不言원래의
- 2018-07-18 17:16:141393검색
이 기사에서 공유한 내용은 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>
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!