자 바스 크 립 트 의 폐쇄 적 특성 을 깊이 이해 하 다
36031 단어 JavaScript폐쇄 하 다Web
1.
DOCTYPE HTML
>
2.
<
html
>
3.
<
head
>
4.
<
meta
charset
="utf-8"
/>
5.
<
title
>
title
>
6.
<
style
type
="text/css"
>
7. p
{
background
:
gold
;
}
8.
style
>
9.
<
script
type
="text/javascript"
>
10
.
function
init() {
11
.
var
pAry
=
document.getElementsByTagName(
"
p
"
);
12
.
for
(
var
i
=
0
; i
<
pAry.length; i
++
) {
13
. pAry[i].onclick
=
function
() {
14
. alert(i);
15
. }
16
. }
17
. }
18
.
script
>
19.
head
>
20.
<
body
onload
="init();"
>
21.
<
p
>
0
p
>
22.
<
p
>
1
p
>
23.
<
p
>
2
p
>
24.
<
p
>
3
p
>
25.
<
p
>
4
p
>
26.
body
>
27.
html
>
이상 의 장면 은 초보 자 들 이 자주 만 나 는 것 이다.HTML 요소 집합 을 가 져 와 서 요소 에 이 벤트 를 추가 하 는 것 입 니 다.이벤트 응답 함수 (event handler) 에서 해당 하 는 색인 을 가 져 옵 니 다.하지만 매번 가 져 오 는 것 은 마지막 순환 색인 입 니 다.
초보 자 들 이 자 바스 크 립 트 의 폐쇄 적 특성 을 이해 하지 못 했 기 때문이다.element. onclick = function () {alert (i);} 방식 으로 요소 에 클릭 이 벤트 를 추가 합 니 다.응답 함수 function () {alert (i);} 의 i 는 순환 할 때마다 대응 하 는 i (예 를 들 어 0, 1, 2, 3, 4) 가 아니 라 순환 후 마지막 i 의 값 5 입 니 다.또는 순환 할 때 응답 함수 에 대응 하 는 값 i 를 저장 하지 못 하고 마지막 i + + 의 값 5 입 니 다.
원인 을 알 고 많은 해결 방법 을 모색 해 냈 다.제일 먼저 떠 오 르 는 앞의 두 가지.
1. 각 단락 의 대상 (p) 에 변수 i 저장
1
.
function
init1() {
2
.
var
pAry
=
document.getElementsByTagName(
"
p
"
);
3
.
for
(
var
i
=
0
; i
<
pAry.length; i
++
) {
4
. pAry[i].i
=
i;
5
. pAry[i].onclick
=
function
() {
6
. alert(
this
.i);
7
. }
8
. }
9
. }
2. 변수 i 를 익명 함수 자체 에 저장
1
.
function
init2() {
2
.
var
pAry
=
document.getElementsByTagName(
"
p
"
);
3
.
for
(
var
i
=
0
; i
<
pAry.length; i
++
) {
4
. (pAry[i].onclick
=
function
() {
5
. alert(arguments.callee.i);
6
. }).i
=
i;
7
. }
8
. }
그리고 세 가지 가 생각 났 어 요.
3. 한 층 의 패 킷 을 추가 하고 i 는 함수 매개 변수 형식 으로 내부 함수 에 전달 합 니 다.
1
.
function
init3() {
2
.
var
pAry
=
document.getElementsByTagName(
"
p
"
);
3
.
for
(
var
i
=
0
; i
<
pAry.length; i
++
) {
4
. (
function
(arg){
5
. pAry[i].onclick
=
function
() {
6
. alert(arg);
7
. };
8
. })(i);
//
9
. }
10
. }
4. 한 층 의 패 킷 을 추가 하고 i 는 국부 변수 형식 으로 내부 함수 에 전달 합 니 다.
1
.
function
init4() {
2
.
var
pAry
=
document.getElementsByTagName(
"
p
"
);
3
.
for
(
var
i
=
0
; i
<
pAry.length; i
++
) {
4
. (
function
() {
5
.
var
temp
=
i;
//
6
. pAry[i].onclick
=
function
() {
7
. alert(temp);
8
. }
9
. })();
10
. }
11
. }
5. 패 키 지 를 한 층 더 하고 하나의 함 수 를 응답 이벤트 로 되 돌려 줍 니 다 (주의 와 3 의 미세한 차이 점)
1
.
function
init5() {
2
.
var
pAry
=
document.getElementsByTagName(
"
p
"
);
3
.
for
(
var
i
=
0
; i
<
pAry.length; i
++
) {
4
. pAry[i].onclick
=
function
(arg) {
5
.
return
function
() {
//
6
. alert(arg);
7
. }
8
. }(i);
9
. }
10
. }
그리고 두 가 지 를 발 견 했 어 요.
6. Function 으로 이 루어 집 니 다. 실제 함수 인 스 턴 스 가 생 길 때마다 하나의 패 킷 이 생 깁 니 다.
1
.
function
init6() {
2
.
var
pAry
=
document.getElementsByTagName(
"
p
"
);
3
.
for
(
var
i
=
0
; i
<
pAry.length; i
++
) {
4
. pAry[i].onclick
=
new
Function(
"
alert(
"
+
i
+
"
);
"
);
//
new
5
. }
6
. }
7. Function 으로 실현, 주의 와 6 의 차이
1
function
init7() {
2
var
pAry
=
document.getElementsByTagName(
"
p
"
);
3
for
(
var
i
=
0
; i
<
pAry.length; i
++
) {
4
pAry[i].onclick
=
Function(
'
alert(
'
+
i
+
'
)
'
);
5
}
6
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
