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 相关文章推荐
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
Nuxt.js实战详解
Jan 18 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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函数指定默认值方法的小例子
2013/12/04 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
vue接口请求加密实例
2020/08/11 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
.net C#面试题
2012/08/28 面试题
租房合同协议书
2014/04/09 职场文书
企业精神口号
2014/06/11 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python