JavaScript中的function(){}和new function(){}
下午抽了点空闲在网上看了点文章,后来处于某种原因研究了点js的问题,首先考虑一下以下这句话:
"只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实为 return 原始类型 undefined),那么就返回 new 创建的匿名对象"!
这是在研究function(){}和new function(){}的区别的时候在网上查到的一段话,理解这段话可以参照一下这段代码:
javascript代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// fun1是变量 // 相当于:fun1 = new String("2011-02-18 17:23:43"); var fun1 = new function () { operList.innerHTML += "<li>fun1</li>" ; return new String( "2011-02-18 17:23:43" ); }; /* 执行到这里页面会显示出“fun1” */ // fun2是变量 // 相当于:function 匿名类(){ return "2011-02-18 17:23:43"; } // var fun2 = new 匿名类(); var fun2 = new function () { operList.innerHTML += "<li>fun2</li>" ; return "2011-02-18 17:23:43" ; }; /* 执行到这里页面会显示出“fun2” */ // fun3是函数 var fun3 = function () { operList.innerHTML += "<li>fun3</li>" ; return "2011-02-18 17:23:43" ; }; alert( "fun1 : " + fun1); // 读取fun1 alert( "fun2 : " + fun2); // 读取fun2 alert( "fun3 : " + fun3); // 读取fun3 alert( "fun3() : " + fun3()); // 执行函数fun3 /* 执行到这里页面会显示出“fun3” */ |
以上代码中的operList是页面上的一个ul,这段代码跑下来会在id为“operList”的ul中插入三个li,分别显示“fun1”,“fun2”,“fun3”;同时会在页面上打出四个alert,分别显示“fun1 : 2011-02-18 17:23:43”、“fun2 : [object Object]”、“fun 3 : ...”(这里的省略号是以为内容比较长,显示的是fun3的定义代码),“fun3() : 2011-02-18 17:23:43”。
其实要说的都写在代码注释里面了,感觉这个例子应该可以比较好的说明function(){}和new function(){}的区别以及上面那段话要表达的意思。
总结一下就是:
- new function(){} 返回了一个匿名对象,里面的代码可以看作是这个对象的调用构造函数时候执行的代码,并且已经执行了,所以前面两句代码(fun1和fun2)执行后两个function中的代码都会被执行;
- new function(){} 会以为返回值的不同出现两种不同的情况,也就是本文开头双引号加粗字体那段话要说的内容了;
- function(){} 返回了一个匿名函数,第三句代码中我们用fun3这个变量来接收它,其实就是给这个匿名函数起了个名字叫做fun3,因此和fun1、fun2不一样,只有fun3这个方法被调用的时候里面的代码才会被执行。
本文的例子比较简单,需要例子的点击下载(用IE打开或者一步步调试,仔细观察页面内容的变化,可以发现一些js的特征哇^_^)