JavaScript_javascript 팁의 다양한 공통 함수 정의 방법

이 글에서는 JavaScript의 다양한 공통 함수 정의 방법을 자세히 설명하고 참고용으로 공유합니다. 구체적인 분석은 다음과 같습니다.

먼저 JavaScript에서 가장 일반적인 네 가지 함수 정의를 살펴보겠습니다.

Function 생성자를 이용하여 정의한 함수로, 코드는 다음과 같습니다.

var multiply = new Function('x', 'y', 'return x * y;');

함수 선언, 이 방법은 가장 일반적인 방법이기도 합니다.

function multiply(x, y) {
  return x * y;
}

익명 함수로 선언된 후 매우 일반적인 방식으로 변수에 할당되는 함수 표현식:

var multiply = function(x, y) {
  return x * y;
}

함수 표현식이지만 함수는 명명된 함수로 선언된 다음 변수에 할당됩니다.

var multiply = function multi(x, y) {
  return x * y;
}

먼저 함수 이름과 함수가 할당된 함수 변수의 직접적인 관계를 비교해 보겠습니다. 정말 헷갈립니다... 좀 더 직관적으로 말하자면, 방금 예제 4의 관계에 대해 이야기해 보겠습니다. 함수 변수 Multiply와 함수 이름 multi 사이에 있습니다.

함수 이름은 수정할 수 없습니다. 반대로 함수 변수는 다시 할당할 수 있습니다. 함수 변수는 재할당될 수 있다는 것을 이해하기 쉽습니다. 네 번째 예제에서 방금 정의한 곱셈 변수는 보기에 좋지 않으므로 다음과 같이 재할당할 수 있습니다.

multiply = function(x, y) {
  return x + y;
}

곱셈에서 덧셈으로 즉시 변환됩니다. 하지만 함수 변수 multi를 변경하는 것은 불가능합니다. 함수 정의가 이미 존재하는 한 이에 대한 참조가 유지되는 한 변경되지 않을 것입니다. 먼저 이렇게 생각해보세요. 계속 읽어보시면서 점차적으로 이해하실 수 있을 것입니다.

함수 이름은 함수 외부에서 사용할 수 없습니다. 매우 간단한 예는 다음과 같습니다.

var foo = function bar() {
  alert('hello');
}
foo(); // 提示“hello”字符串
bar(); // 执行报错，bar未定义

물론 여기서 bar는 실제로 함수 이름이지만 외부에서 호출할 수는 없습니다. 이때 어떤 아이들은 이 예가 왜 여전히 좋아 보이는지 확실히 묻습니다. 예 4와 같습니다. 예 2의 방법을 사용하는 것은 어떨까요? 좋은 질문입니다. 천천히 분석하겠습니다.

예제 4를 계속 보면 함수 이름(multi)과 함수 변수(multiply)가 동일하지 않다는 것을 알 수 있습니다. 실제로는 전혀 관계가 없으므로 일관성을 유지할 필요가 없습니다. 그러고보니 위의 4가지 예는 3가지로 압축될 수 있을 것 같습니다. 예 2와 4는 본질적으로 동일해야 합니다. 뭐, 믿을 수 없나요? 히히 계속 진실을 말해야지~계속 읽어봐~~

예제 4와 비교하면 예 2에는 var라는 함수 변수만 부족하고, 예 4와 비교하면 예 3에는 함수 이름만 부족한 것을 현상의 관점에서 보면 예 2와 예 4의 본질은 다음과 같습니다. 마찬가지로 철갑 증거는 다음과 같습니다.

function foo() {}
alert(foo); // 提示包含“foo”的函数名
var bar = foo;
alert(bar); // 提示依然只包含“foo”的函数名，和bar半毛钱关系都没有

정말 반박할 수 없는 증거인가요? 위의 예시 2와 유사한 코드를 예시 4와 같은 방식으로 조합하여 작성할 수 있나요? 맞습니다. 제가 방금 말한 것은 두 가지의 본질이 동일해야 한다는 것입니다. 단지 유스 케이스 2에서 함수를 정의할 때 JS 엔진이 우리를 위해 곱셈이라는 함수를 선언하는 것과 같은 몇 가지 작업을 수행했다는 것입니다. Multiply라는 함수를 조용히 정의한 후 이 변수에 할당합니다. 두 이름이 정확히 같습니다. 함수 이름을 사용하면 실제로는 함수 변수를 사용하고 있는 것입니다. 헷갈린다~ 솔직히 나도 헷갈린다~ ~간단히 말하면 우리가 호출할 때 실제로는 함수변수를 사용하여 호출하는데, 함수명을 사용하여 외부에서 함수를 호출할 수는 없기 때문에 위와 같은 추론을 하게 된다.

그러나 여기서 언급할 수 있는 작은 차이점이 있습니다. 함수 선언 모드에서 정의된 함수와 생성자 선언 또는 함수 표현식 선언의 차이점은 함수 선언 모드에서 함수를 정의하기 전에 호출할 수 있다는 것입니다. 더 이상 이야기하지 않겠습니다. 코드를 살펴보겠습니다.

foo(); // 提示Foo
function foo() {
  alert('Foo');
}
bar(); // 哥们，和上面确实不一样，就不要逞能，这不报错了？提示bar未定义
var bar = function() {
  alert('Bar');
}

생성자에 의해 선언된 함수에 대해 이야기해 보겠습니다. 이렇게 선언된 함수는 현재 선언 위치의 범위를 상속하지 않지만 기본적으로 전역 범위를 갖습니다. 그러나 이는 다른 여러 함수에서도 사용할 수 있습니다. 선언 방법은 다음과 같습니다.

function foo() {
  var hi = 'hello';
  //return function() {
  //  alert(hi);
  //};
  return Function('return hi;');
}
foo()(); // 执行效果大家自己跑一下看看

可以想见，用构造函数声明返回的这个函数执行必然报错，因为其作用域（即全局作用域）中没有hi这个变量。

还有一点，就是往往大家要说构造函数方式声明的函数效率要低，这是为什么呢？今天从文档是得知是因为另外3种方式申明的函数只会被解析一次，其实他们存在于闭包中，但是那也只与作用域链有关，函数体是只会被解析一次的。但是构造函数方式呢，每次执行函数的时候，其函数体都会被解析一次，我们可以想想这样声明的函数是一个对象，其中存放了参数以及函数体，每次执行的时候都要先解析一次，参数和函数体，才会执行，这样必然效率低下。具体实验不知道如何做？

最后说一个大家都不怎么注意的地方，什么时候看似函数声明方式的方式却不是函数生命方式（还是这么绕~简单点儿说，就是例2的方式什么时候在不经意间就成其他方式了）：

当成为表达式的一部分，就如同例3和例4。
不再是脚本本身或者函数的“源元素”（source element）。什么是源元素呢？即在脚本中的非嵌套语句或者函数体（A "source element" is a non-nested statement in the script or a function body），例如：

var x = 0;        // source element 
if (x == 0) {      // source element 
  x = 10;        // not a source element, 因为嵌套在了if语句里
  function boo() {}   // not a source element, 因为嵌套在了if语句里
} 
function foo() {     // source element 
  var y = 20;      // source element 
  function bar() {}   // source element 
  while (y == 10) {   // source element 
   function blah() {} // not a source element, 因为嵌套在了while语句里
   y++;        // not a source element, 因为嵌套在了while语句里
  } 
}

源元素的概念大概有了理解，继续刚刚说的函数声明，请看：

// 函数声明
function foo() {} 
  
// 函数表达式
(function bar() {}) 
  
// 函数表达式
x = function hello() {} 
 
if (x) { 
  // 函数表达式
  function world() {} 
}
 
// function statement 
function a() { 
  // function statement 
  function b() {} 
  if (0) { 
   // 函数表达式
   function c() {} 
  } 
}

最后这里说一下我自己的理解，之所以要区分函数声明与非函数声明，因为在我看了，函数声明方式的函数定义，在JS解析引擎执行的时候会将其提前声明，也就是像我们刚刚上面说的那样，可以在函数定义之前使用，实际上是解析引擎在我们使用前已经将其解析了，但是非函数声明式，就像表达式函数声明，JS解析引擎只会把var声明的变量提前定义，此时变量值为undefined，而真正对这个变量的赋值是在代码实际所在位置，因此上述提到报错都是undefined，实际变量已经定义了，只是还没有赋值，JS解析引擎不知道它为函数。

相信本文所述对大家javascript WEB程序设计的有一定的借鉴价值。