javascript学习笔记(四)function函数部分


Posted in Javascript onSeptember 30, 2014

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
Jscript 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的。

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

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

函数的调用方式

1、普通调用:functionName(实际参数...)

2、通过指向函数的变量去调用:

var  myVar = 函数名;

myVar(实际参数...);

返回函数的函数

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

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

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

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

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

<script type="text/javascript">

    var box = function(){

        var a=1;

        return function(){

            alert(a++)

        }

    }

    alert(box());//弹出"function(){alert(a++)}"

 </script>

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

<script type="text/javascript">

    var box = function(){

        var a=1;

        return function(){

            alert(++a)

        }

    }

    var newFunc = box();

    newFunc();//2

 </script>

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

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

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

(1)值类型:数值、布尔值、null、undefined。
(2)引用类型:对象、数组、函数。

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

function(){

return ‘Lee';     //单独的匿名函数是无法运行的,就算能运行也无法调用,因为没有名字

}

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

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

//通过自我执行来执行匿名函数
<script type="text/javascript">

  (function (){         // (匿名函数)();第一圆括号放匿名函数,第二个圆括号执行

       alert('Lee');

  })();

</script>

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

//把匿名函数自我执行的返回值赋给变量
    <script type="text/javascript">

    var box =  (function (){           

           alert('Lee');

      })();         //弹出”Lee”;

    alert(box);   //弹出 undefined,如果写出alert(box()),那么只会弹出一个"Lee"   

    </script>

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

//自我执行匿名函数的传参
    <script type="text/javascript">

    (function (age){

     alert(age);

    })(100);          //弹出100

    </script>

javascript创建动态函数:

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

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

    <script type="text/javascript">

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

             alert("square(2,3)的结果是:"+square(2,3));  //square(2,3)的结果是:5

    </script>

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

这段代码:

var square = new Function ("x","y","var sum ; sum = x+y;return sum;");
和下面这段代码:

function square (x,y){

          var sum;

          sum = x+y;

          return sum;

     }

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

回调函数

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

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

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

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

<script type="text/javascript">

        $("div").show(1000,function(){

            //callback function

        });

</script>

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

<script type="text/javascript">

    $("div").show(1000,function(){

        console.log("hello world")

    });

</script>

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

方法和函数的区别

var arr = [1,2,3,4,5]

var a =12;   // 变量:自由的

arr.a= 5;     //属性:属于一个对象

function show()     //函数:自由的

{

     alert(‘a');

}

arr.fn = function()   //方法:属于一个对象

{

     alert(‘b');

}

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

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

$(selector).click(function)
参数 描述
function 可选。规定当发生 click 事件时运行的函数。
这种形式在jquery中经常见到。它是将function当做该方法的参数,向该方法添加一个事件处理函数。

js全局函数

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

escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、
parseInt( )、unescape( )。
函数的几个作用

作为一个类构造器使用

function class(){}

class.prototype={};

var item=new class();

作为闭包使用

(function(){

//独立作用域

})();

作为构造函数调用

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

<script type="text/javascript"> 

        function test(){

            this.x = 10;

        }
        var obj = new test();

        alert(obj.x); //弹出 10;

 </script>

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

function Circle (xPoint, yPoint, radius) {

    this.x = xPoint;  // 圆心的 x 坐标。

    this.y = yPoint;  // 圆心的 y 坐标。

    this.r = radius;  // 圆的半径。

}

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

var aCircle = new Circle(5, 11, 99);
使用构造器函数的好处在于,它可以再创建对象时接收一些参数。

<script type="text/javascript">

    function Test(name){

        this.occupation = "coder";

        this.name = name;

        this.whoAreYou = function(){

            return "I'm " + this.name + "and I'm a " + this.occupation;

        }

    }

    var obj = new Test('trigkit4');//利用同一个构造器创建不同的对象

    var obj2 = new Test('student');
    obj.whoAreYou();//"I'm trigkit4 and I'm a corder"

    obj2.whoAreYou();//"I'm student and I'm a corder"    

 </script>

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

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

<script type="text/javascript">

    var test = function(){

        alert("Hello World");

    }

    alert(typeof(test));//output function

</script>

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

<script type="text/javascript">

    function test(){

        alert("Hello World");

    }

    alert(typeof(test));//output function

</script>

看看下面这种定义式函数形式:

<script type="text/javascript">

        function test(){

            alert("Hello World");

        };

        test();//居然输出Hello,很奇怪不是吗?
        function test(){

            alert("Hello");

        };

        test();//正常滴输出了Hello

</script>

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

作为值的函数

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

<script type="text/javascript">

     function square(x,y){

         return x*y;

     }

     var s = square; //s和square指代同一个函数

     square(2,3);//6

     s(2,4);//8

</script>

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

<script type="text/javascript">

     var obj = {square:function(x,y){ //对象直接量

         return x*y;

     }};

     var ect = obj.square(2,3);

</script>

prototype属性

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

高阶函数

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

Javascript 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
javascript实现行拖动的方法
May 27 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 #Javascript
让人蛋疼的JavaScript语法特性
Sep 30 #Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 #Javascript
javascript学习笔记(一)基础知识
Sep 30 #Javascript
js使用循环清空某个div中的input标签值
Sep 29 #Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 #Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 #Javascript
You might like
php Memcache 中实现消息队列
2009/11/24 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php全排列递归算法代码
2012/10/09 PHP
浅谈php自定义错误日志
2015/02/13 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
javascript动态加载三
2012/08/22 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
javascript this详细介绍
2016/09/19 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python装饰器原理与用法分析
2018/04/30 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
大学生自我鉴定范文
2013/12/28 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
欢迎领导检查标语
2014/06/27 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
委托公证书格式
2015/01/26 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
大学学生会竞选稿
2015/11/19 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript