JavaScript 익명 함수 및 closure_javascript 기술

이 글의 내용
익명 함수 소개
클로저
변수 범위
함수 외부에서 함수 내부의 지역 변수에 접근
클로저를 사용하여 비공개 멤버 구현
소개
클로저 패키지는 익명 함수를 사용하여 구현됩니다. 클로저는 내장된 함수에 의해 생성된 보호된 가변 공간입니다. "보호된 변수"라는 개념은 거의 모든 프로그래밍 언어에서 볼 수 있습니다.
먼저 JavaScript 범위를 살펴보겠습니다.
JavaScript에는 함수 수준 범위가 있습니다. 즉, 함수 내부에 정의된 변수는 함수 외부에서 접근할 수 없습니다.
JavaScript의 범위는 어휘 범위입니다. 즉, 함수는 호출된 범위가 아니라 정의된 범위에서 실행됩니다. 이는 나중에 설명할 JavaScript의 주요 기능입니다.
이 두 가지 요소를 종합하면 변수를 익명 함수로 래핑하여 변수를 보호할 수 있습니다. 다음과 같이 클래스의 개인 변수를 만들 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var baz;
(function() {
var foo = 10;
var bar = 2;
baz = function() {
return foo * bar;
};
} )();
baz();

익명 함수 외부에서 실행하더라도 baz는 여전히 foo 및 bar에 액세스할 수 있습니다.

설명:

1, 1행, baz는 전역 변수입니다.

2, 3~9행, 익명 함수를 정의합니다. , 4행과 5행, foo 및 bar는 익명 함수 내 지역 변수입니다. 6~8행에서는 익명 함수 내에서 익명 함수를 정의하고 이를 전역 변수 baz에 할당합니다. 4, 10행, 바즈한테 전화해. "alert(baz());"로 변경하면 20이 표시됩니다.

5. 논리적으로 말하면 foo 및 bar는 익명 함수 외부에서는 액세스할 수 있습니다.

클로저를 설명하기 전에 먼저 익명함수에 대해 알아보겠습니다.



익명 함수
익명 함수는 함수 이름을 정의할 필요가 없는 함수입니다. 익명 함수는 람다 표현식과 동일합니다. 유일한 차이점은 문법적 형태입니다. 람다 표현식은 한 단계 더 나아갑니다. 본질적으로 이들의 기능은 메서드를 생성하는 것입니다. 즉, 함수 정의를 생략하고 함수 본문을 직접 작성하는 인라인 메서드입니다.

Lambda 표현식 일반 형식:

(입력 매개변수) => {statement;}
여기서:

매개변수 목록, 여러 개, 하나 또는 매개변수 없음이 있을 수 있습니다. . 매개변수는 암시적으로 또는 명시적으로 정의할 수 있습니다.
함수 본문인 표현식 또는 명령문 블록입니다.
위 코드 6~8번은 함수명이 없고 엄밀히 말하면 구문은 다르지만 목적은 동일합니다.

예시 1:




코드 복사

코드는 다음과 같습니다. var baz1 = function() { var foo = 10; var bar = 2;

return foo * bar

}; 10;
var bar = 2;
alert(baz1())
alert(baz2) ;


설명:

1, baz1은 baz2와 완전히 동일하지만 baz2와 비교하면 baz1은 함수 정의를 생략하고 함수 본문을 직접 사용하므로 매우 간단해 보입니다.



클로저
변수 범위
예 2: 전역 변수는 함수 내에서 액세스할 수 있습니다.

코드 복사


코드는 다음과 같습니다.


var baz = 10; 🎜>function foo() {

alert(baz); } foo(); 괜찮습니다.

예 3: 함수 내부의 지역 변수는 함수 외부에서 접근할 수 없습니다.





코드 복사

코드는 다음과 같습니다.


function foo() {
var bar = 20;

} alert(bar); 오류가 보고됩니다.

또한, 함수 내부에서 변수를 선언할 때는 반드시 var 키워드를 사용해야 하며, 그렇지 않으면 전역 변수가 선언됩니다.

예시 4:

코드 복사


코드는 다음과 같습니다.


function foo() {
bar = 20;

} alert(bar); 함수 외부에서 함수 내부 변수에 접근 실제 상황에서는 함수 외부에서 함수 내부의 지역 변수를 얻어야 합니다. 먼저 예제 5를 살펴보겠습니다.

예시 5:





코드 복사

코드는 다음과 같습니다.

function foo() {
var a = 10;
function bar() {
a *= 2
}
bar()
return a;
}
var baz = foo();
alert(baz);

a는 foo에 정의되어 있으며 bar도 액세스할 수 있습니다. foo 내에 정의되어 있습니다. 이제 foo 외부에서 bar를 호출하려면 어떻게 해야 합니까?

예시 6:

코드 복사 코드는 다음과 같습니다.

function foo() {
var a = 10;
function bar() {
a *= 2
return a;
return bar; >}
var baz = foo();
alert(baz())
alert(baz()); = foo( );
alert(blat());



참고:

1, 이제 외부에서 액세스할 수 있습니다.

2, JavaScript 의 범위는 어휘입니다. a는 foo가 호출되는 범위가 아니라 정의된 foo에서 실행됩니다. bar가 foo에 정의되어 있는 한 foo의 실행이 종료되더라도 foo에 정의된 변수 a에 액세스할 수 있습니다. 즉, "var baz = foo()"가 실행된 후에는 foo가 실행되어 a가 더 이상 존재하지 않아야 한다고 추론합니다. 그러나 나중에 baz를 호출하면 a가 여전히 존재하는 것으로 확인됩니다. 이는 호출을 실행하는 것이 아니라 정의에 따라 실행되는 JavaScript의 특징 중 하나입니다.

그 중 "var baz = foo()"는 bar 함수에 대한 참조이고, "var blat= foo()"는 다른 bar 함수에 대한 참조입니다.

클로저를 사용하여 비공개 멤버 구현
이제 개체 내부에서만 액세스할 수 있는 변수를 만들어야 합니다. 클로저는 특정 함수만 액세스할 수 있는 변수를 생성할 수 있고 해당 함수에 대한 호출 전반에 걸쳐 지속되므로 완벽합니다.

Private 속성을 생성하려면 생성자 범위에 해당 변수를 정의해야 합니다. 이러한 변수는 권한 있는 메서드를 포함하여 범위에 정의된 모든 함수에서 액세스할 수 있습니다.

예시 7:





코드 복사

코드는 다음과 같습니다. var Book = function(newIsbn, newTitle, newAuthor) { // 프라이빗 속성 var isbn, title, 작성자

// 프라이빗 메서드

function checkIsbn(isbn) {
// TODO
}
// 권한 있는 메서드
this.getIsbn = function() {
return isbn
}
this.setIsbn = function(newIsbn) {
if (!checkIsbn(newIsbn)) throw new Error('도서: 잘못된 ISBN.')
isbn = newIsbn
}
this.getTitle = function() {
return title;
};
this.setTitle = function(newTitle) {
title = newTitle || '지정된 제목이 없습니다.'
this.getAuthor = function() {
return 작성자;
};
this.setAuthor = function(newAuthor) {
author = newAuthor || '지정된 작성자가 없습니다.'
//생성자 코드
this.setIsbn(newIsbn);
this.setTitle(newTitle);
this.setAuthor(newAuthor)
};

// 권한이 없는 공개 방법
Book .prototype = {
display: function() {
// TODO
}
}



설명:

1, 대신 var를 사용하여 변수 isbn, title 및 Author를 선언하면 해당 변수는 Book 생성자에만 존재한다는 의미입니다. checkIsbn 함수도 비공개이기 때문에 마찬가지입니다.

2. 비공개 변수와 메소드에 액세스하는 메소드는 Book에서만 선언하면 됩니다. 이러한 메서드를 권한 있는 메서드라고 합니다. 공개 메소드이기 때문에 getIsbn, setIsbn, getTitle, setTitle, getAuthor, setAuthor(값 getter 및 생성자)와 같은 비공개 변수 및 비공개 메소드에 액세스할 수 있습니다.

3. 객체 외부에서 이러한 권한 있는 메서드에 액세스하려면 해당 메서드 앞에 this 키워드를 추가합니다. 이러한 메서드는 Book 생성자의 범위에 정의되어 있으므로 전용 변수 isbn, title 및 작성자에 액세스할 수 있습니다. 그러나 이러한 권한 있는 메서드에서 isbn, title 및 Author 변수를 참조할 때 this 키워드는 사용되지 않고 직접 인용됩니다. 공개되지 않기 때문입니다.

4. Display와 같이 Book.prototype에 선언된 것과 같은 개인 변수에 직접 액세스할 필요가 없는 모든 메서드. 개인 변수에 직접 액세스할 필요는 없지만 get*, set* 소개를 통해 액세스할 수 있습니다.

5, 이런 방식으로 생성된 객체는 진정한 개인 변수를 가질 수 있습니다. 다른 사람은 평가자를 통해서만 Book 개체의 내부 데이터에 직접 액세스할 수 있습니다. 이렇게 하면 모든 것을 통제할 수 있습니다.

그러나 이 접근 방식의 단점은 다음과 같습니다.

"open door" 객체 생성 모드에서는 모든 메소드가 프로토타입 프로토타입 객체에서 생성되므로 객체 인스턴스가 몇 개 생성되더라도 이러한 방법은 메모리에 복사본이 하나만 있습니다.
이 섹션의 접근 방식을 사용하면 새 객체 인스턴스가 생성되지 않으면 각 개인 메서드(예: checkIsbn) 및 권한 있는 메서드(예: getIsbn, setIsbn, getTitle, setTitle, getAuthor, setAuthor)에 대해 하나씩 생성됩니다. 새 사본.
따라서 이 섹션의 방법은 private 멤버가 실제로 필요한 상황에만 사용하기에 적합합니다. 또한 이 접근 방식은 상속에 도움이 되지 않습니다.