Function

Function 생성자(constructor)는 새 Function 객체를 만듭니다. JavaScript에서 모든 함수는 실제로 Function 객체입니다.

구문

new Function ([arg1[, arg2[, ...argN]],] functionBody)

매개변수

arg1, arg2, ... argN
형식 인수(argument)명으로 함수에 의해 사용되는 이름. 각각은 유효한 JavaScript 식별자(identifier)와 대응하는 문자열 또는 쉼표로 구분된 그런 문자열 목록이어야 합니다. 즉 예를 들어 "x", "theValue" 또는 "a,b".
functionBody
함수 정의를 이루는 JavaScript 문(statement)을 포함하는 문자열.

설명

Function 객체는 함수가 생성될 때 구문 해석(parse)되는 Function 생성자로 생성됩니다. 이는 그러한 함수가 나머지 코드와 함께 구문 해석되기 때문에, function 식 또는 function 문으로 함수를 선언하고 코드 내에서 그것을 호출하는 것보다 효율이 떨어집니다.

함수에 건네지는 모든 인수는 전달된 순서대로 생성되는 함수에 매개변수의 식별자 명으로 취급됩니다.

주의: Function 생성자로 만든 함수는 그들의 생성 문맥(context)에 클로저(closure)를 만들지 않습니다. 따라서 함수는 항상 전역 범위(global scope)로 생성됩니다. 그들을 실행할 때, 함수는 오직 자신의 지역 변수 및 전역 변수에만 액세스할 수 있습니다, Function 생성자가 호출됐던 범위에서 변수가 아니라. 이는 function 식을 위한 코드로 eval을 사용하는 것과 다릅니다.

Function 생성자를 함수로서 (new 연산자 사용 없이) 호출하는 것은 생성자로서 호출하는 것과 같은 효과를 갖습니다.

Function (객체)의 속성과 메서드

전역 Function 객체는 자신의 메서드 또는 속성이 없습니다. 그러나, 그 자체로 함수이기에 Function.prototype에서 프로토타입 체인을 통해 일부 메서드 및 속성을 상속받습니다.

Function 프로토타입 객체

속성

Function.arguments
함수에 전달되는 인수(argument)에 해당하는 배열. 이는 Function의 속성으로 사라지므로(deprecated), 대신 함수 내에서 이용 가능한 arguments 객체를 사용하세요.
Function.arity
함수에 의해 기대되는 인수의 수를 지정하기 위해 사용됐으나 제거되었습니다. 대신 length 속성을 사용하세요.
Function.caller
현재 실행 중인 함수를 호출한 함수를 지정합니다.
Function.length
함수에 의해 기대되는 인수의 수를 지정합니다.
Function.name
함수명.
Function.displayName
함수의 표시명.
Function.prototype.constructor
객체의 프로토타입을 만드는 함수를 지정합니다. 자세한 사항은 Object.prototype.constructor 참조.

메서드

Function.prototype.apply()
함수를 호출하고 this를 제공된 값으로 설정합니다, 인수는 Array 객체로 전달될 수 있습니다.
Function.prototype.bind()
호출될 때 this를 제공된 값으로 설정하는 새로운 함수를 만듭니다, 새로운 함수가 호출됐을 때 주어진 순서로 모두 제공되는 선행 인수와 함께.
Function.prototype.call()
함수를 호출(실행)하고 this를 제공된 값으로 설정합니다, 인수는 그대로 전달될 수 있습니다.
Function.prototype.isGenerator()
함수가 생성기인 경우 true를 반환합니다; 그렇지 않으면 false를 반환합니다.
Function.prototype.toSource()
함수의 소스 코드를 나타내는 문자열을 반환합니다. Object.prototype.toSource 메서드를 재정의(override)합니다.
Function.prototype.toString()
함수의 소스 코드를 나타내는 문자열을 반환합니다. Object.prototype.toString 메서드를 재정의합니다.

Function 인스턴스

Function 인스턴스는 Function.prototype에서 메서드 및 속성을 상속받습니다. 모든 생성자와 마찬가지로, 당신은 모든 Function 인스턴스를 바꾸기 위해 생성자의 프로토타입 객체를 바꿀 수 있습니다.

예제

Function 생성자에 인수 지정하기

다음 코드는 인수 두 개를 갖는 Function 객체를 생성합니다.

// 예제는 JavaScript 콘솔에 직접 실행될 수 있습니다

// 두 인수를 취하고 그 둘의 합을 반환하는 함수 생성
var adder = new Function('a', 'b', 'return a + b');

// 함수 호출
adder(2, 6);
// > 8

인수 "a" 및 "b"는 함수 몸통(body) "return a + b"에 사용되는 형식 인수명입니다.

대규모로 DOM을 수정하는 재귀(recursive) 바로가기

Function 생성자로 함수를 만드는 것은 함수에서 전역 범위로 일부 실행가능한 코드로 불확정한(interminate) 수의 새 객체를 동적 생성하는 방법 중 하나입니다. 다음 예(대규모로 DOM을 수정하는 재귀 바로가기)는 클로저를 피하고 싶다면 각각 새 질의(query)를 위한 Function 생성자의 호출 없이는 불가능합니다.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example - a recursive shortcut to massively modify the DOM</title>
<script type="text/javascript">
var domQuery = (function() {
  var aDOMFunc = [
    Element.prototype.removeAttribute,
    Element.prototype.setAttribute,
    CSSStyleDeclaration.prototype.removeProperty,
    CSSStyleDeclaration.prototype.setProperty
  ];

  function setSomething(bStyle, sProp, sVal) {
    var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1],
        aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
        aNodeList = bStyle ? this.cssNodes : this.nodes;

    if (bSet && bStyle) { aArgs.push(''); }
    for (
      var nItem = 0, nLen = this.nodes.length;
      nItem < nLen;
      fAction.apply(aNodeList[nItem++], aArgs)
    );
    this.follow = setSomething.caller;
    return this;
  }

  function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
  function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
  function getSelectors() { return this.selectors; };
  function getNodes() { return this.nodes; };

  return (function(sSelectors) {
    var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);');
    oQuery.selectors = sSelectors;
    oQuery.nodes = document.querySelectorAll(sSelectors);
    oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; });
    oQuery.attributes = setAttribs;
    oQuery.inlineStyle = setStyles;
    oQuery.follow = getNodes;
    oQuery.toString = getSelectors;
    oQuery.valueOf = getNodes;
    return oQuery;
  });
})();
</script>
</head>

<body>

<div class="testClass">Lorem ipsum</div>
<p>Some text</p>
<div class="testClass">dolor sit amet</div>

<script type="text/javascript">
domQuery('.testClass')
  .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum')
  .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px');
</script>
</body>

</html>

스펙

스펙 상태 설명
ECMAScript 1st Edition (ECMA-262) Standard 초기 정의. JavaScript 1.0에서 구현됨.
ECMAScript 5.1 (ECMA-262)
The definition of 'Function' in that specification.
Standard  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Function' in that specification.
Standard  
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Function' in that specification.
Draft  

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

참조

문서 태그 및 공헌자

 이 페이지의 공헌자: Netaras, teoli, HunminKim, Wafe
 최종 변경: Netaras,