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(){}的区别以及上面那段话要表达的意思。
    总结一下就是:

  1. new function(){} 返回了一个匿名对象,里面的代码可以看作是这个对象的调用构造函数时候执行的代码,并且已经执行了,所以前面两句代码(fun1和fun2)执行后两个function中的代码都会被执行; 
  2. new function(){} 会以为返回值的不同出现两种不同的情况,也就是本文开头双引号加粗字体那段话要说的内容了; 
  3. function(){} 返回了一个匿名函数,第三句代码中我们用fun3这个变量来接收它,其实就是给这个匿名函数起了个名字叫做fun3,因此和fun1、fun2不一样,只有fun3这个方法被调用的时候里面的代码才会被执行。


    本文的例子比较简单,需要例子的点击下载用IE打开或者一步步调试,仔细观察页面内容的变化,可以发现一些js的特征哇^_^)

posted @ 2012-07-13 11:01  serafin  阅读(539)  评论(0编辑  收藏  举报