简单了解 FunctionFunction 构造函数详解目录 Function 构造函数基础语法和参数作用域和闭包

Function 构造函数详解

Function 构造函数基础

什么是 Function 构造函数？

Function 构造函数是 JavaScript 中用于动态创建函数的内置构造函数。它允许我们在运行时通过字符串来创建函数，这在某些场景下非常有用，但也带来了安全风险。

基本语法

// 基本形式
new Function([arg1[, arg2[, ...argN]], functionBody)

// 或者不使用 new（效果相同）
Function([arg1[, arg2[, ...argN]], functionBody)

参数说明

arg1, arg2, ...argN：函数的参数名（字符串形式）
functionBody：函数体的字符串形式

基本示例

// 创建一个简单的函数
const add = new Function('a', 'b', 'return a + b');
console.log(add(2, 3)); // 输出: 5

// 创建无参数函数
const greet = new Function('return "Hello, World!"');
console.log(greet()); // 输出: Hello, World!

// 创建多参数函数
const multiply = new Function('x', 'y', 'z', 'return x * y * z');
console.log(multiply(2, 3, 4)); // 输出: 24

语法和参数

参数传递方式

Function 构造函数支持多种参数传递方式：

1. 单独传递参数名

const func1 = new Function('a', 'b', 'return a + b');

2. 使用数组传递参数名

const func2 = new Function(['a', 'b'], 'return a + b');

3. 使用逗号分隔的字符串

const func3 = new Function('a, b', 'return a + b');

4. 混合方式

const func4 = new Function('a', 'b, c', 'return a + b + c');

函数体编写

函数体是一个字符串，可以包含多行代码：

// 单行函数体
const simple = new Function('x', 'return x * 2');

// 多行函数体
const complex = new Function('x', 'y', `
  const sum = x + y;
  const product = x * y;
  return { sum, product };
`);

console.log(complex(3, 4)); 
// 输出: { sum: 7, product: 12 }

访问外部变量

重要：通过 Function 构造函数创建的函数无法直接访问外部作用域的变量，只能访问全局作用域。

const outerVar = 'I am outside';

// ❌ 无法访问外部变量
const func1 = new Function('return outerVar');
console.log(func1()); // ReferenceError: outerVar is not defined

// ✅ 可以通过参数传递
const func2 = new Function('outerVar', 'return outerVar');
console.log(func2(outerVar)); // 输出: I am outside

// ✅ 可以访问全局变量
globalThis.globalVar = 'I am global';
const func3 = new Function('return globalVar');
console.log(func3()); // 输出: I am global

作用域和闭包

作用域链

Function 构造函数创建的函数具有特殊的作用域链：

函数局部作用域：函数参数和函数体内声明的变量
全局作用域：只能访问全局对象（如 window、globalThis）
无法访问外部闭包：不能访问创建它的外部作用域的变量

function createFunction() {
  const closureVar = 'I am in closure';
  
  // 这个函数无法访问 closureVar
  const func = new Function('return closureVar');
  
  try {
    console.log(func());
  } catch (e) {
    console.log('Error:', e.message); 
    // 输出: Error: closureVar is not defined
  }
}

createFunction();

与普通函数的对比

const globalVar = 'global';

function outerFunction() {
  const outerVar = 'outer';
  
  // 普通函数声明 - 可以访问外部作用域
  function normalFunction() {
    return outerVar; // ✅ 可以访问
  }
  
  // Function 构造函数 - 无法访问外部作用域
  const constructedFunction = new Function('return outerVar');
  
  console.log(normalFunction()); // 输出: outer
  try {
    console.log(constructedFunction()); // ❌ ReferenceError
  } catch (e) {
    console.log('Error:', e.message);
  }
  
  // 但可以访问全局变量
  const globalAccess = new Function('return globalVar');
  console.log(globalAccess()); // ✅ 输出: global
}

outerFunction();

与普通函数声明的区别

1. 作用域访问

特性	普通函数	Function 构造函数
访问外部作用域	✅ 可以	❌ 不可以
访问全局作用域	✅ 可以	✅ 可以
形成闭包	✅ 可以	❌ 不可以

2. 性能

// 普通函数 - 编译时优化
function normalAdd(a, b) {
  return a + b;
}

// Function 构造函数 - 运行时解析，性能较差
const constructedAdd = new Function('a', 'b', 'return a + b');

// 性能测试
console.time('normal');
for (let i = 0; i < 1000000; i++) {
  normalAdd(1, 2);
}
console.timeEnd('normal'); // 通常更快

console.time('constructed');
for (let i = 0; i < 1000000; i++) {
  constructedAdd(1, 2);
}
console.timeEnd('constructed'); // 通常更慢

3. 代码可读性

// 普通函数 - 可读性好
function calculate(x, y) {
  const sum = x + y;
  const product = x * y;
  return sum * product;
}

// Function 构造函数 - 可读性差
const calculate2 = new Function('x', 'y', `
  const sum = x + y;
  const product = x * y;
  return sum * product;
`);

4. 调试

普通函数在调试时更容易追踪，Function 构造函数创建的函数在调试时可能显示为匿名函数。

5. this 指向

function thisBindingTest() {
  console.log("\n===== 4.1 this 指向测试 =====");
  const obj = {
    value: 42,
    // 普通方法
    normalMethod() {
      return this.value;
    },
    // Function 构造函数创建的方法
    constructedMethod: new Function(
      "console.log('constructedMethod this', this); return this.value"
    ) as () => number,
  };

  console.log("普通方法 this.value:", obj.normalMethod()); // 42
  console.log("Function 构造函数方法 this.value:", obj.constructedMethod()); // 42

  // 单独调用时的 this
  const normalMethod = obj.normalMethod;
  const constructedMethod = obj.constructedMethod;

  // 直接执行函数时：严格模式下 this 是 undefined, 非严格模式下 this 指向 window
  try {
    // ES Module 默认运行在严格模式下！
    console.log("单独调用普通方法:", normalMethod()); // undefined 或报错
  } catch (e) {
    console.log("单独调用普通方法报错:", (e as Error).message);
  }

  try {
    // 构造函数中的执行环境默认是非严格模式。所以 this 指向 window
    console.log("单独调用 Function 构造函数方法:", constructedMethod()); // undefined
  } catch (e) {
    console.log("单独调用 Function 构造函数方法报错:", (e as Error).message);
  }
}

/**
 * 严格模式下的 this
 */
function strictModeTest() {
  console.log("\n===== 4.2 严格模式下的 this =====");

  // 非严格模式
  const nonStrict = new Function("return this");
  console.log("非严格模式 this:", typeof nonStrict()); // object (全局对象)
  // 这也是为什么 with 可以这样使用
  const func = new Function(
    "sandboxContext",
    `
    with(sandboxContext) {
      // 代码在这里执行
    }
    `
  );

  // 严格模式
  const strict = new Function('"use strict"; return this');
  console.log("严格模式 this:", strict()); // undefined
}

安全性问题

1. 代码注入风险

Function 构造函数最大的风险是代码注入攻击：

// ⚠️ 危险：用户输入直接作为函数体
function dangerousEval(userInput) {
  return new Function(userInput);
}

// 攻击示例
const maliciousCode = 'console.log("Hacked!"); return 0;';
const func = dangerousEval(maliciousCode);
func(); // 执行恶意代码

2. XSS 攻击

// ⚠️ 危险示例
function createHandler(userInput) {
  // 如果 userInput 包含恶意代码，会导致 XSS
  return new Function('event', `
    console.log(${userInput});
  `);
}

3. 安全最佳实践

// ✅ 安全：使用白名单验证
function safeFunction(operation, a, b) {
  const allowedOperations = ['add', 'subtract', 'multiply', 'divide'];
  
  if (!allowedOperations.includes(operation)) {
    throw new Error('Invalid operation');
  }
  
  const operations = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };
  
  return operations[operation](a, b);
}

// ✅ 安全：使用参数化函数体
function createSafeCalculator(operation) {
  const templates = {
    add: 'return a + b',
    subtract: 'return a - b',
  };
  
  if (!templates[operation]) {
    throw new Error('Invalid operation');
  }
  
  return new Function('a', 'b', templates[operation]);
}

实际应用场景

1. 动态代码生成

在某些框架中，需要根据配置动态生成函数：

// 根据配置生成验证函数
function createValidator(rules) {
  const conditions = rules.map(rule => {
    if (rule.type === 'required') {
      return `if (!value) { return '${rule.message}'; }`;
    }
    if (rule.type === 'minLength') {
      return `if (value.length < ${rule.min}) { return '${rule.message}'; }`;
    }
    // ... 更多规则
  }).join('\n');
  
  return new Function('value', `
    ${conditions}
    return null;
  `);
}

const validator = createValidator([
  { type: 'required', message: '不能为空' },
  { type: 'minLength', min: 3, message: '至少3个字符' },
]);

console.log(validator('')); // 输出: 不能为空
console.log(validator('ab')); // 输出: 至少3个字符
console.log(validator('abc')); // 输出: null

2. 模板引擎

// 简单的模板引擎
function createTemplate(template) {
  // 将 {{variable}} 替换为变量访问
  const code = template
    .replace(/\{\{(\w+)\}\}/g, (match, varName) => {
      return `data.${varName}`;
    });
  
  return new Function('data', `return \`${code}\`;`);
}

const template = createTemplate('Hello, {{name}}! You are {{age}} years old.');
console.log(template({ name: 'Alice', age: 25 }));
// 输出: Hello, Alice! You are 25 years old.

3. 沙箱环境

在微前端或代码沙箱中，Function 构造函数可以用于隔离执行环境：

// 创建隔离的执行环境
function createSandbox(globalObj) {
  return function(code) {
    // 使用 Function 构造函数，只访问传入的 globalObj
    const func = new Function(
      ...Object.keys(globalObj),
      code
    );
    
    return func(...Object.values(globalObj));
  };
}

const sandbox = createSandbox({
  console: console,
  Math: Math,
  // 不包含 window、document 等
});

sandbox(`
  console.log(Math.max(1, 2, 3));
`); // 输出: 3

4. 表达式求值器

// 安全的数学表达式求值器
function createEvaluator() {
  // 只允许访问 Math 对象
  return new Function('x', 'y', `
    return Math.sqrt(x * x + y * y);
  `);
}

const distance = createEvaluator();
console.log(distance(3, 4)); // 输出: 5

代码示例

示例 1：动态函数生成

// 根据操作符动态生成计算函数
function createCalculator(operator) {
  const operators = {
    '+': 'return a + b',
    '-': 'return a - b',
    '*': 'return a * b',
    '/': 'return a / b',
  };
  
  if (!operators[operator]) {
    throw new Error(`Unsupported operator: ${operator}`);
  }
  
  return new Function('a', 'b', operators[operator]);
}

const add = createCalculator('+');
const multiply = createCalculator('*');

console.log(add(5, 3)); // 输出: 8
console.log(multiply(5, 3)); // 输出: 15

示例 2：条件函数生成

// 根据条件生成不同的处理函数
function createConditionalHandler(condition) {
  return new Function('value', `
    if (${condition}) {
      return value * 2;
    } else {
      return value / 2;
    }
  `);
}

const handler1 = createConditionalHandler('value > 10');
const handler2 = createConditionalHandler('value < 10');

console.log(handler1(15)); // 输出: 30
console.log(handler2(5)); // 输出: 2.5

示例 3：函数组合

// 组合多个函数
function composeFunctions(functions) {
  const functionBodies = functions.map((fn, index) => {
    return `const result${index} = ${fn.toString().replace(/function\s+\w+\s*\([^)]*\)\s*\{/, '').replace(/\}$/, '')}`;
  }).join(';\n');
  
  return new Function('input', `
    ${functionBodies};
    return result${functions.length - 1};
  `);
}

示例 4：事件处理器生成

// 动态生成事件处理器
function createEventHandler(handlerConfig) {
  const { eventType, action, target } = handlerConfig;
  
  return new Function('event', `
    if (event.type === '${eventType}') {
      ${action}
    }
  `);
}

const clickHandler = createEventHandler({
  eventType: 'click',
  action: 'console.log("Button clicked!");',
});

// 模拟事件
clickHandler({ type: 'click' }); // 输出: Button clicked!

常见问题和注意事项

1. 作用域问题

// ❌ 错误：试图访问外部变量
const x = 10;
const func = new Function('return x');
console.log(func()); // ReferenceError: x is not defined

// ✅ 正确：通过参数传递
const func2 = new Function('x', 'return x');
console.log(func2(x)); // 输出: 10

2. 性能问题

Function 构造函数创建的函数性能通常不如普通函数，因为：

需要运行时解析字符串
无法进行编译时优化
无法利用 JIT 编译器的优化

3. 调试困难

const func = new Function('a', 'b', 'return a + b');
console.log(func.name); // 输出: anonymous
// 在调试器中可能显示为匿名函数

4. 严格模式

// Function 构造函数创建的函数默认不在严格模式
const func1 = new Function('return this');
console.log(func1()); // 输出: 全局对象

// 要使用严格模式，需要在函数体中添加 'use strict'
const func2 = new Function('"use strict"; return this');
console.log(func2()); // 输出: undefined

5. this 绑定

const obj = {
  value: 42,
  getValue: new Function('return this.value'),
};

console.log(obj.getValue()); // 输出: 42（this 指向 obj）

// 但如果单独调用
const getValue = obj.getValue;
console.log(getValue()); // 输出: undefined（this 指向全局对象）

最佳实践

1. 避免使用（如果可能）

在大多数情况下，应该避免使用 Function 构造函数，优先使用普通函数声明或箭头函数。

// ❌ 不推荐
const add = new Function('a', 'b', 'return a + b');

// ✅ 推荐
const add = (a, b) => a + b;
// 或
function add(a, b) {
  return a + b;
}

2. 如果必须使用，确保安全

// ✅ 使用白名单
function safeCreateFunction(operation) {
  const allowed = {
    add: 'return a + b',
    subtract: 'return a - b',
  };
  
  if (!allowed[operation]) {
    throw new Error('Invalid operation');
  }
  
  return new Function('a', 'b', allowed[operation]);
}

3. 输入验证

// ✅ 验证输入
function createValidatedFunction(code) {
  // 检查是否包含危险关键字
  const dangerous = ['eval', 'Function', 'setTimeout', 'setInterval'];
  if (dangerous.some(keyword => code.includes(keyword))) {
    throw new Error('Dangerous code detected');
  }
  
  return new Function(code);
}

4. 使用场景限制

只在以下场景考虑使用 Function 构造函数：

需要动态生成代码（如模板引擎）
需要隔离执行环境（如沙箱）
需要根据配置生成函数（如验证器）

5. 文档和注释

如果必须使用 Function 构造函数，务必添加详细的注释说明原因和安全性考虑。

/**
 * 使用 Function 构造函数创建验证器
 * 注意：这里使用 Function 构造函数是因为需要根据动态配置生成验证逻辑
 * 安全性：只使用预定义的模板，不直接使用用户输入
 */
function createValidator(config) {
  // ... 实现
}

总结

Function 构造函数是 JavaScript 中一个强大但危险的工具：

优点：

可以动态创建函数
在某些场景下提供灵活性
可以用于创建隔离的执行环境

缺点：

性能较差
安全性风险高
调试困难
无法访问外部作用域

建议：

在大多数情况下避免使用
如果必须使用，确保输入验证和安全性
优先考虑其他解决方案（如函数工厂、配置对象等）

简单了解 Function