JavaScript 함수 표현식(그래픽 튜토리얼)

이 글은 자바스크립트 함수 표현식에 대한 자세한 설명과 예시를 주로 소개합니다. 필요한 친구들은 참고하면 됩니다.

JavaScript 함수 표현식

1. 순서

함수를 정의하는 방법은 두 가지가 있습니다. 는 함수 선언이고 다른 하나는 함수 표현식입니다.

1.1 함수 선언

function functionName(arg){
   //函数体
}

함수 선언과 관련하여 중요한 기능은 함수 선언 호이스팅입니다. 즉, 코드 문을 실행하기 전에 함수를 읽습니다. . 이는 함수를 호출하는 명령문 뒤에 함수가 배치될 수 있음을 의미합니다. 아래와 같이:

helloworld(); //在代码执行之前会先读取函数声明
function helloworld(){
  console.log("hello world");
}

1.2 함수 표현식

var functionName=function(arg){
   //函数体
}

이 형식은 함수를 생성하고 이를 functionName 변수에 할당하는 일반 변수 할당 문처럼 보입니다. 이 경우 생성된 함수를 익명 함수라고 합니다. function 키워드 뒤에 식별자가 없기 때문입니다.

함수 표현식은 다른 표현식과 마찬가지로 사용하기 전에 값을 할당해야 합니다. 다음 코드는 오류를 발생시킵니다.

helloworld(); //错误，还未赋值，函数不存在

var helloworld=function(){
  console.log("hello world");
}

함수 표현식을 사용하면 함수 표현식에 값을 동적으로 할당할 수 있습니다. 다음 코드:

var helloworld; //声明
if(condition){ //条件
  helloworld=function(){ //赋值
    console.log("hello world"); 
  }
}
else{
  helloworld=function(){ //赋值
    console.log("你好，世界");
  }
}

2. 재귀 함수

재귀 함수는 함수가 자신을 이름으로 호출할 때 형성됩니다(C# 및 기타 언어와 동일하므로 프로그램의 핵심 아이디어는 다음과 같습니다). 비슷하지만 문법에는 약간의 차이가 있습니다. 한 언어의 기본을 잘 배우면 다른 언어를 배우는 것이 훨씬 쉬울 것입니다.) 숫자 목록에 대한 규칙은 다음과 같습니다. 1, 2, 3, 5, 8, 13, 21, 34... 30번째 숫자를 찾아 재귀 알고리즘을 사용하면 코드는 다음과 같습니다.

   function foo(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return foo(n - 1) + foo(n - 2);
    }

이 함수는 문제가 없어 보이지만, 다음 코드는 문제를 일으킬 수 있습니다.

   var foo1 = foo;
    foo = null;
    console.log(foo1(34));

위 코드는 먼저 foo() 함수를 변수 foo1에 저장한 다음 foo 변수를 null로 설정합니다. 원래 기능. 그러나 다음에 foo1()이 호출되면 foo()가 실행되어야 하고 foo가 이미 null이므로 오류가 발생합니다. 이 경우에는args.callee를 사용하면 이 문제를 해결할 수 있습니다. args.callee는 실행되는 함수에 대한 포인터이므로 이를 사용하여 함수에 대한 재귀 호출을 구현할 수 있습니다

 function foo(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return arguments.callee(n - 1) + arguments.callee(n - 2);
    }

이름이 지정된 함수 표현식을 사용하여 동일한 결과를 얻을 수도 있습니다. 예:

 var foo = (function f(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return f(n - 1) + f(n - 2);
    });

3. 클로저

3.1 클로저는 다른 함수의 범위에 있는 변수에 액세스할 수 있는 함수를 의미합니다. 클로저를 만드는 일반적인 방법은 함수 내에 다른 함수를 만드는 것입니다. . 클로저를 이해하려면 먼저 JavaScript 특수 변수의 범위를 이해해야 합니다. 변수의 범위는 전역 변수와 지역 변수의 두 가지 유형에 지나지 않습니다. 다음으로 이를 직관적으로 표현하기 위해 몇 가지 데모를 작성하겠습니다.

전역 변수는 함수 내에서 직접 읽을 수 있습니다. 변수는 함수 외부에서 직접 읽을 수 없습니다.

 var n = 100; //定义一个全局变量
    function fn() {
      console.log(n); //函数内部直接读取全局变量
    }

    fn();

여기서 주의할 점은 함수 내부에서 변수를 선언할 때 var를 사용해야 한다는 것입니다. 사용하지 않으면 전역 변수가 됩니다.

    function fn() {
      var n = 100;
    }

    console.log(n); //n is not defined

예 때로는 함수 내부에 선언된 변수를 가져와야 하므로 위에서 언급한 클로저를 생성하는 일반적인 방법을 사용하여 함수 내부에 다른 함수를 생성할 수 있습니다.

 function fn() {
       n = 100;
    }
    fn();
    console.log(n); //100

위 코드에서 , 함수 fn1이 포함됩니다. 함수 fn 내부에는 fm 내부의 모든 지역 변수가 fn1에 표시됩니다. 그러나 그 반대는 작동하지 않습니다. fn1 내부의 지역 변수는 fn에 표시되지 않습니다. 이는 Javascript 언어의 고유한 "체인 범위" 구조입니다. 하위 개체는 모든 상위 개체의 변수를 수준별로 검색합니다. 따라서 상위 개체의 모든 변수는 하위 개체에 표시되지만 그 반대의 경우는 표시되지 않습니다.

fn1은 fn의 내부 변수를 읽을 수 있으므로 fn1이 반환 값으로 사용되는 한 외부에서 fn의 변수를 읽을 수 있습니다.

   function fn() {
      n = 100;

      function fn1() {
        console.log(n);
      }

      fn1();
    }
    fn(); //100

여기서 fn1은 클로저이고 클로저는 다른 함수 내부의 변수를 읽는 기능입니다. Javascript 언어에서는 함수 내부의 하위 함수만 지역 변수를 읽을 수 있으므로 클로저는 간단히 "함수 내부에 정의된 함수"로 이해될 수 있습니다. 따라서 본질적으로 클로저는 함수 내부와 함수 외부를 연결하는 다리입니다.

3.2 클로저의 목적

두 가지 가장 큰 용도가 있습니다. 하나는 앞서 언급한 것처럼 함수 내부의 변수를 읽는 것이고, 다른 하나는 이러한 변수의 값을 메모리에 유지하는 것입니다. 다음 코드에 표시된 대로:

function fn() {
      n = 100;

      function fn1() {
        console.log(n);
      }

      return fn1;
    }
    
    var result=fn();
    result(); //100

注意：由于闭包函数会携带包含它的函数的作用域，因此会比其他函数占用更多的内存，过度使用闭包可能会导致内存占用过多，所以在退出函数之前，将不使用的局部变量全部删除。

 四、块级作用域

       块级作用域（又称为私有作用域）的匿名函数的语法如下所示：

(function(){
   //块级作用域
})();

无论在什么地方，只要临时需要一些变量，就可以使用私有作用域，比如：

(function () {
      var now = new Date();
      if (now.getMonth() == 0 && now.getDate() == 1) {
        alert("新年快乐");
      }
    })();

把上面这段代码放到全局作用域中，如果到了1月1日就会弹出“新年快乐”的祝福；这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。一般来说,我们都应该尽量少向全局作用域中添加变量和函数。在一个由很多开发人员共同参与的大型应用程序中，过多的全局变量和函数很容易导致命名冲突。而通过创建私用作用域，每个开发人员既可以使用自己的变量，又不必担心搞乱全局作用域。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

关于如何优化你的JS代码（图文教程）

畅谈HTML+CSS+JS（详细讲解）

原生JS+AJAX做出三级联动效果（附代码）

위 내용은 JavaScript 함수 표현식(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!