博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS中的函数浅析
阅读量:4692 次
发布时间:2019-06-09

本文共 2960 字,大约阅读时间需要 9 分钟。

函数的定义

函数声明函数表达式两种

函数声明

使用function关键字,基本格式如:

function  函数名称(可选参数1,可选参数2,可选参数3,){}复制代码

函数定义完之后,并不会自动执行,需要调用才可以执行函数中的代码

函数的调用很简单:函数名(参数),核心就是小括号,如图:

一些细节:

  • 定义函数,需要关键字function,关键字之后和函数名需要空格;
  • 函数名称,和定义变量时规则是一样的,如下: 大小写区分的,在定义普通函数(目前所学的阶段),首字母使用小写,如果有多个单词,仍然遵循小驼峰命名法则;
  • 函数名不要以数字开头,可以使用一些特殊符号,如下划线;
  • 函数名称后面是小括号,必不可少,用来装载形式参数的;
  • {}就是函数体,不能少;

函数表达式

细节:

  • 将function整体,放在赋值运算符的右边,作为表达式来使用。
  • 通过一个变量来引用当前的function,便于后续的调用。
  • 函数名称可以加上,但是只对函数内部起作用,如图:

函数的调用及返回值

关于函数调用,只需要使用小括号就可以了。

关于函数返回值

实际上,在js开发中,我们调用一个函数,往往是需要通过它的处理,得到一个具体的结果。

如果是我们自己定义的函数呢?

此时,我们需要显式的返回一个值。使用return 关键字即可。

对于没有使用return的时候,我们可以这么理解,在一个函数当中,最后一定会有一个return 语句,默认的是
return undefined

函数要返回多个值,可以把多个值放到一个容器中,例如:数组   对象。

return 只能出现在函数中,不要写到函数外面去了 。

函数参数

在定义函数和调用函数时,涉及到两种参数:

  • 形式参数,简称为形参,在定义的时候指定的参数,表示要传入什么样的值;

  • 实际参数,简称为实参,在调用的时候出入的实际参数,具体的某个值;

    参数的传递:

  • 基本数据类型的数据(值传递)

    就是把栈区的数据copy一份给了形参,形参和实参是一个独立一个内存空间。改变形参,实参是没有影响。

  • 引用数据类型的数据(引用传递)

    就是把栈栈区的地址copy一份给了形参,形参和实参同时指向堆区同一个内存空间。 通过形参改变堆区内存空间的数据,实参这个地址应对的数据也会发生改变。

    基本数据类型

引用数据类型

例:

let a = [1];    function f(a){        a[100] = 3;        a = [1,2,3];    }    f(a);    console.log(a); 复制代码

解析:

,注意:调用处的a和
function f(a)中的a 是不同的,一个是实参,一个是形参;而在函数内部的
a[100] = 3,是把实参a的第101个位置给3,
a = [1,2,3] 是把数据[1,2,3]赋值给形参a。 输出:

函数是另一个函数的参数

第一种写法

function add(x,y){ return x + y;}
function sub(x,y){ return x- y;}function compute(f,a1,a2){ return f(a1,a2);}var rs = compute(add,1,2);console.log(rs);var rs = compute(sub,1,2);console.log(rs);复制代码

分析:首先定义了两个函数,分别计算两个数的和与差;

compute(add,1,2)是函数的调用处,add是实参,只不过这个实参是一个函数,1,2也是实参;

然后分别把实参传给形参compute(f,a1,a2)中的f,a1,a2;因为f此时是一个函数,所以会返回return f(a1,a2),
然后再把a1,a2的值传递给x,y;然后执行函数,return x + y(这时可以当做3),把3返回给f(a1,a2)(3);
最后f(a1,a2)返回到函数调用处compute(add,1,2),打印出数值。

第二种写法

这是函数表达式写法

let add = function(x,y){            return x + y;        }        let sub = function(x,y){            return x - y;        }         function compute(f,a1,a2){            return f(a1,a2);        }        console.log(compute(add,1,2));        console.log(compute(sub,1,2));复制代码

第三种写法,也是最常用的写法

function compute(f,a1,a2){        return f(a1,a2);    }      let rs = compute(function(x,y){        return x + y;    },1,2);    console.log(rs); 复制代码

Arguments对象

arguments 是一个类似数组的对象, 对应于传递给函数的参数。

函数调用的过程就是实参向形参赋值的过程。实参会复制一份给形参。除了复制一份给形参外,它会给arguments一份。arguments中收集了实参。 arguments只是函数内部的属性(类数组), 在函数外面是不能访问的。arguments和形参这间有一一对应的关系:    当形参改变了,那么arguments里面的数据也会改变    当改变了arguments里面的数据,形参也会发生改变什么时候使用形参,什么时候使用arguments?    1,当实参非常多时,写一堆的形参来接收,不方便,此时你就可以使用arguments    2,当实参有特殊含义时,需要有一个特殊的标识,就可以使用形参来标识。复制代码

箭头函数

作用:简化函数的定义,让我们写函数时更加的方便,快捷。

function f(a,b){    return a + b;}复制代码

可以简写为:

let f = (a,b)=>{    return a + b;}复制代码

特点

1.去掉function关键字,用=>来代替,

2. 如果形参只有一个,()可不写 只有一个形参时,()才能省,其它情况都不省;

let f = (a)=>{         console.log(a)     }可以改写为: let f = a=>{         console.log(a)     }     f(2)复制代码
  1. 如果函数体只有一条语句,{}也可以省,return也需要省。
let f = (a)=>{         return a;     }可以改写为:let f = (a)=>a;     console.log(f(2))复制代码

转载于:https://juejin.im/post/5d306daae51d45775c73dd97

你可能感兴趣的文章
ASP.NET MVC 4中的单页面应用程序
查看>>
嵌入式数据库Perst
查看>>
JAVA 学习笔记
查看>>
使用NPOI插件读取excel模版修改数据后保存到新目录新文件中
查看>>
zookeeper安装配置
查看>>
python获得当前工作目录和修改
查看>>
StreamWrite类
查看>>
WPF的组成架构
查看>>
scrapy--json(喜马拉雅Fm)
查看>>
01: RestfulAPI与HTTP
查看>>
实例在线测试
查看>>
软件工程理论、方法与实践(第四章)
查看>>
站立会议总结02
查看>>
关于负数求余数的问题
查看>>
基础:获得servletAPI
查看>>
LeetCode -- Bulls and Cows
查看>>
Bootstrap之图片展示界面Demo
查看>>
nodeJs实现微信小程序的图片上传
查看>>
Android 后台每10秒钟启动一次应用的demo,一次启动,永不退出
查看>>
堆栈的区别
查看>>