> 웹 프론트엔드 > JS 튜토리얼 > js의 클로저 설명 및 사전 변수 선언 예시(코드)

js의 클로저 설명 및 사전 변수 선언 예시(코드)

不言
풀어 주다: 2018-08-15 16:28:18
원래의
1558명이 탐색했습니다.

이 글은 js의 클로저에 대한 설명과 변수 선언의 예(코드)를 미리 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Closure

함수 A에 함수 B를 선언하고, 함수 B는 함수 A의 범위에 있는 변수를 사용하고, 함수 A는 함수 B를 반환(return)하고, 함수 B는 함수 뒤에 클로저를 형성합니다. A가 호출됩니다. 반환된 함수 B가 존재하는 한 함수 A의 범위는 항상 존재합니다

function makeFn(){
        var n1 = 100;
        function fn(){
            var n2 = 200;
            console.log(n1);
        }
        return fn;
    }
    var f2 = makeFn();
    f2();
로그인 후 복사

클로저는 다음과 같은 개체의 개인 속성을 실현할 수 있습니다.

var obj = {
        name:"sunset",
        age:12,
        speak:function(){
            console.log("我是"+this.name);
        }
    }
    console.log(obj.name);
로그인 후 복사

또 다른 예:

function makeObj(){
        var name = "sunset";
        var age = 12;
        var obj = {
            speak:function(){
                console.log("我叫"+name);
            }
        }
        return obj;
    }
    console.log(obj.speak());
로그인 후 복사

마지막 매우 좋음 예: (jQuery를 가져온 후 확인)

<script>
    for (var i = 0; i < 10; i++) {
        function makeFn(index) {
            function fn() {
                console.log(index)
            }
            return fn;
        }
        var btn = makeFn(i);
        $("<button></button>")
        .text(i + 1)
        .appendTo(document.body)
        .on("click",btn)
    }
</script>
로그인 후 복사

변수 사전 선언:

js 범위에서는 모든 변수의 선언이 고급화되지만 할당은 고급화되지 않습니다. 미리 보여드렸으니 익힌 후 설명할 필요가 없습니다)

var a = 3;
    function f1(){
       console.log(a);
       var a = 10;
    }

f1();
로그인 후 복사

function f1(){
        var a;
        console.log(a);
        a = 10;
    }
f1();
로그인 후 복사

와 동일합니다. 관련 권장 사항:

PHP 외부 변수의 클로저 획득 및 변수의 전역 키워드 선언 explain_php example

자세히 JS 변수 선언에 대한 설명

JavaScript 클로저 - 클로저에 있는 변수와 이 객체

위 내용은 js의 클로저 설명 및 사전 변수 선언 예시(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿