七、JavaScript函数(function)

函数就是包裹在大括号中的代码块,前面使用了关键词 function:

一、函数的声明

函数的声明

我们声明一个求数字立方的函数,函数在定义之后,并不会执行里面的内容,只有在函数进行调用的时候,才会执行。

    // 定义一个求一个数字的立方的函数,并调用
    function cube(a) {
        return a * a * a;
    }
    var res = cube(3);

1、函数表达式

函数表达式,即用变量保存匿名函数。上面的式子就是一个函数表达式,其中从function后面一直到反大括号包裹的内容称为函数体,cube被称之为函数名,a就是函数的参数,return后面的内容称之为返回值。我们只要调用上面的函数就可以求出任何一个数的立方。

二、函数的参数和返回值

1、函数的参数。

观察上面的函数表达式我们会发现函数名括号内有一个a,这个a就是称之为函数的参数。参数类型分为两种:一种叫显示参数也叫形参,是我们在定义的时候写的参数,如上面的a即为形参;另一种叫隐藏参数也叫实参,是函数在调用的时候用的值,如上面函数调用时函数名后面括号内的3即为实参。
函数的参数一般写在函数名后面的小括号内,如果不写参数默认是undefined,函数的参数可以是一个,也可以是多个,当我们不知道到底有多少个参数的时候可以使用arguments 关键字,它表示函数中所有参数组成的数组。

2、函数的返回值(return)。

另外我们查看上面的函数表达使会发现有一个return关键字后面跟着a ×a × a,这就是函数的返回值。我们将参数a传入函数内,再返回三个a的乘积,函数调用时我们就可以通过参数返回我们想要的结果。所以有时,我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时,return 语句后的代码都不会被执行,并返回指定的值。函数调用将被返回值取代,当然也不是所有的函数都需要返回值,我们可以根据需求选择是否添加返回值。

    function fun(a) {
        console.log(a);
    }
    fun('我是一个没有返回值的函数')

    // 函数有多个参数
    function func5(a, b) {
        var res = a + b;
        return res;
    }
    var res3 = func5(12, 34);
    console.log(res3);

    // 函数内部使用 arguments 关键字
    function func6() {
        // 求出所有参数的和,并返回
        var res = 0;
        for (var i = 0; i < arguments.length; i++) {
            res += arguments[i];
        }
        return res;
    }
    console.log(func6(1, 2, 3, 4, 5, 6));
代码执行效果

三、函数的调用

1、函数的调用方式

声明函数后如果没有调用,函数表达式里面的代码是不会执行的函数的调用有两种方法:一种是直接编写函数名后面紧跟小括号,如上面我们求立方的函数我们只用这么写cube(3),即可调用求出3的立方;第二种是直接调用也叫自调用函数,其语法就是写两个小括号,我们把函数写在第一个小括号内,函数运行时它会直接运行函数里面的代码。

    (function () {
        console.log('我是一个自调用函数');
    })();


    (function test() {
        console.log('我是另外一个自调用函数');
    })();

    // 自调用函数特点:函数自己执行,不需要进行调用


    // 自调用函数,如果有参数会怎么样?
    (function (a, b) {
        console.log(a, b);
    })(12, 35);
代码执行效果

2、匿名函数

上面的函数就是一个自调用函数,我们会发现上面的函数没有函数名,像这种函数就被称之为匿名函数,我们当然也可以给他加上函数名,但是这并没有什么卵用。注意给它的参数不是写在function后面的小括号内,而是写在函数体后面的小括号中。

3、函数的调用顺序

我们在声明变量的时候会在变量前面加一个var关键字,我们在声明函数的时候也可以声明一个变量来接收函数表达式。我们都知道变量在声明之前调用会报错显示undefined,如果函数在声明之前调用会不会报错呢,我们可以看以下代码:

    fun(10)
    function fun(a) {
        console.log(a);
    }

    add(2,4);
    var add = function (a, b) {
        return console.log(a+b);
    }

代码执行效果
    fun(10)
    function fun(a) {
        console.log(a);
    }


    var add = function (a, b) {
        return console.log(a+b);
    }
    add(2,4);

Paste_Image.png

从上面的代码我们可以看出,当我们用变量接收函数表达式的时候只能在函数声明后调用;当我们不用变量接收函数表达式的时候,即使是在函数声明之前我们也可以调用,一定要注意二者之间的区别。

四、函数的封装和闭包

JavaScript允许在函数内部嵌套函数---即函数定义和函数表达 式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包,闭包主要就是防止变量污染,下面这段代码就是一个简单的闭包。

    var add = (function(){
        var count = 0;
        return function () {
            count ++;
            console.log(count);
        }
    })()
    add();

函数封装就是将一段实现同一个效果的代码放在一个函数表达式内,这样方便多次调用也可以防止变量污染,比如我们想要取一定范围内的随机数,就可以封装一个函数,代码如下:

     //封装涵数获取随机数
    function random (min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }


    // 封装函数求出圆的面积
    function circleArea(r) {
        return Math.PI * r * r;
    }
    console.log(circleArea(10));

五、浏览器嗅探

可以获取浏览器内核、浏览器、操作系统版本等信息。

  • window.navigator.userAgent

以上内容纯属个人理解,由于水平有限,若有错漏之处敬请指出斧正,小弟不胜感激。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,527评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,314评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,535评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,006评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,961评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,220评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,664评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,351评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,481评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,123评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,713评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2 341

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • 一场春雨细细碎碎洒下,青石板上叮咚的雨声在女子耳边萦绕不绝。一把油纸伞,游曳在雨中。伞下的佳人并未浓妆淡抹,只是一...
    冬苡沫阅读 222评论 0 1
  • 今年我决定辞职所有的工作来一场毕业旅行 忙完最后一单 拉起我的行李箱 出发半月回归 我特别爱旅行 这是我最大的爱好...
    LIU花花阅读 260评论 0 3
  • 已经好长时间没有上《简书》了,我不想解释什么,也不必解释什么,不过还得感谢勃君,虽然我7月的表现,令勃君很是失望,...
    黑莓可爱多阅读 152评论 0 0
  • 好奇害死的不仅仅是猫,比猫的好奇心强的是猿类和猴类,而人类的好奇心比别的动物要强烈的多。好奇心给人带来这么大的危险...
    RIARONG阅读 575评论 0 4