您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

JavaScript Function

Function 构造创建新的 Function 对象。直接此构造可用动态创建,但会遭遇来自 eval 的安全问题和相对较小的问题。—— MDN

Function 可以用来创建,JavaScript 中的所有,都是 Function对象

Function 在被当作构造的时候,可以用来创建。

var fn = new Function(参数, 参数, ..., 参数n,);

体是字符串,字符串的是就是时候被执行的语句。

var fn = new Function('a', 'b', 'return a + b');

var result = fn(, );

console.log(result); // :4

将上面创建的方式“翻译”成常用的创建方式可以是:

var fn = function(a, b) {
  return a + b;
};

var result = fn(, );

console.log(result); // :4

对比一下就很好理解使用 new Function 时候所传递的参数的含义了。

这里指的常规方式是指声明表达式或 ES6 中的箭头

使用 Function 创建的,最后参数,即体内在执行的时候作用域是在全局的。

var num = ;

function fn() {
  var num = ;

  var func = new Function('console.log(num)');

  console.log(num);

  func();
}

fn();

// :
//  10
//  20

这个例子在执行后,依次了 1020 ,根据结果可以知道 new Function 创建的,在执行过程中,上层作用域是顶级的全局作用域,在浏览器下即为 window

使用 Function 来创建是比较麻烦的,照道理讲不会有小伙伴会喜欢用这种方式创建。

Function 的使用主要场景与 eval 类似,用于动态的运行。

如在线的解析器就可以配合 Function 完成。

var run = function(code, callback) {
  window._callback = callback;

  var fn = Function(code + ';_callback()');

  fn();
};


run('console.log("动态执行的");', function() {
  console.log('执行后做的事');
});

这样就可以实现简单的动态运行。

注意:真正需要完成这个需要大量的细节处理,如处理,处理异步,绝非这么简单。

还有一些编译工具会将编译后的,使用 new Function 进行包裹,如以下:

var number = ;
var flag = false;

console.log(number, flag);

上面这份在经过编译后可能会变成:

(new Function('console.log(1,!1)'))()

这样做是为了缩短,另外就是让格式化工具无法很好的格式化。

开发者通常不会通过内建对象 Function 来创建,更多的是利用 Function 的特性来动态执行。

通常情况下 Function 创建的,在执行过程中其 this 是指向最顶层的。


联系我
置顶