JavaScript에서 함수를 정의할 때 var foo = function() {}과 function foo()의 차이점에 대한 소개(자세한 튜토리얼)

이 글에서는 자바스크립트에서 함수를 정의할 때 var foo = function(){}과 function foo()의 차이점을 주로 소개합니다. 필요하신 분들은 참고하시면 됩니다.

어느 날 코드를 작성하다가 갑자기 이런 문제가 발생했습니다. . 여기서 요약하겠습니다.

JavaScript 함수 및 변수 선언의 "호이스트" 동작

간단히 말하면 익명 함수를 사용하는 경우

var a = {}var a = {}

这种方式， 编译后变量声明a 会“被提前”了，但是他的赋值（也就是a）并不会被提前。

也就是，匿名函数只有在被调用时才被初始化。

如果使用

function a () {};

这种方式， 编译后函数声明和他的赋值都会被提前。

也就是说函数声明过程在整个程序执行之前的预处理就完成了，所以只要处于同一个作用域，就可以访问到，即使在定义之前调用它也可以。

看一个例子

function hereOrThere() { //function statement
  return 'here';
}
console.log(hereOrThere()); // alerts 'there'
function hereOrThere() {
  return 'there';
}

我们会发现alert(hereOrThere) 语句执行时会alert('there')

이런 식으로 컴파일된 변수 선언 a는 "고급"되지만 할당(즉, a)은 고급되지 않습니다.

즉, 익명 함수는 호출될 때만 초기화됩니다.

function a () {};

를 사용하면 컴파일된 함수 선언과 해당 할당이 고급화됩니다.

즉, 전체 프로그램이 실행되기 전에 함수 선언 과정의 전처리가 완료되므로 동일한 범위 내에 있으면 정의 전에 호출하더라도 접근이 가능합니다.

예제를 보세요

function hereOrThere() { //function statement
 return 'here';
}
function hereOrThere() {//申明前置了，但因为这里的申明和赋值在一起，所以一起前置
 return 'there';
}
console.log(hereOrThere()); // alerts 'there'

alert(hereOrThere) 문이 실행되면 alert('there')가 나타나는 것을 알 수 있습니다! 여기서의 동작은 실제로 매우 예상치 못한 것입니다. 주된 이유는 JavaScript 함수 선언의 "초기" 동작입니다. 즉, JavaScript를 사용하면 변수와 함수를 선언하기 전에 사용할 수 있으며 두 번째 정의가 첫 번째 정의를 재정의합니다. 즉, 위의 코드를 컴파일한 후에는

var hereOrThere = function () { // function expression
  return 'here';
};
console.log(hereOrThere()); // alerts 'here'
hereOrThere = function () {
  return 'there';
};

우리가 기대하는 동작

var hereOrThere；//申明前置了
hereOrThere = function() { // function expression
 return 'here';
};
console.log(hereOrThere()); // alerts 'here'
hereOrThere = function() {
 return 'there';
};

이 프로그램을 컴파일한 후에는 다음과 같습니다. rrreee

위 내용은 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 될 것입니다. 🎜🎜관련 기사: 🎜🎜🎜vue2.0 페이지 탐색 프롬프트 안내 구현 방법🎜🎜🎜🎜vue2.0 상태 값에 따라 스타일 표시를 변경하는 방법🎜🎜🎜🎜Vuex를 사용하여 메모 작성 애플리케이션을 구현하는 방법 🎜🎜

위 내용은 JavaScript에서 함수를 정의할 때 var foo = function() {}과 function foo()의 차이점에 대한 소개(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!