javascript closure_javascript 스킬에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

javascript closure_javascript 스킬에 대한 자세한 설명

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:51 PM

javascript 폐쇄

인터넷에서 폐쇄에 대한 개념과 기사를 읽은 후 이 문제를 직접 정리하고 싶습니다.

Q: 폐쇄란 무엇인가요?
답변: 클로저는 JavaScript에서 외부 함수가 반환된 후에도(수명 종료) 내부 함수가 자신이 위치한 외부 함수에 선언된 매개변수와 변수에 항상 액세스할 수 있다는 의미입니다.

종료 문제가 처음 발생했습니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>闭包循环问题</title>
<style type="text/css">
p {background:#ccc; width: 300px; height: 100px;}
</style>
</head> 
<body> 
<p id="p0">段落0</p> 
<p id="p1">段落1</p> 
<p id="p2">段落2</p> 
<p id="p3">段落3</p> 
<p id="p4">段落4</p> 
<script type="text/javascript">
for( var i=0; i<5; i++ ) { 
document.getElementById("p"+i).onclick=function() { 
alert(i); //访问了父函数的变量i, 闭包 
};
};
</script> 
</body> 
</html>

로그인 후 복사

한 번도 사용해 본 적이 없다면 단락을 클릭하면 해당 단락에 해당하는 숫자 0, 1, 2, 3, 4가 팝업된다고 생각할 수도 있습니다. 그런데 사실 다 5개나 나오더라구요

온라인에서 이 문제를 논의하는 많은 블로그가 있으며 해당 번호를 팝업으로 표시할 수 있는 다양한 방법을 제시했습니다.

해결책 1: 해당 단락의 속성에 변수 i를 저장합니다

var pAry = document.getElementsByTagName("p"); 
for( var i=0; i< 5; i++ ) { 
pAry[i].no = i; 
pAry[i].onclick = function() { 
alert(this.no); 
} 
};

로그인 후 복사

해결책 2: 클로저 레이어를 추가하고 i를 함수 매개변수 형식으로 내부 함수에 전달합니다

var pAry = document.getElementsByTagName("p"); 
for( var i=0; i< 5; i++ ) { 
pAry[i].no = i; 
pAry[i].onclick = function() { 
alert(this.no); 
} 
};

로그인 후 복사

이로 인해 발생하는 클로저 문제에 대해 인터넷에서는 "변수 i가 함수에 포인터나 변수 주소로 저장된다"는 말이 있는데, 모두 포인터와 관련이 있습니다. . . . 그런 다음 좀 더 살펴보세요.

탐색 1, 반환 값은
대신 10입니다.

(function test() { 
var temp =10; 
for(var i=0; i< 5; i++ ){ 
document.getElementById("p"+i).onclick=function() { 
alert(temp); //访问了父函数的变量temp, 闭包 
}
};
temp=20;
})();

로그인 후 복사

2를 탐색하고 10을 한 번 반환한 다음 20을 반환합니다

(function test() { 
var temp =10; 
for( var i=0; i< 5; i++ ) { 
document.getElementById("p"+i).onclick=function() { 
alert(temp); //访问了父函数的变量i, 闭包 
}
if(i===1){
alert(temp);
}
};
temp=20;
})();

로그인 후 복사

1과 2의 탐색을 통해 함수와 동일한 수준의 변수가 함수 내에서 액세스되면 변수가 메모리에 상주한다는 결론을 내릴 수 있습니다. 이 변수에 액세스하면 본질적으로 변수의 주소에 액세스하게 됩니다.

그런 다음 "JS 클로저의 이 객체"에 대한 또 다른 기사를 읽었습니다. 이에 대한 문제를 계속 논의해 보겠습니다.

// js闭包this对象1
var name = 'The Window';
var object = {
  name : 'My Object',
  getNameFunc1 : function(){
    // return this.name;
    console.log(this);//object
    return function(){//闭包，访问的便是全局变量的了，this指windows
     console.log(this);//windows
     return this.name; //The Window
    }
  },
  getNameFunc2 : function(){
     return this.name;//访问的是object
  },
  aa:function(){
   alert(22);
  }
};
alert(object.getNameFunc1()());//弹出“The Window”

로그인 후 복사

질문: 그러면 익명 함수가 범위가 포함된 this 개체를 가져오지 못하는 이유는 무엇입니까?

답변: 모든 함수는 호출될 때 자동으로 두 개의 특수 변수, 즉 this와 인수를 얻습니다. 이 두 변수를 검색할 때 내부 함수는 검색을 활성 개체로 지정하므로 외부 함수에서 이 두 변수에 직접 액세스하는 것은 불가능합니다.
하지만 이는 다음 코드를 사용하여 수행할 수 있습니다(외부 함수의 변수에 직접 액세스).

// js闭包this对象2
var name = 'The Window';
var object = {
  name : 'My Object',
  getNameFunc : function(){
   var that = this;
   console.log(this);//输出的是object
   return function(){
    console.log(this);//输出的仍然是Windows
    return that.name;
   };
  }
};
alert(object.getNameFunc()());//弹出“My Object”

로그인 후 복사

차이점은 this 개체가 that 변수에 할당된다는 것입니다. 함수가 반환된 후에도 해당 개체는 여전히 개체를 참조하므로 개체가 반환됩니다.

나는 클로저에 대해 너무 많이 썼으므로 클로저의 유용성을 언급하겠습니다. 그렇지 않으면 클로저를 계속해서 다루는 것은 나쁜 사람이 될 것입니다.

다음의 일반적인 폐쇄 예를 살펴보세요.

function A(){
 var a=1;
 function B(){
  return a;
 }; 
 return B;
};

var C=A();//C取得A的子作用域B的访问接口
console.log(C());//1 C能访问到B的父级作用域中的变量a

로그인 후 복사

다른 범위가 하위 범위의 액세스 인터페이스를 얻을 수 있는 한, 다른 범위는 하위 범위의 상위 범위 변수에 액세스할 수 있는 방법을 갖게 됩니다. 이런 경우, 나중에 특정 함수의 값에 접근해야 할 경우 매우 유용할 것입니다.

위의 코드 중 상당수는 실제로 온라인에서 찾은 것입니다. 제가 이해한 내용과 읽는 과정을 정리한 것뿐입니다.

본 웹사이트의 성명

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

핫 AI 도구

뜨거운 도구

뜨거운 주제

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

7378

자바 튜토리얼

1628

Cakephp 튜토리얼

1357

라라벨 튜토리얼

1267

PHP 튜토리얼

1216

Related knowledge

C++ 람다 표현식에서 클로저의 의미는 무엇입니까? Apr 17, 2024 pm 06:15 PM

C++에서 클로저는 외부 변수에 액세스할 수 있는 람다 식입니다. 클로저를 생성하려면 람다 표현식에서 외부 변수를 캡처하세요. 클로저는 재사용성, 정보 숨기기, 지연 평가와 같은 이점을 제공합니다. 이는 클로저가 외부 변수가 파괴되더라도 여전히 접근할 수 있는 이벤트 핸들러와 같은 실제 상황에서 유용합니다.

C++ 람다 표현식에서 클로저를 구현하는 방법은 무엇입니까? Jun 01, 2024 pm 05:50 PM

C++ Lambda 표현식은 함수 범위 변수를 저장하고 함수에 액세스할 수 있도록 하는 클로저를 지원합니다. 구문은 [캡처 목록](매개변수)->return-type{function-body}입니다. 캡처 목록은 캡처할 변수를 정의합니다. [=]를 사용하여 모든 지역 변수를 값으로 캡처하고, [&]를 사용하여 모든 지역 변수를 참조로 캡처하거나, [변수1, 변수2,...]를 사용하여 특정 변수를 캡처할 수 있습니다. 람다 표현식은 캡처된 변수에만 액세스할 수 있지만 원래 값을 수정할 수는 없습니다.

C++ 함수에서 클로저의 장점과 단점은 무엇입니까? Apr 25, 2024 pm 01:33 PM

클로저는 외부 함수의 범위에 있는 변수에 액세스할 수 있는 중첩 함수입니다. 클로저의 장점에는 데이터 캡슐화, 상태 보존 및 유연성이 포함됩니다. 단점으로는 메모리 소비, 성능 영향, 디버깅 복잡성 등이 있습니다. 또한 클로저는 익명 함수를 생성하고 이를 콜백이나 인수로 다른 함수에 전달할 수 있습니다.

클로저로 인한 메모리 누수 문제 해결 Feb 18, 2024 pm 03:20 PM

제목: 클로저로 인한 메모리 누수 및 솔루션 소개: 클로저는 내부 함수가 외부 함수의 변수에 액세스할 수 있도록 하는 JavaScript에서 매우 일반적인 개념입니다. 그러나 클로저를 잘못 사용하면 메모리 누수가 발생할 수 있습니다. 이 문서에서는 클로저로 인해 발생하는 메모리 누수 문제를 살펴보고 솔루션과 구체적인 코드 예제를 제공합니다. 1. 클로저로 인한 메모리 누수 클로저의 특징은 내부 함수가 외부 함수의 변수에 접근할 수 있다는 것입니다. 즉, 클로저에서 참조되는 변수는 가비지 수집되지 않습니다. 부적절하게 사용하는 경우,

함수 포인터와 클로저가 Golang 성능에 미치는 영향 Apr 15, 2024 am 10:36 AM

함수 포인터와 클로저가 Go 성능에 미치는 영향은 다음과 같습니다. 함수 포인터: 직접 호출보다 약간 느리지만 가독성과 재사용성이 향상됩니다. 클로저: 일반적으로 느리지만 데이터와 동작을 캡슐화합니다. 실제 사례: 함수 포인터는 정렬 알고리즘을 최적화할 수 있고 클로저는 이벤트 핸들러를 생성할 수 있지만 성능 저하를 가져옵니다.

Java에서는 클로저가 어떻게 구현됩니까? May 03, 2024 pm 12:48 PM

Java의 클로저를 사용하면 외부 함수가 종료된 경우에도 내부 함수가 외부 범위 변수에 액세스할 수 있습니다. 익명의 내부 클래스를 통해 구현된 내부 클래스는 외부 클래스에 대한 참조를 보유하고 외부 변수를 활성 상태로 유지합니다. 클로저는 코드 유연성을 높이지만 익명 내부 클래스에 의한 외부 변수 참조는 해당 변수를 활성 상태로 유지하므로 메모리 누수의 위험을 인지해야 합니다.

PHP 함수의 연쇄 호출 및 폐쇄 Apr 13, 2024 am 11:18 AM

예, 체인 호출 및 클로저를 통해 코드 단순성과 가독성을 최적화할 수 있습니다. 체인 호출은 함수 호출을 유창한 인터페이스에 연결합니다. 클로저는 재사용 가능한 코드 블록을 생성하고 함수 외부의 변수에 액세스합니다.

golang 익명 함수 및 클로저의 장점과 단점 요약 May 05, 2024 am 09:54 AM

익명 함수는 간결하고 익명이지만 가독성이 낮고 디버깅이 어렵습니다. 클로저는 데이터를 캡슐화하고 상태를 관리할 수 있지만 메모리 소비 및 순환 참조가 발생할 수 있습니다. 실제 사례: 간단한 수치 처리에는 익명 함수를 사용할 수 있으며 클로저는 상태 관리를 구현할 수 있습니다.

See all articles

javascript closure_javascript 스킬에 대한 자세한 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제