javascript笔记:深入理解javascript的function

======================================================
注：本文源代码点此下载
======================================================

function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念。

一、我的第一个javascript代码

1 function test()

2 {

3alert('hello world!');

4 }

5 window.onload = test();//hello world!

界面加载时候就会弹出写有“hello world!”的对话框。我对function的第一印象就和java里面方法没啥区别了。但是当我看到这样的代码我就晕乎乎了。

1 function test(num)

2 {

3return function()

4{

5if (num > 0)

6{

7return '正数';

8}else if (num0)

9{

10return '负数';

11}else{

12return '零';

13}

14}

15 }

16 window.onload = alert(test(11)());//零

二、javascript里面定义函数的方法

1.函数声明

1 function sum(a,b)

2 {

3return a+b;

4 }

5

6 alert(sum(10,20));//30

2.函数表达式

1 var sum = function(a,b)

2 {

3return a+b;

4 };

5

6 alert(sum(10,20));//30

3.使用function构造函数

1 var sum =new function("a","b","return a+b");

2 alert(sum(10,20));//30

以上三种都可以定义一个函数目的。大多数javascript书籍里面不推荐使用第三种,原因第三种存在严重的性能问题,这种定义会解析两次代码,第一次是常规的解析这条语句,第二次要把函数里的字符串解析成实际的函数,但是它却传达了javascript的函数其实是对象(object),而函数名是指向对象的指针。

因此我觉得理解函数function的关键把它当作对象object。javascript对象存储的方式:

javascript数据是存在栈内存(stack)和堆内存(heap),堆内存存储javascript对象的具体内容,而栈内存存储对象的地址,下面的代码:

1 var ftn = function(){alert(‘hi’)};

ftn存储在栈内存,function(){alert(‘hi’)};存储在堆内存里面,ftn的记录的是function(){alert(‘hi’)};在堆内存的地址。因此下面的代码:

1 alert(ftn);// var ftn = function(){alert(‘hi’)};

弹出框显示的是function的全部定义。如果代码如下:

ftn()//hi

结果就是hi了。(一般执行函数,可以在函数名后面加上括号,传入需要传入的参数)。

三、javascript里面没有函数重载

1 function sum(num)

2 {

3return num+10;

4 }

5 function sum(num)

6 {

7return num+30;

8 }

9 alert(sum(10));//40

后面定义的方法会覆盖前面的方法,如果我们理解了“javascript的函数其实是对象(object),而函数名是指向对象的指针”,这个就很好理解了,上面的写法可以改写为:

1 var sum = function(num)

2 {

3return num+10;

4 }

5 sum = function(num)

6 {

7return num+30;

8 }

9 alert(sum(10));//40

四、函数声明和函数表达式的区别

两个的定义见本文的条目二。对于这两种方式的区别我在上一篇文章里做过测试,我觉得我的猜测还是很有道理,不过这里我还是要提供一些权威的说法:

1.函数声明(function ftn(){}):代码执行之前,解析器就已经读取函数声明并将其添加到执行环境中,因此如下代码运行正常:

1 sayhello();

2 function sayhello()

3 {

4alert('hello');

5 }

2.(代码如下)函数表达式(var ftn = function(){}):这个会产生运行错误,原因在于函数位于一个初始化语句中,而不是一个函数声明,换句话说,在执行到函数所在语句之前,变量sayhello不会保存对函数引用。

1 sayhello();

2 var sayhello = function ()

3 {

4alert('hello');

5 }

五、函数可以当做值使用

函数名是变量,所以函数可以当作值来用,因此我开头写的那个代码就可以理解了,那是把函数作为返回值。用过jquery的人都会知道:$(document).ready(function(){}),这就是典型的把函数当作参数使用了。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/