JavaScript的function函数详细介绍

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

而我们的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代码写在这个标签里。不然你将会找好半天错误（别问我怎么知道的，说多了都是泪）

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

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

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

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

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

再看两个例子：

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对象来访问这些参数。

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

赞 (0)

相关推荐

  • javascript function(函数类型)使用与注意事项小结

    本文实例讲述了javascript function(函数类型)使用与注意事项.分享给大家供大家参考,具体如下: 在ECMAScript中,Function(函数)类型实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象的指针. 学习要点: 1.函数的声明方式 2.作为值的函数 3.函数的内部属性 4.函数属性和方法 一．函数的声明方式 1.普通的函数声明 function box(num1, num2

  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法.分享给大家供大家参考,具体如下: 箭头函数在 JavaScript 里面,是 ES6(ES2015)才加入进来的.因为函数里有个像箭头一样的符号:=>,所以叫箭头函数,英文经常也会称为 Fat arrow functions,胖乎乎的箭头函数.这种函数也称为 lambda 表达式.箭头函数不能当作构造函数使用. 语法 一个箭头函数看起来像这样: const

  • JS中注入eval, Function等系统函数截获动态代码

    现在很多网站都上了各种前端反爬手段,无论手段如何,最重要的是要把包含反爬手段的前端javascript代码加密隐藏起来,然后在运行时实时解密动态执行. 动态执行js代码无非两种方法,即eval和Function.那么,不管网站加密代码写的多牛,我们只要将这两个方法hook住,即可获取到解密后的可执行js代码. 注意,有些网站会检测eval和Function这两个方法是否原生,因此需要一些小花招来忽悠过去. 挂钩代码 首先是eval的挂钩代码: (function() { if (window._

  • 说说Vue.js中的functional函数化组件的使用

    说说Vue.js中的functional函数化组件的使用

    Vue.js 组件提供了一个 functional  开关,设置为 true 后,就可以让组件变为无状态.无实例的函数化组件.因为只是函数,所以渲染的开销相对来说,较小. 函数化的组件中的 Render 函数,提供了第二个参数 context 作为上下文,data.props.slots.children 以及 parent 都可以通过 context 来访问. 1 示例 这里,我们用  functional 函数化组件来实现一个智能组件. html: <div id="app"

  • JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)组合函数(Composition)用法.分享给大家供大家参考,具体如下: 组合(Composition)函数,就是把两个或以上的函数组合到一块儿,整成一个新的函数.我找到了一个很好的例子,很好地解释了组合函数这个概念. 比如一个应用主要是记录一下日常的花销(expenses),应用里的数据看起来像这样: const expenses = [ { name: '租金', price: 3000, type:

  • JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法.分享给大家供大家参考,具体如下: 高阶函数(higher-order functions),就是返回其它函数的函数,或者使用其它函数作为它的参数的函数. 使用函数作为参数 因为函数本身就是一个值,所以可以让函数作为参数传递给其它的函数.JavaScript 有些函数就需要用到函数类型的参数,比如 Array.map. 比如我有一组数据: con

  • JavaScript函数式编程(Functional Programming)纯函数用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)纯函数用法.分享给大家供大家参考,具体如下: 函数式编程鼓励我们多创建纯函数(pure functions),纯函数只依赖你交给它的东西,不使用任何函数以外的东西,也不会影响到函数以外的东西.跟纯函数对应的就是不纯函数(impure functions),也就是不纯函数可能会使用函数以外的东西,比如使用了一个全局变量.也可能会影响到函数以外的东西,比如改变了一个全局变量的值. 多使用纯属函数是因为它更可靠

  • JavaScript函数式编程(Functional Programming)声明式与命令式实例分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)声明式与命令式.分享给大家供大家参考,具体如下: 函数式编程属于声明式编程(declarative programming)的范畴,经常跟声明式编程一块儿讨论的是命令式编程(imperative programming),因为它们是两种不太一样的风格. 命令式编程一般就是说清楚具体要怎么样得到一个结果:先这样做,再这样做,然后再这样,如果这样,就这样做 - 声明式编程就是声明(说明)一下你想得到的结果是什

  • JavaScript的function函数详细介绍

    JavaScript的function函数详细介绍

    通过函数来封装任意多条语句,而且可以在任何地方.任何时间调用执行. 而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的.返回值return,我就不过多描述,他是和 C语言通的,如果没写他就会自动返回undefined function fun(x,y){ } //写成这样就可以声明一个函数 以我的理解他就是以对象的形式来传入参数,通过对象的各项属性值(引用类型的值),来作为我的实际参数, 例如我有以下做法: function fun(x, y) { //

  • JavaScript可迭代对象详细介绍

    目录 1.迭代器 2.迭代器接口与可迭代对象 3.自定义可迭代对象 3.1.可迭代的Range对象 3.2.使用Generator函数作为迭代器接口 3.3.可迭代的List 3.3.可迭代的迭代器 4.可迭代对象的意义 5.使用可迭代对象 6.后记 1.迭代器 迭代器是借鉴C++等语言的概念,迭代器的原理就像指针一样,它指向数据集合中的某个元素,你可以获取它指向的元素,也可以移动它以获取其它元素.迭代器类似于数组中下标的拓展,各种数据结构,如链表(List).集合(Set).映射(Map)都有

  • MySQL之存储函数详细介绍

    目录 1.创建存储函数 2 .调用存储函数 3.删除存储函数 4.查看存储过程 5.修改存储函数 6.对比存储函数和存储过程 7.练习题加强 1.创建存储函数 语法格式: CREATE FUNCTION 函数名(参数名 参数类型,...) RETURNS 返回值类型 BEGIN 函数体 #函数体中肯定有 RETURN 语句 END 说明: 参数列表: FUNCTION中总是默认为IN参数 RETURNS 后的语句表示函数返回数据的类型: RETURNS子句只能对FUNCTION做指定,对函数而言

  • JavaScript可视化与Echarts详细介绍

    JavaScript可视化与Echarts详细介绍

    目录 一.可视化介绍 二.可视化库介绍 三.Echarts Echarts引入和使用 了解基础配置 一.可视化介绍 可视化:将数据用图表展示出来,让数据更加直观.让数据特点更加突出 应用场景:营销数据.生产数据.用户数据 二.可视化库介绍 常见的数据可视化库: D3.js:目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js:百度出品的一个开源 Javascript 数据可视化库 Highcharts.js:国外的前端数据可视化库,非商用免费,被许多国外

  • Python 循环函数详细介绍

    目录 一.循环函数 1.for循环 2.while循环 3.中断循环 二.循环设计 1.range() 2.enumerate() 3.zip() 三.循环对象 1.什么是循环对象 2.迭代器 3.生成器 4.表推导 一.循环函数 1.for循环 for循环需要预先设定好循环的次数(n),然后执行隶属于for的语句n次. 基本构造是 for 元素 in 序列: statement 举例来说,我们编辑一个叫forDemo.py的文件 for a in [3,4.4,'life']: print a

  • C++11中bind绑定器和function函数对象介绍

    C++11中bind绑定器和function函数对象介绍

    目录 一. bind1st和bind2nd 1.C++ STL中的绑定器 2.bind1st和bind2nd的底层原理实现 二. 模板的完全特例化和非完全特例化 三. function函数对象 四. bind和function实现线程池 五. lambda表达式 1.lambda表达式的实现原理 2.lambda表达式的应用实践 一. bind1st和bind2nd 1.C++ STL中的绑定器 bind1st:operator()的第一个形参变量绑定成一个确定的值 bind2nd:operat

  • C++ accumulate函数详细介绍和具体案例

    目录 一.函数简单介绍 二.具体使用场景 1. 计算数组中所有元素的和 2. 计算数组中所有元素的乘积 3. 计算数组中每个元素乘以3之后的和 4.计算数组中每个元素减去3之后的和 5.计算班级内学生的平均分 6.拼接字符串 一.函数简单介绍 accumulate是numeric库中的一个函数,主要用来对指定范围内元素求和,但也自行指定一些其他操作,如范围内所有元素相乘.相除等. 使用前需要引入相应的头文件. #include <numeric> 函数共有四个参数,其中前三个为必须,第四个为非

  • JavaScript Function函数类型介绍

    // 在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法; // 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针; 一 函数的声明方式 1.函数声明方式 function box(num1,num2){ return num1+num2; } 2.函数表达式定义函数 var box = function(num1,num2){ // 通过变量box即可引用函数; return num1+num2; };

  • javascript面向对象入门基础详细介绍

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化.例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象.所以我们必须做出简化,首先,将人简化成属性和行为的组合,然后仅仅保留对程序有意义的几个属性以及行为.例如,我们做一个统计某学校的人的身高的程序,那么我们在这个程序中就可以把人的行为省略掉,只保留行为,并且只保留身高这一个属性.这样,我们就得到了一个最简单的对象. JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了.例如

  • Javascript 链式作用域详细介绍

     Javascript 链式作用域 其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但程序的设计,基本都是为了简单,便于理解的.记住JS中经典的一句话是,一切皆对象. 说白了链式作用域,其实就是Javascript的一个特性:子函数中可以访问父函数的所有变量.当然也包括全局变量window(一般的函数定义function a(){},其实都是win

随机推荐