js 패키지 깊이 이해 및 사례 분석
1.폐쇄 란 무엇 인가
정의:다른 함수 역할 영역 에 접근 할 수 있 는 변 수 를 말 하 는 함수 입 니 다.
패 킷 만 들 기:한 함수 내부 에 다른 함수 만 들 기
기본 적 인 특징 은 되 돌아 오 는 익명 함수 에서 외부 함 수 를 호출 할 수 있 는 변 수 는 다음 과 같다.예 를 들 어 내부 함수(익명 함수)가 외부 함수 에 접근 할 수 있 는 변수 num 형식,예 를 들 어 a[num]이 유 는 익명 함수 역할 도 메 인 체인 에 외부 함수 test 1 의 역할 도 메 인 을 포함 하기 때문이다.
패 킷 을 닫 으 면 함수 내 부 를 포함 하 는 모든 변 수 를 방문 할 수 있 습 니 다.예 를 들 어 아래 의 외부 함수 정의 변수 d 는 패 킷 에서 d(var d=d)에 직접 접근 할 수 있 습 니 다.
function test1(num){
var d;
return function(a,b){
var d1=a[num],d2=b[num];
var dd=d;
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
</body>
</html>
해결 방법:익명 함수 파라미터 i 를 즉시 실행 합 니 다.
pAry[i].onclick = function(num){//......}(i)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
/* */
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function(num) {
return function(){
alert(num)
}
}(i)
}
}
</script>
</head>
<body onload="init();">
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
</body>
</html>
그리고 이렇게 써 도 돼 요.
function a(){
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(num){
pAry[num].onclick = function() {
alert(num);
}
})(i)
}
}
-1)패 킷 을 닫 는 역할 도 메 인 체인 은 패 킷 자체 의 역할 도 메 인(일반적으로 익명 함수 로 돌아 가 는 역할 도 메 인),외부 함수 의 역할 도 메 인(포 함 된 외부 함수),전역 역할 도 메 인 을 포함한다.
-2)함수 의 역할 영역 과 모든 변 수 는 함수 실행 이 끝 난 후에 삭 제 됩 니 다.
-3)함수 가 패 킷 을 되 돌려 줍 니 다.이 함수 의 역할 영역 은 패 킷 이 존재 하지 않 을 때 까지 메모리 에 저 장 됩 니 다.
패 킷 을 사용 하면 블록 급 역할 영역 을 모방 할 수 있 습 니 다.
-1)패 킷 을 만 들 고 이 함 수 를 즉시 실행 합 니 다.이 함수 의 인용 을 메모리 에 남기 지 않 습 니 다.
-2)결과 함수 내부 의 모든 변 수 는 즉시 삭 제 됩 니 다.
2.역할 영역 체인 이란 무엇 인가
실행 환경:변수 나 함수 가 다른 데 이 터 를 방문 하여 각자 의 행동 을 결정 할 수 있 도록 정의 합 니 다.
변수 대상:모든 실행 환경 에 이와 관련 된 변수 대상 이 있 습 니 다.
환경 정 의 를 실행 하 는 모든 변수 와 함 수 는 변수 대상 에 저 장 됩 니 다.코드 를 작성 하면 이 대상 에 접근 할 수 없습니다.해상도 기 는 데 이 터 를 처리 할 때 배경 에서 사용 합 니 다.
-1)전역 실행 환경 은 가장 외곽 의 실행 환경 이다
-2)웹 브 라 우 저 에서 전역 실행 환경 은 기본적으로 window 대상 이기 때문에 모든 전역 변수 와 함 수 는 window 대상 의 속성 과 방법 으로 만 듭 니 다.
-3)특정한 실행 환경 에서 모든 코드 가 실 행 된 후에 이 환경 은 소각 되 고 그 안에 저 장 된 모든 변수 와 함수 정 의 는 이에 따라 소각 된다. 웹 페이지 나 브 라 우 저 를 닫 을 때 까지 전역 실행 환경 이 삭 제 됩 니 다.
-4)함수 마다 실행 환경 이 있 음
역할 도 메 인 체인:코드 가 실행 환경 에서 실 행 될 때 변수 대상 의 역할 도 메 인 체인 을 만 듭 니 다.
역할 도 메 인 체인 용도:실행 환경 에 접근 할 수 있 는 모든 변수 와 함수 에 대한 질서 있 는 접근 을 확보 합 니 다.
식별 자 분석:역할 도 메 인 체인 을 따라 1 급 1 급 으로 식별 자 를 위로 검색 하 는 과정.
함수 매개 변수 도 변수 로 취급 되 기 때문에 접근 규칙 은 실행 환경의 다른 변수 와 같 습 니 다.예:아래 함수 chageColor(num){}패키지 에 tempColor(a){}에서 a[num]로 접근 할 수 있 습 니 다.
실례 해석
<script type="text/javascript">
/* */
var color = 'red' ;
function changeColor(num){
var otherColor = 'blue',
another =color,
chage = changeColor();
function tempColor(a){
var temp = otherColor,
temp2 = color,
temp3 = changeColor();/* otherColor another chage color*/
var u =a[num];
}
}
</script>
|
|-------------컬러 전역 변수
|------------changeColor()
|
|---------------otherColor(국부 변수 와 두 개 는 호출 된 상층 전역 환경 에서 의 color 변수 와 함수 chageColor)
|---------------tempColor()
|-------------------h(변수 h 는 상부 에서 실 행 될 수 없 으 며 tempColor()에서 식별 자 를 호출 하여 역할 도 메 인 체인 을 따라 검색 할 수 있 습 니 다.이 환경 에서 외부 환경 과 전체 환경의 변 수 를 호출 할 수 있 습 니 다)
참고:
https://www.jb51.net/article/183094.htm
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
