new Function 생성 함수에서 MVC 모드 연상

우리는 모든 사용자 정의 함수가 Function 구조기의 실례를 알고 있기 때문에 new Function 방식을 통해 함수를 만들 수 있습니다. 문법을 사용하는 것은 매우 간단합니다.

new Function( 1,  2, ...,  N,  )

안의 매개 변수는 모두 문자열의 형식으로 표시됩니다.예를 들어 간단한 예는 함수를 써서 두 숫자 중 가장 큰 숫자를 구하고 가장 큰 숫자를 되돌려 달라는 것이다.만약 성명식 함수의 사상에 따라 쓴다면, 아마도 이렇게 될 것이다

function max(a,b){
      return  a > b ? a : b;
}

그러나 우리는 함수 구조기(new Function)로 전환하여 쓴다.

var fn = new Function('a','b','return a>b?a:b');
var max = fn(1,2);
max;   //2

물론 여기를 보면 함수 구조기의 방식으로 함수를 만드는 것이 성명식 함수에 비해 어느 정도 우세하다는 것을 알 수 없다.그러나 우리는 다음 약간 복잡한 예를 계속 보았다.
함수를 써서 임의의 매개 변수를 전송하여 최대치를 구하세요.우리는 이 두 가지 방법으로 그것을 썼다.

function max() {
  var a = arguments;
  var m = a[0];
  for (var i = 0; i < a.length; i++) {
    if (m < a[i]) {
        m = a[i];
    }
  }
  return m;
}
            
var res = max(1, 5, 16, 3,2);
console.log(res);    //16

var fn = new Function(
    'var a = arguments;'+
    'var m = a[0];'+
    'for (var i = 0; i < a.length; i++) {'+
    '    if (m < a[i]) {'+
    '        m = a[i];'+
    '    }'+
    '}'+
    'return m;'
);


var res = fn(1,5,16,3,2);
console.log(res);   //16

그리고 우리는 위의 코드를 최적화해서 함수체를 추출하여 독립된script 라벨에 놓을 수 있다.

<script id="control">
    /*    
        var max = arguments[0];
            for(var i=0;i<arguments.length;i++){
                if(arguments[i]>max){
                    max = arguments[i];
                }
            }
        return max;
    */
</script>
<script>
    var fn = new Function(
        document.getElementById('control').innerHTML
        .trim()
        .replace('/*', '')
        .replace('*/', '')
    )
    var foo = fn(1,2,10,4)
    console.log(foo)  //10
</script>

이렇게 쓰는 장점은 함수 방법을 변경해야 할 때 첫 번째 스크립트 탭에서만 변경하면 다음 스크립트 탭에 영향을 주지 않는다는 것이다.
함수 구조기의 작용역에 대한 문제를 조금 더 보충합니다. 성명식 함수와 달리 성명식 함수 내부는 외부나 외함수의 국부 변수에 접근할 수 있지만 함수 구조기는 할 수 없습니다.

var globalVal = 'global'
function fn(){
    var localVal = 'local';
    function foo(){
        console.log(typeof localVal,typeof globalVal);
    }
    foo()
}
fn()  //string string

var globalVal = 'global'
function fn(){
    var localVal = 'local';
    new Function('console.log(typeof localVal,typeof globalVal);')();
}
fn() // undefined global