Heim >Web-Frontend >js-Tutorial >通过javascript的匿名函数来分析几段简单有趣的代码_javascript技巧

通过javascript的匿名函数来分析几段简单有趣的代码_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:24:26876Durchsuche

1、简单形式的封装调用

复制代码 代码如下:

var userName = function() { return "jeff wong" } ();
alert(userName);


上面的代码确实简单,我们可以逐步分解成下面的写法:
复制代码 代码如下:

var anonymousFunc = function() { return "jeff wong" }; //匿名函数
var name = anonymousFunc(); //执行该函数 返回人名
alert(name);


2、new 一下Function的形式(大写Function)
复制代码 代码如下:

var a = new Object();
var b = new Function();
//alert(typeof (a)); //object
//alert(typeof (b)); //function
alert(a); //[object Object]
alert(b); //匿名函数
//alert(a == b); //false
//alert(a === b); //false



正如你所看到的那样,我们new一个Object,变量a弹出的是[object Object],而new一个Function(注意,是大写Function),b在弹出的时候,生成了匿名函数。 既然b是匿名函数,函数当然可以执行,我们可以继续试试下面的代码验证自己的猜测:
复制代码 代码如下:

alert(b()); //undefined
alert(a()); //脚本错误 提示“缺少函数”



3、new 一下function也大有乾坤(小写function)
(1)、简单的空函数
复制代码 代码如下:

var func = new function() { };
alert(typeof (func)); //object
alert(func); //[object Object]
//alert(func()); //脚本错误 func不是函数



其实上面的代码也就等价于下面的写法:
复制代码 代码如下:

function anonymousClass() { } //匿名类
var instance = new anonymousClass();
alert(typeof (instance));//object
alert(instance); //[object Object]

[code]

(2)、函数带个返回值的,也不是很难理解
[code]
var func = new function() { return "jeff wong" };
alert(typeof (func));
alert(func);
//alert(func()); //脚本错误 缺少函数



其实上面的代码也就等价于下面的写法:
复制代码 代码如下:

function anonymousClass() { return "jeff wong"; } //匿名类
var instance = new anonymousClass();
alert(typeof (instance));//object
alert(instance); //[object Object]


(3)、还是函数带个返回值的,写法稍微有点不同

下面的代码请注意和(2)中的区分一下,因为接下来要重点讨论的就是那一点点的不同书写形式:
复制代码 代码如下:

var func = new function() { return new String("jeff wong"); };
alert(typeof (func)); //object 意料之中
alert(func); //这里?!
//alert(func()); //脚本错误 缺少函数



上面代码的等价形式依然简单:
复制代码 代码如下:

function anonymousClass() { return new String("jeff wong"); }
var instance = new anonymousClass();
alert(typeof (instance));
alert(instance);


已经运行看到结果了吗?没错,第三种写法我们在弹出func或者instance的时候,都出人意料地得到了一段字符串"jeff wong"。细心比较(2)和(3)中的代码,除了return处的写法稍有不同之外,两处代码几乎完全一致,所以我们推断,毫无疑问,是new String的形式让我们的函数产生了意想不到的效果。 为什么会这样呢?

原来,在javascript中,只要在new表达式之后的constructor返回(return)一个原始类型(无return时其实是return原始类型undefined,如(1)),比如第(2)种写法,那么就返回new创建的匿名对象;而如果new表达式之后的constructor返回一个引用对象,比如对象(Object),函数(function)及数组(Array)等等,那么返回的该引用对象就将覆盖new创建的匿名对象。现在再来分析(3)中的写法,由于new String会构造一个字符串引用对象,它就覆盖了new所创建的匿名对象,而new String的所指向引用值是“jeff wong”,所以弹出的必然是当前new String所分配的值。

  最后,留个思考题,大家看看下面的代码返回什么结果:

复制代码 代码如下:

var func = new function() { var str = new String("jeff wong"); return str; };//再换种写法
//alert(typeof (func)); //object 意料之中
alert(func); //猜一下这里应该是什么结果?

作者:Jeff Wong
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn