转自:http://segmentfault.com/a/1190000000660786

概念

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

js 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的。

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

函数调用

有如下四种调用js函数的方式:

  • 作为函数

  • 作为方法

  • 作为构造函数

  • 通过call()apply()

返回函数的函数

  1. 当函数无明确返回值时,返回的值就是undefined

  2. 当函数有返回值时,返回值是什么就返回什么。

我们可以通过使用 return 语句实现将函数返回调用它的地方。

在使用 return 语句时,函数会停止执行,并返回指定的值。

函数通常会返回一个唯一值,那么这个值也可能是另一个函数:

  1. <script type="text/javascript">
  2. //函数表达式
  3. var box = function(){
  4. var a=1;
  5. return function(){
  6. alert(a++)
  7. }
  8. alert(a);//永远不会执行
  9. }
  10. alert(box());//弹出"function(){alert(a++)}"
  11. </script>

在这里,我们只需将返回值赋值给某个变量,然后就可以像使用一般函数那样调用它了:

  1. <script type="text/javascript">
  2. var box = function(){
  3. var a=1;
  4. return function(){
  5. alert(++a)
  6. }
  7. }
  8. var newFunc = box();
  9. newFunc();//2
  10. </script>

如果想让返回的函数立即执行,亦可以使用box()()来执行这段代码。


ECMAScript所有函数的参数都是按值传递的,言下之意就是参数不会按引用传递。

PS:如果存在按引用传递的话,那么函数里的那个变量将会是全局变量,在外部也可以访问。

  1. 1)值类型:数值、布尔值、nullundefined
  2. 2)引用类型:对象、数组、函数。

引用类型值:指的是那些保存在堆内存中的对象,意思是,变量中保存的实际上只是一个指针,这个指针执行内存中的另一个位置,由该位置保存对象;

创建匿名函数

  1. function(){
  2. return hi’; //单独的匿名函数是无法运行的,就算能运行也无法调用,因为没有名字
  3. }

这种匿名函数的用法在JQuery中非常多。直接声明一个匿名函数,立即使用。用匿名函数的好处就是省得定义一个用一次就不用的函数,而且免了命名冲突的问题,js中没有命名空间的概念,因此很容易函数名字冲突,一旦命名冲突以最后声明的为准。

javascript语言里任何匿名函数都是属于window对象。在定义匿名函数时候它会返回自己的内存地址,如果此时有个变量接收了这个内存地址,那么匿名函数就能在程序里被使用了,因为匿名函数也是在全局执行环境构造时候定义和赋值,所以匿名函数的this指向也是window对象

  1. (function(){
  2. console.log(this === window);//true
  3. })();

通过自我执行来执行匿名函数:

  1. //通过自我执行来执行匿名函数
  2. <script type="text/javascript">
  3. (function (){ // (匿名函数)();第一圆括号放匿名函数,第二个圆括号执行
  4. alert('Lee');
  5. })();
  6. </script>

把匿名函数自我执行的返回值赋给变量:

  1. //把匿名函数自我执行的返回值赋给变量
  2. <script type="text/javascript">
  3. var box = (function (){
  4. alert('Lee');
  5. })(); //弹出”Lee”;
  6. alert(box); //弹出 undefined,如果写出alert(box()),那么只会弹出一个"Lee"
  7. </script>
  8. var box= (function () {
  9. return 'hi';
  10. })();
  11. console.log(box);//hi

自我执行匿名函数的传参:

  1. //自我执行匿名函数的传参
  2. <script type="text/javascript">
  3. (function (age){
  4. alert(age);
  5. })(100); //弹出100
  6. </script>

自执行函数的三种写法

  1. var result = function (){
  2. alert(2);
  3. }();

另一种语法也可得到同样结果:

  1. var result = (function () {
  2. console.log(2);
  3. })();

将函数返回值分配给变量:

  1. var result = (function () {
  2. return 2;
  3. }());

js创建动态函数:

  js支持创建动态函数,动态函数必须用Function对象来定义(Function是js中的一个对象,是固定不变的,规定Function对象的"F"必须大写,当是function的时候,我们知道是定义函数的时候所使用的一个关键字:function funName(x,y),当是Function的时候(F大写的时候),我们知道是js中的对象)

创建动态函数的基本格式:var 变量名 = new Function("参数1","参数2","参数n","执行语句");

看下面的一段代码:

  1. <script type="text/javascript">
  2. var square = new Function ("x","y","var sum ; sum = x+y;return sum;");
  3. alert("square(2,3)的结果是:"+square(2,3)); //square(2,3)的结果是:5
  4. </script>

square是动态创建的函数,在Function对象后面的括号里的每一部分内容都必须是字符串形式的,也就是说都必须用引号(""或者是'')括起来

这段代码:

  1. var square = new Function ("x","y","var sum ; sum = x+y;return sum;");

和下面这段代码:

  1. //函数声明
  2. function square (x,y){
  3. var sum;
  4. sum = x+y;
  5. return sum;
  6. }

是一摸一样的,只不过一个是动态函数,一个是静态函数
我们为什么要把代码分成一小段一小段的代码呢?,把一个字符串分成了若干个独立的字符串的优点就在于我们可以通过修改其中的某些字符串来随时改变函数的作用。

回调函数

回调就是一个函数的调用过程。那么就从理解这个调用过程开始吧。函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。

其实中文也很好理解:回调,回调,就是回头调用的意思。函数a的事先干完,回头再调用函数b。

这里必须清楚一点:函数b是你以参数形式传给函数a的,那么函数b就叫回调函数。

在jquery里的绝大多数效果函数都涉及到callback函数。jquery效果函数
例如:

  1. <script type="text/javascript">
  2. $("div").show(1000,function(){
  3. //callback function
  4. });
  5. </script>

这里的callback function换成实例可以是:

  1. <script type="text/javascript">
  2. $("div").show(1000,function(){
  3. console.log("hello world")
  4. });
  5. </script>

Callback实际上是,当一个函数执行完后,现执行的那个函数就是所谓的callback函数。怎么样?很好理解吧……

方法和函数的区别

  1. var arr = [1,2,3,4,5]
  2. var a =12; // 变量:自由的
  3. arr.a= 5; //属性:属于一个对象
  4. function show() //函数:自由的
  5. {
  6. alert(‘a’);
  7. }
  8. arr.fn = function() //方法:属于一个对象
  9. {
  10. alert(‘b’);
  11. }

其实方法就是函数,只不过方法是有所属的对象。

我们所熟知的,将函数绑定到 click 事件
语法:

  1. $(selector).click(function)

| 参数| 描述| 
| ------------- |:-------------:| 
| function | 可选。规定当发生 click 事件时运行的函数。 |

这种形式在jquery中经常见到。它是将function当做该方法的参数,向该方法添加一个事件处理函数。

js全局函数

全局函数与内置对象的属性或方法不是一个概念。全局函数它不属于任何一个内置对象。
JavaScript 中包含以下 7 个全局函数,用于完成一些常用的功能:

  1. escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、
  2. parseInt( )、unescape( )。

函数的几个作用

作为一个类构造器使用

  1. function Class(){}
  2. Class.prototype={};
  3. var item=new Class();

作为闭包使用

  1. (function(){
  2. //独立作用域
  3. })();

作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object)。

  1. <script type="text/javascript">
  2. function Test(){//大写,以区分普通函数
  3. this.x = 10;
  4. }
  5. var obj = new Test();
  6. alert(obj.x); //弹出 10;
  7. </script>

可以使用 new 运算符结合像 Object()Date() 和 Function() 这样的预定义的构造函数来创建对象并对其初始化。面向对象的编程其强有力的特征是定义自定义构造函数以创建脚本中使用的自定义对象的能力。创建了自定义的构造函数,这样就可以创建具有已定义属性的对象。下面是自定义函数的示例(注意 this 关键字的使用)。

  1. function Circle (xPoint, yPoint, radius) {
  2. this.x = xPoint; // 圆心的 x 坐标。
  3. this.y = yPoint; // 圆心的 y 坐标。
  4. this.r = radius; // 圆的半径。
  5. }

调用 Circle 构造函数时,给出圆心点的值和圆的半径(所有这些元素是完全定义一个独特的圆对象所必需的)。结束时 Circle 对象包含三个属性。下面是如何例示 Circle 对象。

  1. var aCircle = new Circle(5, 11, 99);

使用构造器函数的优点是,它可以根据参数来构造不同的对象。 缺点是构造时每个实例对象都会生成重复调用对象的方法,造成了内存的浪费。

  1. <script type="text/javascript">
  2. function Test(name){
  3. this.occupation = "coder";
  4. this.name = name;
  5. this.whoAreYou = function(){
  6. return "I'm " + this.name + "and I'm a " + this.occupation;
  7. }
  8. }
  9. var obj = new Test('trigkit4');//利用同一个构造器创建不同的对象
  10. var obj2 = new Test('student');
  11. obj.whoAreYou();//"I'm trigkit4 and I'm a corder"
  12. obj2.whoAreYou();//"I'm student and I'm a corder"
  13. </script>

依照惯例,我们应该将构造器函数的首字母大写,以便显著地区别于一般的函数。


以下两种形式的定义函数方式是等价的。

  1. <script type="text/javascript">
  2. var test = function(){
  3. alert("Hello World");
  4. }
  5. alert(typeof(test));//output function
  6. </script>

这里明确定义了一个变量test,他的初始值被赋予了一个function实体
<br/>

  1. <script type="text/javascript">
  2. function test(){
  3. alert("Hello World");
  4. }
  5. alert(typeof(test));//output function
  6. </script>

<br/>
看看下面这种定义式函数形式:

  1. <script type="text/javascript">
  2. function test(){
  3. alert("Hello World");
  4. };
  5. test();//居然输出Hello,很奇怪不是吗?
  6. function test(){
  7. alert("Hello");
  8. };
  9. test();//正常滴输出了Hello
  10. </script>

很显然,第一个函数并没有起到作用,很奇怪不是吗?我们知道,javascript解析引擎并不是一行一行地执行代码,而是一段一段地执行代码。在同一段程序的分析执行中,定义式的函数语句会被优先执行,所以第一个定义的代码逻辑已经被第二个覆盖了,所以两次调用相同函数,只会执行第二个。

作为值的函数

函数在js中不仅是一种语法,也是一个值。也就是说可以将函数赋值给变量,存储在对象的属性或数组的元素中,作为参数传入另一个函数中。
函数的名字实际是看不见的,它仅仅是变量的名字,这个变量指代函数对象

  1. <script type="text/javascript">
  2. function square(x,y){
  3. return x*y;
  4. }
  5. var s = square; //s和square指代同一个函数
  6. square(2,3);//6
  7. s(2,4);//8
  8. </script>

除了可以将函数赋值给变量,同样可以将函数赋值给对象的属性,当函数作为对象的属性调用时,函数就称为方法

  1. <script type="text/javascript">
  2. var obj = {square:function(x,y){ //对象直接量
  3. return x*y;
  4. }};
  5. var ect = obj.square(2,3);
  6. </script>

prototype属性

每一个函数都包含prototype属性,这个属性指向一个对象的引用,这个对象称为原型对象。
详见:javascript学习总结(五)原型和原型链

call()和apply()

apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。例如:

  1. function.apply(this,[1,2,3])

call()的第一个参数是上下文,后续是实例传入的参数序列,例如:

  1. function.call(this,1,2,3);

高阶函数

这里的高阶函数可不是高数里的那个高阶函数,所谓高阶函数就是操作函数的函数,它接收一个或多个函数作为参数,并返回新函数

参数arguments

当函数被调用时,会得到一个免费奉送的参数数组,那就是arguments数组。通过它,函数可以访问所有它被调用时传递给他的参数列表。这使得编写一个无需指定参数个数的函数成为可能。

  1. <script type="text/javascript">
  2. var sum = function(){
  3. var i ,sum =0;
  4. for(i = 0;i<arguments.length;i+=1){
  5. sum+=arguments[i];
  6. }
  7. return sum;
  8. };
  9. document.writeln(sum(4,5,23,13,35,46,-10));//116
  10. </script>

ECMAScript中的参数在内部是用一个数组来表示的,函数接收到的始终都是这个数组,而不关心数组中包含哪些参数

  1. function add(num1,num2){
  2. num = num1 + num2;
  3. return num;
  4. }
  5. var result = 12,count = 20;
  6. alert(add(result,count));//32;命名的参数只提供便利,解析器不会验证命名参数

实际上,arguments并不是一个真正的数组,它只是一个类数组的对象,它拥有一个length属性,但他缺少所有数组的方法。另外,arguments对象的长度是由传入的参数个数决定的,而不是由定义函数时的命名参数的个数决定的

函数在定义或者声明的时候,所有的参数都是形参,因此,我们可以根据实际情况来命名参数,函数也只有在被调用时才会传入实参。而每个函数在被调用时都会自动取得两个特殊变量:this

函数的递归

函数的递归,即一个函数在通过名字调用自身的情况下构成的:

通过使用argument.callee代替函数名:

  1. //arguments.callee是一个指向正在执行的函数的指针
  2. <script>
  3. function factorial(num){
  4. if(num<=1){
  5. return 1;
  6. }else{
  7. return num*arguments.callee(num-1);
  8. }
  9. }
  10. </script>

思维导图

最后附上一张前辈总结的思维导图:

JavaScript学习总结(四)function函数部分的更多相关文章

  1. javascript学习4、Function函数、伪数组arguments

    一.Function函数基础 函数:就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 1.函数的作用: 将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动. ...

  2. javascript学习第四课函数

    函数也是一种数据类型:function类型 所以函数也可当作一个数据作参数传递 三种函数的声明示例: 一般来讲,声明方式一和声明方式二比较常用,方式三比较少. 常用函数方式示例: 注意:虽然函数支持嵌 ...

  3. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  4. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  5. JavaScript:学习笔记(5)——箭头函数=>以及实践

    JavaScript:学习笔记(5)——箭头函数=>以及实践 ES6标准新增了一种新的函数:Arrow Function(箭头函数).本文参考的链接如下: MDN箭头函数:https://dev ...

  6. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  7. JavaScript学习总结(四)——this、原型链、javascript面向对象

    一.this 在JavaScript中this表示:谁调用当前函数this就指向谁,不知道调用者时this指向window. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是 ...

  8. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  9. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  10. javascript学习(二)--函数

    一.在JavaScript中,定义函数的方式如下: 1.第一种方式: function abs(x) { if (x >= 0) { return x; } else { return -x; ...

随机推荐

  1. TCP/IP通信过程

    一.参考网址 1.以太网帧格式.IP数据报格式.TCP段格式+UDP段格式 详解 2. 二.TCP的建立过程 1.例子: 192.168.22.66 telenet到192.168.22.74的tcp ...

  2. Creo 2.0 Toolkit 解锁的问题

    近期开发Creo Toolkit遇到一个问题,在自己本机开发完成后运行并无问题,但是如果拿去给别人的机子运行会报出 提示“creo ToolKit应用程序在分配到您的地址之前未被解锁”,在与PTC 技 ...

  3. 苹果浏览器移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  4. zabbix自定义邮件报警

    1.启动动作 2.设定发件人邮箱 进入QQ邮箱: 通过短信验证开启如下服务,并生成授权码: 3.配置收件人

  5. 如何在 main() 执行之前先运行其它函数

    摘要:我们知道 C++ 的全局对象的构造函数会在 main 函数之前先运行,其实在 c 语言里面很早就有啦,在 gcc 中可以使用 __attribute__ 关键字指定如下(在编译器编译的时候就绝决 ...

  6. drf二次封装response-APIViews视图家族-视图工具集-工具视图-路由组件

    视图类传递参数给序列化类 (1).在视图类中实例化 序列化对象时,可以设置context内容. (2).在序列化类中的局部钩子.全局钩子.create.update方法中,都可以用self.conte ...

  7. goweb-表单

    表单 简单的处理一个登陆界面 package main import ( "fmt" "html/template" "log" " ...

  8. HTML5中的data-*属性

    data-* 属性包括两部分: 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符: 属性值可以是任意字符串: 注释:用户代理会完全忽略前缀为 &qu ...

  9. 九、Shell脚本高级编程实战第九部

    一.监控mysql主从同步是否异常,如果异常,发送短信给管理员 1)开发一个守护进程脚本每30秒实现检测一次. 2)如果错误号是:1158.1159.1008.1007.1062,请跳过 3)请使用数 ...

  10. shell并行处理

    for i in (file1 file2 file3), do process_a $i | tee process_a $i_a.txt | process_b > $i_b.txt &am ...