【JavaScript系列】你应掌握的JavaScript之函数(…

2018-09-18 06:39:32来源：博客园阅读 ()

在编程语言中，无论是面向过程的C,兼备面过程和对象的c++，还是面向对象的编程语言，如java,.net,php等，函数均扮演着重要的角色。当然，在面向对象编程语言JavaScript中(严格来说，JS属于弱面向对象编程语言)，函数(function)更扮演着极其重要的角色和占有极其重要的地位。在本篇文章中，不论述什么是JS，JS解决什么问题等之类问题，而是重点阐述JS中的函数(function)。

一什么是javascript函数

1.函数定义

关于函数的定义，我们先从两个角度来思考：数学角度和编程语言角度。

(1)数学角度：在数学领域，关于“函数”二字，再熟悉不过，如三角函数，反三角函数，幂函数，对数函数，指数函数，微积分函数等；

(2)编程角度：在编程领域，大家最熟悉且最先接触的应该是"Main函数"了，除此外，如日期函数(Date)，数学函数(Math)等，当然除了内置函数外，还包括用户自定义函数；

综合1，2点，我们不难发现，函数的定义应该是这样的：

函数是解决某类问题的集合，是某类问题的高度抽象，它具有一定的通用性和复用性。

2.js中两种经典函数定义

在Javascript中，存在两种经典的函数定义方式：函数声明式和函数表达式

(1)函数声明式

1 //定义两个数相加函数
2     function AddNum(num1, num2) {
3         return num1 + num2;
4     }

(2)函数表达式

1  //定义两个数相加函数
2     var AddFun=function AddNum(num1, num2) {
3         return num1 + num2;
4     }

注意，在用函数表达式定义时，一般采用匿名函数定义，即如下：

1 //定义两个数相加函数
2     var AddFun=function (num1, num2) {
3         return num1 + num2;
4     }

Question：为什么函数表达式用匿名函数，而函数声明式不用匿名？

答：因为函数表达式调用时，使用的是函数表达式名，不需要函数名，因此函数名可以匿名，而函数声明式调用时，使用函数名调用，因此不用匿名函数；

声明式调用1：

1 //定义两个数相加函数
2 function AddNum(num1, num2) {
3     return num1 + num2;
4 }
5 
6 
7 console.log(Add(10,20));//30

声明式自调用:

自调用只存在函数声明式中，也叫立即调用，不能在在函数表达式中调用。

1 (function AddNum(num1, num2) {
2        console.log(num1 + num2);
3   })(10,20);//30

声明式调用3:错误调用方式

请大家想想，这种调用方式为什么会错？

1 function (num1, num2) {
2         return num1 + num2;
3     }
4 
5 console.log((10,20));

调用结果：

表达式调用1：推荐写法

1 //定义两个数相加函数
2 var AddFun=function (num1, num2) {
3     return num1 + num2;
4 }
5 
6 console.log(AddFun(10,20));//30

表达式调用2：不推荐写法

1 //定义两个数相加函数
2 var AddFun=function AddNum(num1, num2) {
3     return num1 + num2;
4 }
5 
6 console.log(AddFun(10,20));//30

表达式调用3:错误调用方式

请大家想想，这种调用方式为什么会错？

1 //定义两个数相加函数
2 var AddFun=function AddNum(num1, num2) {
3     return num1 + num2;
4 }
5 
6 console.log(AddNum(10,20));//30

调用结果:

3.变量

在JavaScript编程语言中，变量的定义是通过var关键字来定义的(若变量不通过var定义，则为全局变量，但不推荐这么做)，与其他编程语言一样，变量也分为两大类，即局部变量和全局变量。

(1)局部变量：作用域为其所在的函数；

(2)全局变量：作用域为整个过程；

(3)变量作用域：JS中的变量作用域是通过this指针，从当前的作用域开始，从当前作用域由内向外查找，直到找到位置，这里分为几个逻辑：

a.从当前作用域由内向外查找,若找到，就停止查找，否则，继续查找，直到查到window全局作用域为止；

b.当内部作用域变量名与外部作用域变量名相同时，内部作用域的覆盖外部作用域。

我们来看一个例子：

 1 var dateTime='2018-09-16';
 2 function GetUserInfo(){
 3     var age=120;
 4     var name="Alan_beijing";
 5     function Say(){
 6        var name="老王";
 7        var address="shanghai";
 8        console.log(address+"-"+name+"-"+age+"-"+dateTime);//shanghai-老王-2018-06-05
 9     }
10    return Say();
11 }
12 
13 
14 GetUserInfo();//shanghai-老王-120-2018-09-16

来分析一下变量及其作用域：

如上图，有4个作用域，当函数执行如下语句时，发生如下过程：

1 console.log(address+"-"+name+"-"+age+"-"+dateTime);

a.js当前this环境作用域为4作用域；

b.this指针寻找变量：addresss,name,age,dateTime，从当前作用域向外作用域逐层寻找，知道寻找到变量值为止,若寻找到最外层作用域任然没找到，则该变量返回undefined；

c.当内外层变量相同时，内层变量覆盖外层变量，如4作用域的name覆盖3作用域的name;

4.函数声明式定义存在的问题

在js中，存在声明提前问题，看看如下例子。

1 var globleName="Alan_beijing";
2 function Say(){
3    console.log(localName);  // undefined,不报错，是因为变量声明提前
4    var localName="Alan";
5    console.log(localName);// Alan
6 }

看过如上代码，你可能会问，函数执行到console.log(localName); 时，应该报错，因为localName未定义。

如果在后端语言，如java,.net中，可能会报错，但是在js中，却不会，不报错的原因是：在js中存在声明提前。

如上代码相当于如下代码：

1 var globleName="Alan_beijing";
2 function Say(){
3    var localName;
4    console.log(localName);
5    localName="Alan";
6    console.log(localName);
7 }

二函数几大关键点

1.匿名函数

匿名函数，顾名思义，就是没名字的的函数，我们来看看如下两个例子：

函数表达式

1 //定义两个数相加函数
2     var AddFun=function (num1, num2) {
3         return num1 + num2;
4     }

立即执行函数

(function AddNum(num1, num2) {
      console.log(num1 + num2);
   })(10,20);//30

从如上，不难看出，匿名函数主要用域函数表达式和立即执行函数。

2.闭包

闭包的根源在于变量的作用域问题。

我们先来考虑这样一个问题，假设在面向对象编程语言中，某个方法的变量被定义为私有变量，其他函数要获取访问该变量，.net怎么处理？

方法一：构造函数

方法二：单例模式

同样地，在js中，同样存在外部函数调用内部函数变量问题，js运用的技术就叫做闭包。

所谓闭包,就是将不可访问的变量作为函数返回值的形式返回来，从而实现函数外部访问函数内部变量目的。

1 //闭包
2     function GetName() {
3         var name = "Alan_beijing";
4         var age = function () {
5             var age = 30;
6             return age;
7         }
8         return name + age;
9     }

3.js多态问题(重载问题)

在面向对象编程语言，如.net中，实现多态的方式大致有如下：

a.接口

b.抽象类

c.虚方法

d.方法重载

然而，在js中，没有面向对象之说(OO)，那么js是如何实现多态的呢？根据方法实际传递的参数来决定。

1  //重载
2 function SetUserInfo(userName, age, address, tel, sex) {
3     console.log(arguments.length);//4
4 }
5 
6 SetUserInfo('Alan_beijing',44,'china-shanghai','xxxx');

从如上可以看出，传递多少个参数，就接收多个参数，如果在现象对象编程语言中实现该功能，至少需要写一堆代码，这也是体现js强大之一。

4.递归

来看看一个递归阶乘函数

1 //递归
2     function factorial(num) {
3         if (num < 1) {
4             return 1;
5         } else {
6             return num * arguments.callee(num-1);
7         }
8     }

如果是.net，我们一般会这样写

1 //递归
2     function factorial(num) {
3         if (num < 1) {
4             return 1;
5         } else {
6             return num * factorial(num-1);
7         }
8     }

然而，这样写，却会存在异常情况

1  var factorial1 = factorial;
2     factorial = null;//将factorial变量设置为null
3     console.log(factorial1(4));//出错

5.原型和原型链

面向对象编程语言的显著特征之一是面向对象，然而，在js中，没有对象，那么js是如何面向对象的功能的呢（封装，继承，多态）？当然是通过原型和原型链来实现的。

大家都比较怕原型和原型链，其实很简单，它的功能相当于面向对象的继承，主要解决继承和复用。

介于篇幅有限，余下的内容，将在下篇文章阐述.....

三参考文献

【01】JavaScript 高级程序设计(第三版) （美）Nicholas C.Zakas 著李松峰曹力译

【02】JavaScript 权威指南 (第6版) David Flanagan 著

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：AngularJS标准Web业务流程开发框架-4.AngularJS四大模块之一：Co

下一篇：spa 小程序的研发随笔 (1) --- 前言

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签