JavaScript的function函数详细介绍


Posted in Javascript onNovember 20, 2021

通过函数来封装任意多条语句,而且可以在任何地方、任何时间调用执行。

而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的。返回值return,我就不过多描述,他是和 C语言通的,如果没写他就会自动返回undefined

function fun(x,y){
            
        }
//写成这样就可以声明一个函数

以我的理解他就是以对象的形式来传入参数,通过对象的各项属性值(引用类型的值),来作为我的实际参数,

例如我有以下做法:

function fun(x, y) {
          //  alert("x的值是" + x.value);
            alert("x的值是" + x);
        }

当我是这种操作的时候,他的弹出框报错是:x的值是[object HTMLInputElement],以对象的形式传入的它是不符合我的逻辑设计的,应该是下面的这种做法。

返回我的x的value值。

function fun(x, y) {
            alert("x的值是" + x.value);
          //  alert("x的值是" + x);
        }
  • 所以当我设计一个简单的,两个整数数字相乘,返回值。
  • 这里就要特别记忆一下<form></form> 要把输入的这一段html代码写在这个标签里。不然你将会找好半天错误(别问我怎么知道的,说多了都是泪)

JavaScript的function函数详细介绍

咋们是深度理解,先别急,再看看这段代码:

JavaScript的function函数详细介绍

是不是着这里有着不一样的发现,照以前的这个函数写法,铁定是在乱写,是不是?但是他在这里是能运行的,笑死(开心的笑)

JavaScript的function函数详细介绍

也就是说ECMAScript函数不介意传进来多少个参数,也不在乎你传进来个神马参数,解析器永远都不会有任何怨言。(太爽了,老师再也不用担心我不会传参了),那他是如何解决这个“世纪难题 ”的呢,其实在每个函数体内,都有一个arguments对象来访问这个参数数组,从而获取传递给数组的每一个参数。

道友试试给下面代码fun函数用双引号fun(“勇敢”,“牛牛”),会发生什么现象,解释一下就是上引号就近配对,呜呜呜呜

哎,这和咱们学的java函数重载是不是有点那味道了呀,其实JavaScript是没有重载滴。

再看两个例子:

JavaScript的function函数详细介绍

function fun() {
    if (arguments.length == 1) {
        alert(arguments[0] + 10);

    }
    if (arguments.length == 2) {
        alert(arguments[0] + arguments[1]);
    }
}
fun(10);//20
fun(10,20);//30

也只能通过传入参数的个数上,实现适当的功能,并不是实现真正意义上的重载,虽然特性算不上完美的重载,但是也足够弥补JavaScript的这一遗憾。arguments也可以与参数与一起使用,

如下:

function fun(num1, num2) {
    if (arguments.length == 1) {
        alert(num1 + 10);

    }
    if (arguments.length == 2) {
        alert(arguments[0] + num2);
    }

}
fun(10);//20
fun(10, 20);//30

那么就有宝问了,参数反正都是赋值在arguments对象中,那么我直接修改 arguments[i] 值是否可行呢?

  • 那有意思的是,关于arguments行为,它的值永远与对应的命名参数值保持同步,他会修改当下函数内的值!!!,也就是说参数与arguments[i]内存空间时独立的,但是值会同步。
function fun(num1, num2) {
    arguments[1] = 10;
    alert(arguments[0] + num2);
}

</script>
<form>
 <br><input type="button" onclick="fun(10,20)" value="点击">
</form>

他弹出框的值就是20;可见是修改arguments[i]值,会自动反应到这个参数当中,要是没有这个参数,重写这个参数值,将会导致语法错误。代码不会执行。如果有两个相同的函数名他不会报错,但是该名字只属于后定义的函数。

总结:

  • JavaScript函数与其他语言函数有很多细节之处不同。
  • 无需非得要返回值,因为在任何时候他都可以返回任何值
  • arguments.length长度由传入参数的个数确定,而不是定义时函数的命名数决定。
  • 是没有重载的,即参数是可以0个或者多个的的数组形式参与的,并且通过arguments对象来访问这些参数。

到此这篇关于JavaScriptfunction函数详细介绍的文章就介绍到这了,更多相关JavaScript的function函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
JavaScript文档对象模型DOM
Nov 20 #Javascript
四十九个javascript小知识实用技巧
Nov 20 #Javascript
js不常见操作运算符总结
Nov 20 #Javascript
javascript的setTimeout()使用方法总结
Nov 20 #Javascript
JavaScript异步操作中串行和并行
Nov 20 #Javascript
vue中 this.$set的使用详解
如何用vue实现网页截图你知道吗
You might like
全文搜索和替换
2006/10/09 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python类定义的讲解
2013/11/01 Python
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
中间件分为哪几类
2012/03/14 面试题
经销商订货会主持词
2014/03/27 职场文书
老人祝寿主持词
2014/03/28 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书