解决掉你心中 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永远固定,运行时,永远是在全局中运行。
至于声明函数,因为是动态的运行,所以我们访问的以局部优先,也可以理解为绑定的为局部变量。
以上是个人理解,如有不对望指出。