>  기사  >  웹 프론트엔드  >  함수 표현식 VS JS 함수 선언, 차이점에 대해 이야기해 보겠습니다.

함수 표현식 VS JS 함수 선언, 차이점에 대해 이야기해 보겠습니다.

青灯夜游
青灯夜游앞으로
2021-07-01 10:20:452230검색

JavaScript에서 함수 선언과 함수 표현식은 모두 function 키워드를 사용하여 함수를 생성합니다. 둘이 매우 유사하고 쉽게 혼동될 수 있다고 생각하시나요? 다음 기사에서는 함수 표현식과 함수 선언을 분석하고 함수 표현식과 함수 선언의 차이점을 소개합니다.

함수 표현식 VS JS 함수 선언, 차이점에 대해 이야기해 보겠습니다.

JavaScript에서 function 키워드는 간단한 작업, 즉 함수 생성을 수행할 수 있습니다. 그러나 키워드를 사용하여 함수를 정의하면 다른 속성을 가진 함수를 만들 수 있습니다. function关键字可以完成一个简单的工作:创建一个函数。 但是,使用关键字定义函数的方式可以创建具有不同属性的函数。

在本文中,我们来看一下,如何使用function关键字来定义函数声明和函数表达式,以及这两种函数之间的区别又是什么。

1.函数表达式vs函数声明

函数声明和函数表达式是使用 function 关键字创建函数的2种方法。

举个例子来说明差异,我们创建两个版本的 sums 函数:

function sumA(a, b) {
  return a + b;
}

(function sumB(a, b) {
  return a + b;
});

sumA(1, 2); // ???
sumB(1, 2); // ???

动手试试:https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2/

一般情况,像往常一样定义函数(sumA函数)。在另一种情况下,函数被放置在一对括号中(sumB函数)。

如果调用 sumA(1,2)sumB(1,2) 会发生什么?

如预期的那样,sumA(1, 2) 返回 3。但是,调用sumB(1, 2)会引发异常:Uncaught ReferenceError: sumB is not defined

其原因是sumA是使用函数声明创建的,该函数声明在当前作用域中创建一个函数变量(具有与函数名称相同的名称)。 但是sumB是使用函数表达式创建的(将其包装在括号中),该函数表达式不会在当前作用域内创建函数变量。

如果你想访问使用函数表达式创建的函数,那么将函数对象保存到一个变量中:

// Works!
const sum = (function sumB(a, b) {
  return a + b;
});

sum(1, 2); // => 3

如果语句以`function`关键字开头,则为函数声明,否则为函数表达式。

// 函数声明:以`function`关键字开头
function sumA(a, b) {
  return a + b;
}

// 函数表达式:不以`function`关键字开头
const mySum = (function sumB(a, b) {
  return a + b;
});

// 函数表达式:不以`function`关键字开头
[1, 2, 3].reduce(function sum3(acc, number) { 
  return acc + number 
});

从更高的角度来看,函数声明对于创建独立函数很有用,但是函数表达式可以用作回调。

现在,我们更深入地研究函数声明和函数表达式的行为。

2.函数声明

在前面的示例中已经看到的,sumA是一个函数声明:

// Function declaration
function sumA(a, b) {
  return a + b;
}

sumA(4, 5); // => 9

当一个语句包含function关键字,后跟函数名称,一对带参数的括号(param1, param2, paramN)以及包围在一对花括号{}中的函数主体时,就会发生函数声明。

函数声明会创建一个函数变量:一个与函数名称同名的变量(例如,上一个示例中的sumA)。 在当前作用域中(在函数声明之前和之后),甚至在函数作用域本身内,都可以访问该函数变量。

函数变量通常用于调用函数或将函数对象传递给其他函数(传递给高阶函数)。

例如,编写一个函数 sumArray(array),以递归方式累加一个数组的项(该数组可以包含数字或其他数组):

sumArray([10, [1, [5]]]); // => 16

function sumArray(array) {
  let sum = 0;
  for (const item of array) {
    sum += Array.isArray(item) ? sumArray(item) : item;
  }
  return sum;
}

sumArray([1, [4, 6]]); // => 11

动手试试:https://jsfiddle.net/dmitri_pavlutin/n7wcryuo/

function sumArray(array) { ... } 是函数声明。

包含函数对象的函数变量sumArray在当前作用域中可用:sumArray([10, [1, [5]]])之前和sumArray([1, [4, 6]])之后,函数声明, 以及函数本身的作用域sumArray([1, [4, 6]])(允许递归调用)。

由于提升,函数变量在函数声明之前可用。

2.1 函数声明的注意事项

函数声明语法的作用是创建独立函数。 函数声明应在全局作用域内,或直接在其他函数的作用域内:

// Good!
function myFunc1(param1, param2) {
  return param1 + param2;
}

function bigFunction(param) {
  // Good!
  function myFunc2(param1, param2) {
    return param1 + param2;
  }

  const result = myFunc2(1, 3);
  return result + param;
}

基于相同的原因,不建议在条件(if)和循环(whilefor)中使用函数声明:

// Bad!
if (myCondition) {
  function myFunction(a, b) {
    return a * b;
  }
} else {
  function myFunction(a, b) {
    return a + b;
  }
}

myFunction(2, 3);

使用函数表达式更好地执行有条件地创建函数。

3.函数表达式

function关键字在表达式内部创建函数(带有或不带有名称)时,将出现函数表达式。

以下是使用表达式创建的函数的示例:

// Function expressions

const sum = (function sumB(a, b) {
  return a + b;
});

const myObject = {
  myMethod: function() {
    return 42;
  }
};

const numbers = [4, 1, 6];
numbers.forEach(function callback(number) {
  console.log(number);
  // logs 4
  // logs 1
  // logs 1
});

在函数表达式中创建了两种函数:

  • 如果表达式中的函数没有名称,例如 function(){return 42},那是一个匿名函数表达式
  • 如果函数具有名称,例如 上一个示例中的sumB
  • 이 글에서는 function 키워드를 사용하여 함수 선언과 함수 표현식을 정의하는 방법과 두 함수의 차이점을 살펴보겠습니다.

1. 함수 표현식과 함수 선언함수 선언과 함수 표현식은 function 키워드를 사용하여 함수를 만드는 두 가지 방법입니다.

차이점을 설명하기 위해 두 가지 버전의 sums 함수를 만듭니다.

// Functions created conditionally
let callback;
if (true) {
  callback = function() { return 42 };
} else {
  callback = function() { return 3.14 };
}

// Functions used as callbacks
[1, 2, 3].map(function increment(number) {
  return number + 1;
}); // => [2, 3, 4]

직접 시도해 보세요: https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2/

🎜 일반적인 경우에는 평소와 같이 함수를 정의합니다(sumA 함수). 또 다른 경우에는 함수가 한 쌍의 괄호 안에 배치됩니다(sumB 함수). 🎜🎜sumA(1,2)sumB(1,2)를 호출하면 어떻게 되나요? 🎜🎜예상대로 sumA(1, 2)3을 반환합니다. 그러나 sumB(1, 2)를 호출하면 Uncaught ReferenceError: sumB가 정의되지 않았습니다라는 예외가 발생합니다. 🎜🎜이유는 sumA가 현재 범위에서 함수 변수(함수 이름과 동일한 이름으로)를 생성하는 함수 선언을 사용하여 생성되기 때문입니다. 그러나 sumB는 현재 범위에서 함수 변수를 생성하지 않는 함수 표현식(괄호로 묶음)을 사용하여 생성됩니다. 🎜🎜함수 표현식을 사용하여 생성된 함수에 액세스하려면 함수 개체를 변수에 저장하세요. 🎜
const numbers = [4];
numbers.forEach(function callback(number) {
  console.log(callback); // logs function() { ... }
});

console.log(callback); // ReferenceError: callback is not defined
🎜문이 `function` 키워드로 시작하면 함수 선언입니다. , 그렇지 않으면 함수 표현식입니다. 🎜
const callback = function(number) {
  console.log(callback); // logs function() { ... }
};

const numbers = [4];
numbers.forEach(callback);
console.log(callback); // logs function() { ... }
🎜 높은 수준의 관점에서 함수 선언은 독립형 함수를 만드는 데 유용하지만 함수 표현식을 콜백으로 사용할 수 있습니다. 🎜🎜이제 함수 선언과 함수 표현식의 동작을 더 자세히 살펴보겠습니다. 🎜

🎜2. 함수 선언🎜

🎜이전 예에서 본 것처럼 sumA는 함수 선언입니다.🎜rrreee🎜문에 함수 키워드, 함수 이름, 매개변수가 포함된 괄호 쌍 <code>(param1, param2, paramN), 중괄호 쌍 {}으로 묶인 함수 본문 > 이면 함수 선언이 발생합니다. 🎜🎜함수 선언은 함수 변수, 즉 함수 이름과 동일한 이름을 가진 변수를 생성합니다(예: 이전 예의 sumA). 함수 변수는 현재 범위(함수 선언 전후) 및 함수 범위 자체 내에서도 액세스할 수 있습니다. 🎜🎜함수 변수는 일반적으로 함수를 호출하거나 함수 객체를 다른 함수에 전달(고차 함수에 전달)하는 데 사용됩니다. 🎜🎜예를 들어, 배열의 항목을 반복적으로 누적하는 함수 sumArray(array)를 작성하세요(배열에는 숫자나 다른 배열이 포함될 수 있음). 🎜rrreee
🎜 사용해 보세요: https: //jsfiddle.net/dmitri_pavlutin/n7wcryuo/🎜
🎜function sumArray(array) { ... }는 함수 선언입니다. 🎜🎜함수 개체가 포함된 함수 변수 sumArray는 현재 범위(sumArray([10, [1, [5]]])sumArray)에서 사용할 수 있습니다. ([1, [4, 6]])이후 함수 선언과 함수 자체의 범위 sumArray([1, [4, 6]]) (재귀적) 통화가 허용됩니다). 🎜🎜호이스팅으로 인해 함수가 선언되기 전에 함수 변수를 사용할 수 있습니다. 🎜🎜🎜2.1 함수 선언 시 주의 사항🎜🎜🎜함수 선언 구문은 독립적인 함수를 생성하는 것입니다. 함수 선언은 전역 범위에 있거나 다른 함수의 범위에 직접 있어야 합니다.🎜rrreee🎜같은 이유로 조건문(if)과 루프(while)를 사용하지 않는 것이 좋습니다. , for) 함수 선언 사용: 🎜rrreee🎜함수 표현식을 사용하면 조건부 함수 생성을 더 잘 실행할 수 있습니다. 🎜

🎜3. 함수 표현식🎜

🎜 function 키워드가 표현식 내에서 (이름 유무와 관계없이) 함수를 생성할 때 함수 표현식이 발생합니다. 🎜🎜다음은 표현식을 사용하여 생성된 함수의 예입니다. 🎜rrreee🎜함수 표현식에는 두 가지 유형의 함수가 생성됩니다. 🎜
  • 표현식의 함수에 이름이 없으면 다음과 같습니다. function() {return 42}, 즉 익명 함수 표현식입니다. 🎜
  • 함수에 이전 예의 sumB와 같은 이름이 있고 콜백이면 이것은 명명된 함수 표현식입니다 🎜🎜🎜🎜3.1 함수 표현식에 대한 참고 사항 🎜🎜🎜 함수 표현식은 조건으로 생성된 콜백이나 함수에 적합합니다. 🎜rrreee🎜 명명된 함수 표현식을 생성한 경우 함수 변수는 생성된 함수의 범위 내에만 있습니다. 사용 가능:🎜
    const numbers = [4];
    numbers.forEach(function callback(number) {
      console.log(callback); // logs function() { ... }
    });
    
    console.log(callback); // ReferenceError: callback is not defined

    试一试:https://jsfiddle.net/dmitri_pavlutin/sujwmp10/2/

    callback是一个命名的函数表达式,因此callback函数变量仅在callback()函数使用域可用,而在外部则不可用。

    但是,如果将函数对象存储到常规变量中,则可以在函数作用域内外从该变量访问函数对象:

    const callback = function(number) {
      console.log(callback); // logs function() { ... }
    };
    
    const numbers = [4];
    numbers.forEach(callback);
    console.log(callback); // logs function() { ... }

    试一试:https://jsfiddle.net/dmitri_pavlutin/1btmrcu2/1/

    4. 总结

    根据使用function关键字创建函数的方式,可以通过两种方法来创建函数:函数声明和函数表达式。

    留个问题: function sum(a, b) { return a + b } + 1 是函数声明还是函数表达式,可以在留言中说出你的答案。

    英文文章地址:https://dmitripavlutin.com/javascript-function-expressions-and-declarations/

    作者:Dmitri Pavlutin

    更多编程相关知识,请访问:编程视频!!

위 내용은 함수 표현식 VS JS 함수 선언, 차이점에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제