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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 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
生成缩略图
2006/10/09 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php读取3389的脚本
2014/05/06 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
JS与框架页的操作代码
2010/01/17 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
Python完全新手教程
2007/02/08 Python
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python对List中的元素排序的方法
2018/04/01 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
详解python-图像处理(映射变换)
2019/03/22 Python
Python常用特殊方法实例总结
2019/03/22 Python
django框架使用方法详解
2019/07/18 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
争论的故事教学反思
2014/02/06 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android