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 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
JS截取字符串实例详解
Nov 24 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
js 用于检测类数组对象的函数方法
May 02 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
JavaScript 九种跨域方式实现原理
Feb 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下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
php对数组排序代码分享
2014/02/24 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP 裁剪图片
2021/03/09 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
解决Python对齐文本字符串问题
2019/08/28 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
圣诞节红领巾广播稿
2014/02/03 职场文书
七一活动主持词
2015/06/29 职场文书
大学生创业计划书
2019/06/24 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
python获取淘宝服务器时间的代码示例
2021/04/22 Python
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技