자바스크립트 함수 선언과 함수 표현의 차이점 분석_기본지식

일반적으로 js에서 함수를 작성할 때 일반적으로 function fn(){}이라는 기존 방식으로 함수를 선언합니다. 몇몇 훌륭한 플러그인을 읽을 때 필연적으로 var fn = function() {}이 무엇인지 보게 됩니다. 오늘은 캐서롤을 깨고 질문을 던지는 정신으로 이 매혹적인 함수 선언에 대해 이야기해 보겠습니다.

함수 선언

함수 선언 샘플 코드

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

함수 fn() {
console.log('fn 함수 실행..');
// 코드..
}

이렇게 fn이라는 함수를 선언했는데, 이 함수 위에 호출하면 실행될 것 같나요? 아니면 오류가 보고되나요?

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

fn() // 우리가 선언한 fn 함수를 호출합니다. fn () { console.log('fn 함수 실행..'); // 코드..}

콘솔 출력:

네, 이때 fn 함수를 호출할 수 있습니다. 이유를 요약하면 다음과 같습니다.

요약:

1: 이때 fn 함수는 변수의 결과로, 기본적으로 전역 컨텍스트의 변수에 저장됩니다(window.function 이름으로 확인 가능)

　2: 이 메소드는 전역 컨텍스트 단계에 들어갈 때 생성되는 함수 선언입니다. 코드 실행 단계에서 이미 사용 가능합니다. ps: 자바스크립트는 메소드에 들어갈 때마다 컨텍스트 환경(글로벌 → 로컬)을 초기화합니다

　3: 변수 객체에 영향을 미칠 수 있음(컨텍스트에 저장된 변수만 해당)

함수 표현

함수 표현 예시 코드

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

var fn = 함수 () {
console.log('fn 함수 [표현식] 명령문 실행..')
// 코드..
}

　이런 방식으로 익명 함수를 선언하고 fn 변수에 대한 참조를 지정합니까?

위와 아래에서 다시 한번 표현식으로 선언한 함수를 호출하면 콘솔에 출력되는 모습을 볼 수 있습니다.

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

// 콘솔 출력을 명확하게 보기 위해 각 호출 전후에 표시를 하여 가독성을 높였습니다.
console.log('이전 통화가 시작되었습니다..');
fn();
console.log('이전 통화가 종료되었습니다..');
var fn = 함수 () {
console.log('fn 함수 [표현식] 명령문 실행..')
// 코드..
}
console.log('통화가 시작된 후..');
fn();
console.log('통화가 시작된 후..');

콘솔 인쇄 결과:

코드가 실행되고 fn() 함수가 처음 호출되면 다음 메시지가 표시되고, fn은 함수가 아닙니다(fn은 메서드가 아닙니다). 오류가 발생하면 작업이 종료됩니다. 마주쳤다.

이는 fn()이 처음 호출되었을 때 var fn 변수가 전역 객체의 속성으로 존재하지 않고, fn이 참조하는 익명 함수 컨텍스트가 초기화되지 않아 이전 호출이 실패했음을 보여줍니다. .

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

// 이제 이전 호출 로직을 주석 처리한 다음 콘솔 출력을 살펴봅니다.
// console.log('이전 호출이 시작되었습니다..');
// fn();
// console.log('이전 통화가 종료되었습니다..');
var fn = 함수 () {
console.log('fn 함수 [표현식]이 실행을 선언합니다..')
// 코드..
}
console.log('통화는 나중에 시작됩니다..');
fn(); // 표현식
다음에 호출됩니다. console.log('통화는 나중에 시작됩니다..');

콘솔 인쇄 결과:

표현식 함수 이후에 호출이 가능하다고 볼 수 있는 이유를 정리해볼까요?

요약:

1: 우선 변수 자체가 함수로 존재하는 것이 아니라 익명 함수에 대한 참조입니다(값 유형은 참조가 아닙니다)

2: 코드 실행 단계에서 전역 컨텍스트가 초기화되면 전역 속성으로 존재하지 않으므로 변수 객체의 오염이 발생하지 않습니다

3: 이 유형의 선언은 일반적으로 플러그인 개발에서 일반적이며 클로저에서 콜백 함수에 대한 호출로 사용될 수도 있습니다

　그래서 function fn () {}는 var fn = function () {}와 같지 않습니다.

위 내용은 이 기사의 전체 내용입니다. 아이디어가 매우 명확하고 비교도 매우 명확합니다. 친구 여러분, 꼭 읽어보세요