关于javascript:你不知道的『Function』

无论是业务开发还是底层开发，面向对象还是面向过程，函数始终是咱们绕不开并且接触十分频繁的一个点，之前原型链一章中有简略提到过Function，这节专门拿进去整顿一下这块的常识，用典型的大厂面试题加 MDN 官网文档解读的形式重温你不晓得的Function。

!function(){alert('ghostwang')}() //true

以上代码返回执行后后果返回 true应该很好了解，因为这个 匿名函数 没有返回值，所以为默认返回的是 undefined，感叹号(非) 取反后天然就是true`。问题不在于返回值，而是取反操作为什么能让一个匿名函数自调用变得非法？

我置信就算是高级前端在自学函数的时候都有听到过匿名函数自调用的解决方案，然而这种场景在业务开发中真的很少见，个别都会用函数表达式，特地是在使用框架之后，对原生 javascript 的操作频率更加低，大部分晓得的可能是用括号把匿名函数包装起来，如下形式:

(function(){alert('ghostwang')})()        // true
// 或者
(function(){alert('ghostwang')}())        // true

尽管括号地位不一样，然而执行成果以及后果截然不同。

然而越来越频繁的发现很多人会应用 ! 来取得雷同的答案，难道是为了节约一个字符吗？如同并不事实，如果不是为了体积思考，那猜想可能是为了性能上的晋升？先打个问号。

其实无论是括号，还是感叹号，让整个语句非法做的事件只有一件，就是让一个函数申明语句变成了一个表达式。

function foo(){alert('ghostwang')} // undefined

这是一个函数申明，如果在这么一个申明后间接加上括号调用，解析器天然不会了解而报错：

function foo(){alert('ghostwang')}() // SyntaxError: unexpected_token

因为这样的代码混同了函数申明和函数调用，以这种形式申明的函数 foo，就应该以 foo(); 的形式调用。

然而括号则不同，它将一个函数申明转化成了一个表达式，解析器不再以函数申明的形式处理函数 a，而是作为一个函数表达式解决，也因而只有在程序执行到函数 a 时它能力被拜访。

所以，任何打消函数申明和函数表达式间歧义的办法，都能够被解析器正确辨认。比方：

var i = function(){return 10}();        // undefined  
1 && function(){return true}();        // true  
1, function(){alert('ghostwang')}();        // undefined

赋值，逻辑，甚至是逗号，各种操作符都能够通知解析器，这个不是函数申明，它是个函数表达式。并且，对函数一元运算能够算的上是打消歧义最快的形式，感叹号只是其中之一，如果不在乎返回值，这些一元运算都是无效的：

!function(){alert('ghostwang')}()        // true
+function(){alert('ghostwang')}()        // NaN
-function(){alert('ghostwang')}()        // NaN
~function(){alert('ghostwang')}()        // -1

甚至上面这些关键字，都能很好的工作：

void function(){alert('ghostwang')}()        // undefined  
new function(){alert('ghostwang')}()        // Object  
delete function(){alert('ghostwang')}()        // true

最初，括号做的事件也是一样的，打消歧义才是它真正的工作，而不是把函数作为一个整体，所以无论括号括在申明上还是把整个函数都括在外面，都是非法的：

(function(){alert('ghostwang')})()        // undefined
(function(){alert('ghostwang')}())        // undefined

说了这么多，实则在说的一些都是最为根底的概念——语句，表达式，表达式语句，这些概念如同指针与指针变量一样容易产生混同。尽管这种混同对编程无表征影响，但却是一块绊脚石随时可能因为它而头破血流。

最初探讨下性能。不同的形式产生的后果并不相同，而且，差异很大，因浏览器而异。

但咱们还是能够从中找出很多共性：new办法永远最慢——这也是天经地义的。其它方面很多差距其实不大，但有一点能够必定的是，感叹号并非最为现实的抉择。反观传统的括号，在测试里体现始终很快，在大多数状况下比感叹号更快——所以平时咱们罕用的形式毫无问题，甚至能够说是最优的。加减号在 chrome 体现惊人，而且在其余浏览器下也广泛很快，相比感叹号成果更好。

当然这只是个简略测试，不能阐明问题。但有些论断是有意义的：括号和加减号最优。

每个 JavaScript 函数实际上都是一个 Function 对象。运行 (function(){}).constructor === Function // true 便能够失去这个论断。

这样的话，那咱们申明函数肯定还有 new 函数对象这种形式：

Function 构造函数 创立一个新的 Function 对象，与 eval 不同的是，Function 创立的函数只能在全局作用域中运行（留神辨别浏览器环境和 node 环境）。以调用函数的形式调用 Function 的构造函数（而不是应用 new` 关键字) 跟以构造函数来调用是一样的。

下面这句话极其重要，下面这句话极其要，下面这句话极其重要！

语法:

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

咱们先看一个经典的大厂面试题：

var a = 1,
    b = 2;

function foo() {
  var b = 3;
  return new Function('c', 'console.log(a + b + c)');
}

var test = foo();
test(4); // 7

为什么后果为 7，而不是 8 呢？那如果我改成上面这种惯例写法呢？后果一样吗？

var a = 1,
    b = 2;

function foo() {
  var b = 3;
  return function(c) {console.log(a + b + c)
  }
}

var test = foo();
test(4); // 8

再看上面这道题，后果又是什么？

var a = 1,
    b = 2;

function foo() {
  var b = 3;
  return new Function('c', 'var b = 3; console.log(a + b + c)');
}

var test = foo();
test(4); // 8

回头看一下刚开始那句话：Function 创立的函数只能在全局作用域中运行。

所以 new Function 结构的函数，函数体内拜访的作用域是全局作用域，他不会创立闭包；一起看看 MDN 官网的解释：

Function_结构器与函数申明之间的不同:

由 Function 结构器创立的函数不会创立以后环境的闭包，它们总是被创立于全局环境，因而在运行时它们只能拜访全局变量和本人的局部变量，不能拜访它们被 Function 结构器创立时所在的作用域的变量。这一点与应用 eval 执行创立函数的代码不同

外面提到的 eval 是什么？

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码，个别业务开发中用不到这个函数，然而我在一些源码中看到过，babel 的源码和 vue 源码中都有见到过，业务代码中根本没呈现过。因为这个货色很容易被滥用，并且对网站有危险性，可想而知这样的函数性能使用不当肯定会造成 js 脚本注入(xss) 的安全隐患。

咱们用 eval 来实现同样的代码，看看后果又会是什么?

var a = 1,
    b = 2;

function foo() {
  var b = 3;
  eval('!function _(c){console.log(a + b + c) }(4)');
}

foo(); // 8

因为 eval 执行代码作用域指向上方本地作用域，这一点与 new Function 相同，结尾也介绍了这句话。

先理解一下 javascrip 的顶级作用域：

global 是 javascript 运行时所在宿主环境提供的全局对象

window 对象是浏览器的一个 web api, 能够说是 global 在浏览器中的具体表现

global 对象是单体内置对象，即不依赖宿主环境的对象，而 window 对象依赖浏览器

node环境执行以下代码看看执行后果是否与浏览器环境下雷同：

var a = 1,
    b = 2;

function foo() {
  var b = 3;
  return new Function('c', 'console.log(a + b + c)');
}

var test = foo();
test(4);

执行后果如下：

因为在 node 环境下你在以后文件定义的变量作用域是以后模块的作用域，而不是顶级作用域，node的顶级作用域是 global，new Function 中的函数体是全局作用域，当然拜访不了你模块中的作用域了。

原型链相干内容能够参考往期文章: 一题搞懂原型链

var test1 = new Function("console.log('test1')");
var test2 = Function("console.log('test2')");
console.log(test1.__proto__ === Function.prototype); // true
console.log(Function.__proto__ === Function.prototype); // true

关于javascript:你不知道的『Function』

函数申明与函数表达式

Function 构造函数

Node 环境异同解析

原型链