Javascript 함수 선언 및 재귀 호출에 대한 자세한 설명

자바스크립트 함수를 선언하고 호출하는 방식은 이미 지겨운 진부한 표현이지만, 어떤 것들은 한 번 말씀드리면 다시 말씀드리겠습니다. 책이나 블로그에 쓰여진 자바스크립트 함수를 호출하는 방법이 4가지가 있다는 걸 볼 때마다 공이지님이 생각나실 겁니다. 회향이라는 단어를 쓰는 방법이 4가지가 있잖아요?

많은 결점에도 불구하고 Javascript는 매력적입니다. Javascript의 많은 아름다운 기능의 중심에는 일급 객체로서의 기능이 있습니다. 함수는 다른 일반 객체처럼 생성되고, 변수에 할당되고, 인수로 전달되고, 값을 반환하고, 속성과 메서드를 유지합니다. 최상위 객체인 함수는 Javascript에 강력한 함수형 프로그래밍 기능을 제공하고 제어하기 쉽지 않은 유연성도 제공합니다.

1. 함수 선언

변수 선언은 먼저 익명 함수를 생성한 다음 이를 지정된 변수에 할당합니다.

var f = function () { // function body };

일반적으로 등호 오른쪽에 있는 표현식의 범위가 전역인지 클로저 내에 있는지 신경 쓸 필요가 없습니다. 왜냐하면 등호 왼쪽에 있는 변수 f를 통해서만 참조할 수 있기 때문입니다. 관심을 가져야 할 것은 변수 f 의 범위입니다. 함수에 대한 f의 참조가 삭제되고(f = null) 함수가 다른 변수나 개체 속성에 할당되지 않은 경우 익명 함수는 모든 참조를 잃기 때문에 가비지 수집 메커니즘에 의해 삭제됩니다.

함수 표현식을 사용하여 함수를 생성할 수도 있습니다.

function f() { // function body }

변수 표현식과 달리 이 선언 방법은 내장 함수입니다. 속성 이름에 대한 값입니다. 동시에 현재 범위에서 동일한 이름을 가진 변수에 함수를 할당합니다. (함수의 name 속성, configurable, enumerable 및 writable은 모두 false입니다.)

function f() { // function body }
console.log(f.name); // "f"
console.log(f); // f()

Javascript 변수에는 특별한 기능이 있습니다. , 변수 선언을 진행하고 표현식의 함수 선언도 전체 함수의 정의를 진행하므로 함수 정의 전에 사용할 수 있습니다.

console.log(f.name); // "f"
console.log(f); // f()
function f() { // function body }

함수 표현식 선언은 범위의 최상위 수준으로 승격됩니다. 다음 코드를 시도해 보세요. 이 기사의 초점은 아닙니다.

var a = 0;
console.log(a); // 0 or a()?
function a () {}

Crockford는 항상 첫 번째 방법을 사용할 것을 권장합니다. 두 번째 방법은 함수를 먼저 선언한 다음 사용해야 한다는 요구 사항을 완화하여 혼란을 초래할 수 있다고 생각됩니다. (크록포드는 러셀이 비트겐슈타인을 비유한 '양심 예술가'와 비슷한 '양심 프로그래머'이다. 이 문장은 발음하기가 매우 어렵다)

기능 선언

function f() {}

은

var f = function f(){};

의 줄임말인 것 같아요.

var a = function b(){};

의 표현식에 대해 함수를 생성하고 "b"에 내장된 이름 속성을 할당한 다음 이 함수를 변수 a에 할당할 수 있습니다. a()를 사용하여 외부적으로 호출하지만 b()는 사용할 수 없습니다. a에 함수를 할당했기 때문에 var b = a를 사용하여 변수 b를 선언하지 않으면 변수 b가 자동으로 생성되지 않습니다. 물론 이 함수의 이름은 "a"가 아니라 "b"입니다.

함수 생성자를 사용하여 함수를 생성할 수도 있습니다.

var f = new Function("a,b,c","return a+b+c;");

이 방법은 실제로 전역입니다. 범위에서 익명 함수를 생성하고 이를 변수 f에 할당합니다.

2. 재귀 호출

재귀는 함수 본문에서 자체 호출이 필요한 많은 문제를 단순화하는 데 사용됩니다.

// 一个简单的阶乘函数
var f = function (x) {
  if (x === 1) {
    return 1;
  } else {
    return x * f(x - 1);
  }
};

Javascript에서 함수의 엄청난 유연성으로 인해 반복 시 함수 이름을 사용하는 데 어려움이 있습니다. 위의 변수 선언의 경우 f는 변수이므로 해당 값을 쉽게 바꿀 수 있습니다.

var fn = f;
f = function () {};

숫자 값이지만 함수 내부에서 여전히 변수 f를 참조하고 있기 때문에 제대로 작동하지 않습니다.

위에서 이야기한 것은 모두 함수 호출입니다. 함수를 호출하는 방법으로는 객체 메서드로 호출하는 등이 있습니다.

우리는 종종 다음과 같이 객체를 선언합니다:

function f(x) {
  if (x === 1) {
    return 1;
  } else {
    return x * f(x - 1);
  }
}
var fn = f;
f = function () {}; // may been warning by browser
fn(5); // NaN

익명 함수를 선언하고 객체에 할당합니다. 속성(FAC).

여기에 재귀를 작성하려면 속성 자체를 인용해야 합니다.

var obj1 = {
  num ： 5，
  fac ： function (x) {
    // function body
  }
};

물론 함수 호출 메소드와 동일한 문제에 직면하게 됩니다:

메소드가 fac 속성에 할당된 후 obj2, 내부 참조 obj1.fac이므로... 실패했습니다.

var obj1 = {
  num : 5,
  fac : function (x) {
    if (x === 1) {
      return 1;
    } else {
      return x * obj1.fac(x - 1);
    }
  }
};

또 다른 방법이 개선될 예정입니다:

var obj2 = {fac: obj1.fac};
obj1 = {};
obj2.fac(5); // Sadness

이 키워드를 통해 함수 실행 시간을 가져옵니다. 따라서 obj2.fac가 실행될 때 obj2의 fac 속성이 함수 내에서 참조됩니다.

하지만 컨텍스트를 임의로 수정하여 함수를 호출할 수도 있습니다. 즉, 범용 호출 및 적용:

var obj1 = {
   num : 5,
   fac : function (x) {
    if (x === 1) {
      return 1;
    } else {
      return x * this.fac(x - 1);
    }
  }
};
var obj2 = {fac: obj1.fac};
obj1 = {};
obj2.fac(5); // ok

그래서 재귀함수는 다시 제대로 동작하지 못합니다.

이 문제를 해결하도록 노력해야 합니다. 앞서 언급한 함수 선언 방법을 기억하시나요?

var a = function b(){};

   

这种声明方式叫做内联函数（inline function），虽然在函数外没有声明变量b，但是在函数内部，是可以使用b()来调用自己的，于是

var fn = function f(x) {
  // try if you write "var f = 0；" here
  if (x === 1) {
    return 1;
  } else {
    return x * f(x - 1);
  }
};
var fn2 = fn;
fn = null;
fn2(5); // OK

    

// here show the difference between "var f = function f() {}" and "function f() {}"
var f = function f(x) {
  if (x === 1) {
    return 1;
  } else {
    return x * f(x - 1);
  }
};
var fn2 = f;
f = null;
fn2(5); // OK

    

var obj1 = {
  num : 5,
  fac : function f(x) {
    if (x === 1) {
      return 1;
    } else {
      return x * f(x - 1);
    }
  }
};
var obj2 = {fac: obj1.fac};
obj1 = {};
obj2.fac(5); // ok
  
var obj3 = {};
obj1.fac.call(obj3, 5); // ok

   

就这样，我们有了一个可以在内部使用的名字，而不用担心递归函数被赋值给谁以及以何种方式被调用。

Javascript函数内部的arguments对象，有一个callee属性，指向的是函数本身。因此也可以使用arguments.callee在内部调用函数：

function f(x) {
  if (x === 1) {
    return 1;
  } else {
    return x * arguments.callee(x - 1);
  }
}

   

但arguments.callee是一个已经准备被弃用的属性，很可能会在未来的ECMAscript版本中消失，在ECMAscript 5中"use strict"时，不能使用arguments.callee。

最后一个建议是：如果要声明一个递归函数，请慎用new Function这种方式，Function构造函数创建的函数在每次被调用时，都会重新编译出一个函数，递归调用会引发性能问题——你会发现你的内存很快就被耗光了。