자바스크립트 클로저
클로저란 무엇입니까
클로저에 대한 공식적인 설명은 다음과 같습니다. 많은 변수가 있는 표현식(보통 함수)과 이러한 변수에 바인딩된 환경이므로 이러한 변수도 표현식의 일부입니다. . 클로저의 특징:
1. 함수 변수에 대한 참조로 함수가 반환될 때 활성화됩니다.
2. 클로저는 함수가 반환될 때 리소스를 해제하지 않는 스택 영역입니다.
간단히 말해서 Javascript는 내부 함수의 사용을 허용합니다. 즉, 함수 정의와 함수 표현식은 다른 함수의 함수 본문에 위치합니다. 또한 이러한 내부 함수는 모든 지역 변수, 매개변수 및 해당 함수가 존재하는 외부 함수에 선언된 기타 내부 함수에 액세스할 수 있습니다. 이러한 내부 함수 중 하나가 이를 포함하는 외부 함수 외부에서 호출되면 클로저가 형성됩니다.
클로저를 작성하고 사용하는 여러 방법
첫 번째 작성 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());
</script>
</head>
<body>
</body>
</html>이러한 작성 방법은 특별한 것이 아니며 함수에 몇 가지 속성을 추가할 뿐입니다.
두 번째 작성 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
</script>
</head>
<body>
</body>
</html>이 작성 방법은 변수를 선언하고 변수에 함수를 값으로 할당하는 것입니다.
세 번째 작성 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );
</script>
</head>
<body>
</body>
</html>이 방법이 가장 잘 이해되는데, 새 개체를 만든 다음 해당 개체에 속성과 메서드를 추가하는 것입니다.
글쓰기 네 번째 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
</script>
</head>
<body>
</body>
</html>이 방법은 일반적으로 사용되며 가장 편리합니다. var obj = {}는 빈 객체를 선언하는 것입니다
Javascript 클로저의 목적
사실 클로저를 사용하면 많은 일을 할 수 있습니다. 예를 들어, 객체 지향 코딩 스타일을 시뮬레이션할 수 있으며, 코드를 더욱 우아하고 간결하게 표현하고 일부 측면에서 코드의 실행 효율성을 향상시킵니다.
1. 익명 자체 실행 기능
2. 결과 캐싱
3. 구현 클래스 및 상속
JavaScript 내장 함수모든 함수는 전역 변수에 접근할 수 있습니다.
사실 JavaScript에서는 모든 함수가 그 위의 범위에 액세스할 수 있습니다.
JavaScript는 중첩 함수를 지원합니다. 중첩된 함수는 상위 수준의 함수 변수에 접근할 수 있습니다.
이 예에서 내장 함수 plus()는 상위 함수의 카운터 변수에 액세스할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</html>외부에서 plus() 함수에 액세스할 수 있으면 카운터 딜레마를 해결할 수 있습니다.
또한 counter = 0이 한 번만 실행되도록 해야 합니다.
여기서는 폐쇄가 필요합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>예제 분석
변수 add는 함수 자체 호출의 반환 단어 값을 지정합니다.
자체 호출 기능은 한 번만 실행됩니다. 카운터를 0으로 설정합니다. 함수 표현식을 반환합니다.
add 변수를 함수로 사용할 수 있습니다. 멋진 부분은 함수 위의 범위에서 카운터에 대한 액세스를 제공한다는 것입니다.
이를 JavaScript 클로저라고 합니다. 함수가 개인 변수를 가질 수 있게 해줍니다.
카운터는 익명 함수의 범위로 보호되며 add 메소드를 통해서만 수정할 수 있습니다.
클로저란 상위 함수가 닫혀 있어도 상위 함수 범위 내의 변수에 접근할 수 있는 함수입니다.
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~ 