解决掉你心中 js function与Function的关系的疑问

前言

在网上有很多关于js function 与 Function直接关系的文章。

但是我感觉过于抽象化了，那么如何是具体化的解释？

正文部分为个人理解部分，如有不对望指出。

正文

<script>
	if((function(){}).constructor === Function)
	{
		console.log(true);
	}
</script>

我写了一段这个代码，答案为true。

这就是function 与 Function的关系。

看下Function的定义:

Function 构造函数创建一个新的 Function 对象。直接调用此构造函数可用动态创建函数，但会遭遇来自 eval 的安全问题和相对较小的性能问题。然而，与 eval 不同的是，Function 构造函数只在全局作用域中运行。

然后还给出了这样一个结论:

每个 JavaScript 函数实际上都是一个 Function 对象。

重新理解一下，Function的定义。

第一句话很好理解，就是可以创建一个Function对象。第二句好也好理解，就是会有安全漏洞和性能问题,详细部分可看eval的安全问题，至于为什么低效，官方解释是:因为使用后者创建的函数是跟其他代码一起解析的。

第三句话，什么叫"Function 构造函数只在全局作用域中运行"?

var func = new Function("alert(x+y);");
var test = function () {
	var x=1,y=2;
	func();
	eval("x+y");
}

就是func()运行会报错。而eval("x+y")是成功的。

因为func()是在全局作用域中运行。

如果是这样:

var x=1,y=2;
var func = new Function("alert(x+y);");
var test = function () {
	var x=1,y=2;
	func();
	eval("x+y");
}

test();

那么会弹出3；

当然这里说eval是在局部变量中运行也比较绝对，因为eval的引用变量是在全局中运行的。

var global=eval;
global("x+y");

这样就在全局中运行，好吧，这不是该篇的重点。

那么这种Function 对象和申明函数有什么区别呢？前面已经说明了，Function对象是在全局中运行，而声明函数是在局部中运行。

我找了一个例子:

var x = 10;

function createFunction1() {
    var x = 20;
    return new Function('return x;'); // 这里的 x 指向最上面全局作用域内的 x
}

function createFunction2() {
    var x = 20;
    function f() {
        return x; // 这里的 x 指向上方本地作用域内的 x
    }
    return f;
}

var f1 = createFunction1();
console.log(f1());          // 10
var f2 = createFunction2();
console.log(f2());          // 20

看到这里，以为结束了？下面是本文的核心思想部分。

我们如何才能够，用function的方式建立出Function对象的效果？或者说我们如何模拟new Function() 到底发生了什么。

var x=1,y=2;
var func = new Function("alert(x+y);");
var func1= function ()
{
	alert(x+y);
}
console.log(func);
console.log(func1);

打印出来func,是一个匿名的函数。

匿名函数自带是闭包效果，在这里我似乎找到了答案，现在我们就来模拟出new Function();

function main() {
	var x = 5;
	var y = 6;
	 FunctionObj = function () {
		alert(x + y);
	};

	function func() {
		var x = 1;
		var y = 2;
		var Newfunc = FunctionObj;
		Newfunc();
	}
	func();
}
main();
FunctionObj();

弹出的结果是11,另一个弹出的还是11;

在这里我假设启动的是main主函数，x与y是全局变量。

然后在func中的:

var func = FunctionObj;
func();

假设为new Function（），也就是说去假设构建一个Function 对象。

这样实现的其实就是在全局变量中创建了FunctionObj变量，然后赋值给了func,然后再执行func的时候自然就在main变量中了，因为匿名函数本身就闭包。

对应为:

var x=5;
var y=6;
function func()
{
	var x=1;
	var y=2;
	var NewFunc= new Function("alert(x+y)");
	NewFunc();
}
func();

继续变化一下，模拟Function 做了什么:

var x=5;
var y=6;
function func()
{
	var x=1;
	var y=2;
	var NewFunc= Functionsimulation();
	NewFunc();
}
function Functionsimulation()
{
	 var global=eval;
	 return eval("(function(){return function(){alert(x+y)}})()");
}
func();

弹出的结果依然是：11；

总结

回过头来，再看一下这段话:

每个 JavaScript 函数实际上都是一个 Function 对象。

new Function 只是将匿名包，绑定到了一个全局变量了，这样它的this永远固定,运行时，永远是在全局中运行。

至于声明函数，因为是动态的运行，所以我们访问的以局部优先，也可以理解为绑定的为局部变量。

以上是个人理解，如有不对望指出。