JavaScript 고급 기능 - 범위 샘플 코드 세부정보

javascript에서는 범위를 전역 범위와 로컬 범위로 구분하는데, 로컬 범위는 실제로 함수 범위를 함수 범위의 최소 범위로 간주합니다.

전역 범위

객체, 예를 들어 윈도우 객체와 윈도우 객체의 속성 등 코드 어디에서나 접근할 수 있으며, 전역 범위를 갖습니다.
1. 가장 바깥쪽 레이어에 정의된 변수는 기본적으로 모두 창 개체의 속성입니다.
2. 정의되지 않은 변수는 기본적으로 창 개체의 속성입니다. 새 버전의 브라우저에서는 이 문제가 해결되었습니다!
예:

var firstName = "leo";
function changeName() {
    var secondName = "jut";
    fullName = "jutleo";
    function getName() {
        console.log(secondName);
    }
    getName();
}
console.log(firstName);
console.log(fullName);//报错
// console.log(secondName);//报错
changeName();
// getName();//报错

Local Scope/Function Scope(Local Scope/Function Scope)

함수에서 변수를 정의할 때 이 변수는 현재 함수인 javascript에만 표시됩니다. 현재 함수의 범위를 검색하지 않으면 전역 범위에서 찾을 수 없을 때까지 위쪽으로 계속 검색하고 f1에서

var version = "version_1";
var f1 = function() {
    console.log(version);//version_1
}
f1();

를 찾을 수 없습니다. 함수를 계속해서 위쪽으로 검색하게 됩니다

var version = "version_1";
var f2 = function() {
    var version = "version_2";
    console.log(version);//version_2
}
f2();

f2 함수에서 직접

var socpe = "scope_01";
var f3 = function() {
    console.log(scope); //undefined
    var scope = "scope_02";
}
f3();

를 찾으세요. 왜 그럴까요? JavaScript는 f3 함수에서 범위 변수를 검색하여 찾는 것으로 나타났습니다. 이때 외부 범위는 무시되지만 실행이 console.log(scope)에 도달하면 범위가 초기화되지 않았으므로 undefined

var f4 = function() {
    var scope = "scope_02";
    (function(){
        var scope = "scope_03";
        (function(){
            console.log(scope); //scope_03
        })();
    })();
}
f4();

중첩은 동일한 규칙을 따라야 합니다. 먼저 함수 내부를 검색하세요. 찾을 수 없으면 상위 수준으로 계속하세요.

아아아아

이게 왜죠? JavaScript 함수가 중첩되면 중첩 관계에 따라 범위가 결정되고 호출 순서는 무시됩니다!

말이 이렇게 많았는데 이 스코프를 어떻게 사용하나요? 위의 예를 보면 JavaScript가 변수를 검색할 때 순서대로 올라가는 체인이 스코프 체인이라는 것을 알 수 있습니다. 실제 응용 프로그램에서는 변수의 위치가 깊을수록 전역 범위에서 찾을 때까지 읽기 및 쓰기 속도가 느려집니다.

예제 보기:

var x_scope = "leo";
var f5 = function() {
    console.log(x_scope); //leo
}
var f6 = function() {
    var x_scope = "jut";
    f5();
}
f6();

범위 체인의 검색 논리에 따르면 문서 변수를 검색하려면 전역 개체에서 최종적으로 발견될 때까지 전체 범위 체인을 통과해야 합니다. 함수가 두 번 참조됩니다. 최적화는 다음과 같습니다:

function setLabelBgColor(){
    document.getElementById("btn").onclick=function(){
        document.getElementById("label").style.backgroundColor="red";
    };
}

이것은 단지 예일 뿐이며 성능이 크게 향상되지는 않습니다. 그러나 실제 사용에서는 글로벌 변수에 대량으로 접근하는 상황은 피해야 한다.

function setLabelBgColor(){
    var doc = document;
    doc.getElementById("btn").onclick=function(){
        doc.getElementById("label").style.backgroundColor="red";
    };
}

생각해 보세요. 여러분이 보는 모든 라이브러리와 프레임워크는 왜 이렇게 시작할까요?

위 내용은 JavaScript 고급 기능 - 범위 샘플 코드 세부정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!