js 작용역 소기var 변수와function 차이

2323 단어
일단 예를 들어서 실험을 해볼게요.
function createD(){
    var dir = {
        name: "d",
        ctrl: myCtrl,
        ctrl2: yourCtrl
    };
    return dir;

    function myCtrl (){
        console.log('my ctrl');
    }

    var yourCtrl = function(){
        console.log('your ctrl');
    };
}

var d = createD();
d.ctrl();
d.ctrl2();

출력 결과를 맞힐 수 있어요.
 
 
//출력:
d.ctrl();                // ： my ctrl               
d.ctrl2();               // ： Uncaught TypeError: d.ctrl2 is not a function

 
우선 상기 예에서 쓰는 방법은 사실 규범에 부합되지 않기 때문에 변수와 함수의 정의는 모두 앞에 두는 것이 가장 좋다.
var의function의 성명은 다르다. var의 성명은 변수 성명을 작용역의 맨 위로 끌어올릴 수 있지만 변수의 값은 제자리에 있기 때문에 변수 값은 리턴 후에도 실행되지 않는다.function 성명은 모두 맨 위로 올라가 실행됩니다.
따라서createD () 안에 있는yourCtrl 변수는 실제적으로 undefined가 아직 오지 않았고 값이 리턴되었습니다.
사전 컴파일된 코드는 다음과 같습니다.
function createD(){
    var dir = {
        name: "d",
        ctrl: function(){
            console.log('my ctrl');
        },
        ctrl2: yourCtrl
    },
    yourCtrl;
    
    return dir;

    yourCtrl = function(){
        console.log('your ctrl');
    };
}

js를 미리 컴파일할 때 작용역을 스캔하여 작용역 내의 함수 성명을 작용역 맨 위로 끌어올립니다.실행 코드는 제자리에 있습니다.
예:
function(){
　　console.log('start');
　　var a = 1;
}
 ， ：
function(){
　　var a;
　　console.log('start');
　　a = 1;
}

설령 이vara가if의 괄호 안에 있다 하더라도 앞당겨질 것이다.
그래서 우리가 자주 강조하는 인코딩 규범은 여전히 매우 존재적 의의가 있다!
Graph QL, React, Apollo 클라이언트 및 Apollo 서버 응용 프로그램을 사용하는 방법
어디서부터 웹 구성 요소 구축기초 지식

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage