前言

在網(wǎng)上有很多關(guān)于js function 與 Function直接關(guān)系的文章。

但是我感覺過于抽象化了，那么如何是具體化的解釋？

正文部分為個(gè)人理解部分，如有不對(duì)望指出。

正文

<script>

	if((function(){}).constructor === Function)

	{

		console.log(true);

	}

</script>

我寫了一段這個(gè)代碼，答案為true。

這就是function 與 Function的關(guān)系。

看下Function的定義:

Function 構(gòu)造函數(shù)創(chuàng)建一個(gè)新的 Function 對(duì)象。直接調(diào)用此構(gòu)造函數(shù)可用動(dòng)態(tài)創(chuàng)建函數(shù)，但會(huì)遭遇來自 eval 的安全問題和相對(duì)較小的性能問題。然而，與 eval 不同的是，F(xiàn)unction 構(gòu)造函數(shù)只在全局作用域中運(yùn)行。

然后還給出了這樣一個(gè)結(jié)論:

每個(gè) JavaScript 函數(shù)實(shí)際上都是一個(gè) Function 對(duì)象。

重新理解一下，F(xiàn)unction的定義。

第一句話很好理解，就是可以創(chuàng)建一個(gè)Function對(duì)象。第二句好也好理解，就是會(huì)有安全漏洞和性能問題,詳細(xì)部分可看eval的安全問題，至于為什么低效，官方解釋是:因?yàn)槭褂煤笳邉?chuàng)建的函數(shù)是跟其他代碼一起解析的。

第三句話，什么叫"Function 構(gòu)造函數(shù)只在全局作用域中運(yùn)行"?

var func = new Function("alert(x+y);");

var test = function () {

	var x=1,y=2;

	func();

	eval("x+y");

}

就是func()運(yùn)行會(huì)報(bào)錯(cuò)。而eval("x+y")是成功的。

因?yàn)閒unc()是在全局作用域中運(yùn)行。

如果是這樣:

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();

那么會(huì)彈出3；

當(dāng)然這里說eval是在局部變量中運(yùn)行也比較絕對(duì)，因?yàn)閑val的引用變量是在全局中運(yùn)行的。

var global=eval;

global("x+y");

這樣就在全局中運(yùn)行，好吧，這不是該篇的重點(diǎn)。

那么這種Function 對(duì)象和申明函數(shù)有什么區(qū)別呢？前面已經(jīng)說明了，F(xiàn)unction對(duì)象是在全局中運(yùn)行，而聲明函數(shù)是在局部中運(yùn)行。

我找了一個(gè)例子:

var x = 10;

function createFunction1() {

    var x = 20;

    return new Function('return x;'); // 這里的 x 指向最上面全局作用域內(nèi)的 x

}

function createFunction2() {

    var x = 20;

    function f() {

        return x; // 這里的 x 指向上方本地作用域內(nèi)的 x

    }

    return f;

}

var f1 = createFunction1();

console.log(f1());          // 10

var f2 = createFunction2();

console.log(f2());          // 20

看到這里，以為結(jié)束了？下面是本文的核心思想部分。

我們?nèi)绾尾拍軌颍胒unction的方式建立出Function對(duì)象的效果？或者說我們?nèi)绾文Mnew Function() 到底發(fā)生了什么。

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,是一個(gè)匿名的函數(shù)。

匿名函數(shù)自帶是閉包效果，在這里我似乎找到了答案，現(xiàn)在我們就來模擬出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();

彈出的結(jié)果是11,另一個(gè)彈出的還是11;

在這里我假設(shè)啟動(dòng)的是main主函數(shù)，x與y是全局變量。

然后在func中的:

var func = FunctionObj;

func();

假設(shè)為new Function（），也就是說去假設(shè)構(gòu)建一個(gè)Function 對(duì)象。

這樣實(shí)現(xiàn)的其實(shí)就是在全局變量中創(chuàng)建了FunctionObj變量，然后賦值給了func,然后再執(zhí)行func的時(shí)候自然就在main變量中了，因?yàn)槟涿瘮?shù)本身就閉包。

對(duì)應(yīng)為:

var x=5;

var y=6;

function func()

{

	var x=1;

	var y=2;

	var NewFunc= new Function("alert(x+y)");

	NewFunc();

}

func();

繼續(xù)變化一下，模擬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();

彈出的結(jié)果依然是：11；

總結(jié)

回過頭來，再看一下這段話:

每個(gè) JavaScript 函數(shù)實(shí)際上都是一個(gè) Function 對(duì)象。

new Function 只是將匿名包，綁定到了一個(gè)全局變量了，這樣它的this永遠(yuǎn)固定,運(yùn)行時(shí)，永遠(yuǎn)是在全局中運(yùn)行。

至于聲明函數(shù)，因?yàn)槭莿?dòng)態(tài)的運(yùn)行，所以我們?cè)L問的以局部優(yōu)先，也可以理解為綁定的為局部變量。

以上是個(gè)人理解，如有不對(duì)望指出。

總結(jié)

以上是生活随笔為你收集整理的解决掉你心中 js function与Function的关系的疑问的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。