函数

引入:

先问大家一个问题,大家洗过衣服吧?

手动怎么洗?那个盆,接水,放衣服,倒洗衣粉,洗,涮,拧干

挺费劲的,有没有简便的方法?

使用洗衣机,衣服放进去,倒上洗衣粉,按开关,一切就都搞定了

在生活中这样的例子有很多,大到洗衣机空调,小到水龙头剪刀。每个工具都有自己不同的功能。为了生活方便简洁,就会使用这些工具。

程序员是一群很会享受生活的群体,所以在代码中也有很多这样的工具,就是咱们今天要学习的函数。

总结:代码中工具----函数

概念:

函数就是具备某个功能的一个工具。是完成某个功能的一段代码。

大家以前有没有用过函数呀?

parseInt() alert()  这都是函数,是系统提供的,直接拿来就能用。

系统提供了很多函数,但是并不能包含所有的功能,所以有些功能需要我们自己来写----自定义函数。函数定义好以后,就可以像系统函数一样使用了,不用再重复写了。

所以经常写的代码,就写一个函数,需要的时候调一下好了。

自定义函数怎么写?

定义语法:

function函数名(){

    代码段

}

# function是一个关键字,函数名自定义,定义规则和变量的定义规则相同

当我们定义好函数,并在页面中刷新的时候,会发现这段代码并没有被执行。因为函数定义好后,是不会自动执行的,需要我们进行调用。

函数的调用:

语法:

    函数名()

调用的语法很简单,这样我们以后还需要执行函数中的代码的时候,就不用再重写那么多的代码了,只需要简单的将原来定义好的函数进行调用即可。

// 定义函数:求两个数的和

functionfn(){

vara=1;

varb=2;

varc=a+b;

console.log(c);

}

// 函数定义好以后,不会自动执行,需要手动调用

fn();

函数的优点:

实现了代码的可重用性

实现了模块化编程

我们在使用工具的时候,很多工具需要我们带东西进去,比如洗衣服要放衣服进去,用函数这个工具来说的话,就是需要带参数。

带参数的函数:

函数代码中会发生改变的值用变量来代替,入口是声明函数时的小括号

functionzizeng(a){// 叫做形参 - 形式上的参数

varb=a+1;

console.log(b);

}

调用函数的时候,需要给参数赋值

zizeng(1);// 实参 - 实际上的参数,实参其实就是给形参赋值

获取函数的实参

函数中还有一个关键字arguments可以获取到所有的实参

functioncss(){

    // 打印实参

    console.log(arguments);

    // 打印实参的个数

    console.log(arguments.length);

}

css("width","100px");

效果:

获取实参和个数

如果有形参的话,也是一样的,通过下标取到其中的每一个值

匿名函数(赋值式的函数)

概念:顾名思义,匿名函数就是没有名字的函数。

定义:

语法:

    function(){

       代码段

    }

当然匿名函数也可以传递参数。

调用:匿名函数的调用是在定义的时候调用

语法:

    (function(形参){

       代码段

    })(实参)

很简单,就是在大括号后面加小括号就是调用。

(function(a,b){

varc=a+b;

document.write(c);

})(1,2);

也可以将匿名函数赋值给变量,调用的时候使用变量名来调用。

语法:

# 定义

    var fun=function(){

       代码段

    }

# 调用

    fun()

例:

varfun=function(a,b){

varc=a+b;

document.write(c);

}

fun(1,2);

通过事件来调用匿名函数

<style>

#myid{

    width:200px;

    height:200px;

    background:#f00;

}

</style>

<body>

    <divid="myid"></div>

</body>

<script>

varoDiv=document.getElementById("myid");

oDiv.onclick=function(){

    alert(123);

}

</script>

变量的声明提升

浏览器中有一段程序专门用来解析js代码, 叫做js解析器。js解析器在执行js代码的时候,分两步进行:

预解析js代码

预解析的过程,就是查找代码中的var和function这两个关键字,找到以后,将变量和函数存到了一个地方,就叫仓库吧,并给他们赋一个初始值,变量的初始值为undefined,函数的初始值为代码段。

开始按顺序一行一行解读代码

解读代码的时候,仓库中的变量和函数的值会随着代码的解读而发生变化,也就是变量的赋值和函数的调用。

预解析分为变量的预解析和函数的预解析,也就是代码在执行之前先进行解析,将变量和函数的声名放在当前作用域的最前面。

console.log(a);// 因为变量a没有声名过,所以会报错

test();// 函数未定义,所以报错

但是在打印之后声名过变量的话,情况就不一样了。

// 变量预解析

console.log(a);// 因为变量a在执行之前进行了预解析,也就是已经放到内存中了,只是没有值,所以是undefined

vara=1;

/* 预解析相当于下面的过程 */

vara;// 将变量的声名放到当前作用域的最前面

console.log(a);

a=1;

// 函数预解析

test();// 结果:123   代码在执行之前经过预解析,将函数的内容放到了内存了,所以在下面的定义函数也能调用执行

functiontest(){

    console.log(123);

}

/* 预解析过程如下: */

functiontest(){// 将函数声名放到当前作用域的最前面

    console.log(123);

}

test();

案例:

// 1.匿名函数赋值给变量

fn();

varfn=function(){

console.log(123);

}

// 2.函数内部的变量预解析

functiontest(){

console.log(a);

vara=10;

}

test();

总结:

用var关键字声名的变量,将变量的声名提升到当前作用域的最前面,赋值不提升

自定义的函数整体提升到当前作用域的最前面

函数同名,后面的会覆盖前面的

变量和函数同名,函数优先提升

面试题:

//1.

varnum=10;

fn1();

functionfn1() {

console.log(num);

varnum=20;

}

//2.

vara=18;

fn2();

functionfn2() {

varb=9;

console.log(a);

console.log(b);

}

//3.

fn3();

console.log(c);

console.log(b);

console.log(a);

functionfn3() {

vara=b=c=9;

console.log(a);

console.log(b);

console.log(c);

}

//4. 思考题

vara=4;

console.log(a);

a=6;

console.log(a);

functiona() {

console.log('哈');

}

a();

a=10;

console.log(a);

形参和实参

声明函数时候带进去的那个参数叫形参

调用函数的时候给形参进行赋值的实际值是实参

不是所有的程序的结果都需要输出在页面中,有时候,我们只是想让这一段代码得出一个结果,后续代码得到这个结果后进行后续处理。那么上面的函数显然已经不适用了。我们需要使用函数的返回。

带返回值的函数

语法:

    function函数名(){

       return 返回的结果

    }

将结果返回的关键字是return,这样可以将函数运算的结果返回给调用者

// 定义一个让指定数字递增的函数

functionincrease(x){// 带有参数的函数

    vary=x+1;

    returny

}

// 让2递增,得到结果赋值给变量3

vara=increase(2);

document.write(a%2);// 1

// 让5递增,得到结果赋值给变量b

varb=increase(5);

alert(b/2);// 3

// 让10递增,得到结果赋值给变量c

varc=increase(10);

console.log(c+a-b);// 8

带有返回值的函数,当调用函数的时候得到一个结果,这个结果可以参加运算,也可以进行赋值。

带有返回值的函数,当函数执行到return关键字的时候,函数就终止了,在return后面的代码不会运行。

// 定义一个让指定数字递增的函数

functionincrease(x){// 带有参数的函数

    vary=x+1;

    returny

// 下面的代码不会被执行

    y+=2;

    alert(y);

}

// 让2递增,得到结果赋值给变量3

vara=increase(2);

document.write(a);

return的作用:

终止代码继续运行

在函数中返回一个内容

函数的嵌套

函数的嵌套就是在函数中调用函数:

// 求数组中所有元素的平均数

/*

分析:

    1.先求和

    2.再求平均数

*/

// 求和函数

functionsum1(arr) {

    vars=0;

    for(variinarr){

        s+=arr[i];

    }

    returns;

}

// 求平均数函数

functionavg1(arr) {

    varsum=sum1(arr);

    varlength=arr.length;

    vara=sum/length;

    returna;

}

// 调用

vararr=[1,6,9,7,2];

varavg=avg1(arr);

console.log(avg);

函数的调试

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

推荐阅读更多精彩内容