JavaScript入门-函数function(一)

js函数(function)

function的英文是[功能],[数] 函数;职责;盛大的集会的意思
在js里,就是函数的意思。在Java里叫做方法。

定义函数

    function fun(参数){
        //函数体
        //return可有可无,根据实际要求加或不加
    }

使用函数

    //函数名()
    fun();

ps:在js里,我们的方法可以先调用后声明,也就是调用寒素的代码可以写在定义函数的前面。

实参、形参

实参:简单理解就是实际的参数,在调用函数的时候传的
形参:简单理解就是在定义函数时,用来接收调用时传的值

    var n1=123 , n2=456
    //调用函数
    fun(n1 , n2)

    //定义函数
    function fun( a , b){
        a += 100
        b += 100
        console.log(a , b)
    }
    console.log(n1 , n2)

    //运行结果:223 , 556
    //123 , 456

ps:我们可以看出,实参和形参并不是同一个变量

不太严谨的参数列表

先看一段代码:

    function fun(a , b , c){
        console.log(a*10 , b+10 , c-10)
    }
    //调用
    fun(1,2,3)//输出结果10,12,-7
    //这里是没毛病的,正常输出

    //但是下面这个调用呢???
    fun(20,2)
    fun()
    fun(12,32,14,5)

ps:上面的写法,都不会报错...如果不信可以自己试试。

  1. 我们在定义函数的时候,定义了多少个参数,按道理来说,就应该严格按照规范传参,但是没办法,js里比较'宽容’,你传了多少个参数,就接收多少个参数
  2. 如果多传了就无视你多传的参数,从第一个','前的参数为第一个参数算
  3. 如果少传了,没有传的那几个参数,就为undefined。都没传那就值都为undefined

return关键字

首先,在js里,并没有规定函数在定义的时候,一定要有返回值或者返回值类型这一说法,很活跃的,你想返回什么结果都可以
其次,如果要返回结果或者结束函数体,就要用到return关键字

  1. return用于返回函数的值给调用者
  2. return一旦执行,则立马结束当前的函数,注意:必须时返回具体的值才会结束(可以思考一下递归调用)
  3. return函数中可以有多个,返回不同条件下的值。比如在switch中,每个case后面可以用return返回具体的值

arguments

在es5里,arguments是一个对象,用来接收所有的参数,用法和数组一致;不过目前已被废弃,有更好的代替它
es6:(推荐使用)

    function fun( n1, n2, ...args ){
        //args只能接收n2后面的数
        //用...接收的就是一个数组,可以遍历
    }

ps:...后面不一定要写args,可以自己随便命名,符合字符串规范就行。一般用args表示

关于...args的用法

  1. args不能放在参数列表的前面
  2. args有且只有一个

关于函数的耦合问题

先看代码:

    var num = 100
    var res = fun(1)
    //定义函数
    function fun(n){
        console.log( num + n )
    }
    //输出为101

ps:上面的代码运行结果没问题,但是,耦合度很高,因为在函数体内,用全局变量运算,这就很忌讳,如果项目要移植,这些用到的变量就会拖泥带水的,耦合度高。这在以后的工作中这么干容易被炒鱿鱼...
注意:如果要使用,传参数就好了,千万别使用全局变量

函数名的问题

    var f = function fun(){
        console.log("my name is rainbow")
    }
    console.log(f)

ps:我们把一个函数体,赋值给了一个变量,那么这个变量打印出来会怎么样呢?
结果:并不会报错,而是直接打印出了整个函数体的内容。我们可以这么想,调用函数的时候,我们写的是fun(),也就是 函数名() 就变成了调用了。其实,js里面还真是这么干的,函数名加括号就是调用了一次函数。
在这里,大家和我想一个问题,这个方法体赋值给了变量,那这个变量是什么类型呢???

匿名函数

简单理解就是,你要使用一个函数,但是这个函数没有名字,这要怎么使用呢。
很简单,上面不是说了吗?

  • 调用函数就是 函数名()
  • 而又因为 函数名 = 方法体
  • 那么 方法体() = 函数名()
    这样就调用了一次函数
    var a = 10;
    var b = 20;****************
    var f = function(){
        console.log(n1+n2)
    };
    f(a,b)//输出结果30

自执行函数

  • 自执行函数就是自己定义自己执行
    这个就是匿名函数的应用
    (function(){
        console.log('this is rainbow !')
    })();
    例子
    var a = 10;
    var b = 20;
    (function( n1 , n2 ) {
        console.log( n2 + n1)
    })(a ,b);
    //输出结果为30

ps:

  • 自执行函数的函数体必须要用()包起来。建议最后加上分号';'
  • 自执行应用场景一般在一些类库
(0)

相关推荐

  • 17K star 仓库,解决 90% 的大厂基础面试题

    前言 笔者开源的前端进阶之道已有三年之久,至今也有 17k star,承蒙各位读者垂爱.在当下部分内容已经略微过时,因此决定提笔翻新内容. 翻新后的内容会全部集合在「干爆前端」中,有兴趣的读者可以前往 ...

  • javascript里面的this指向问题

    javascript里面的this指向问题

  • javascript中的闭包这一篇就够了

    前端技术优选 今天 以下文章来源于程序员成长指北 ,作者koala 程序员成长指北专注 Node.js 技术栈分享,从 前端 到 Node.js 再到 后端数据库,祝您成为优秀的高级 Node.js ...

  • 从一个超时程序的设计聊聊定时器的方方面面

    目录 如何设计一个靠谱的超时程序 JS引擎的运行机制是怎样的? 如何避免程序卡顿? 如何判断H5程序是从后台台恢复过来的? 如何理解定时器的丢弃行为? 在开发中如何选择使用合适的定时器? 有没有一键回 ...

  • C 11特性:bind和function函数使用

    目录 1. std::bind 2. std::function 1. std::bind std::bind 的函数原型: simple(1):template <class Fn, clas ...

  • 闭包理解

    闭包 刚学过的闭包,分享一下闭包的理解 1.什么是闭包? 闭包就是一个函数,也可以说闭包是一个引用关系,可以理解为一个作用域可以访问另一个函数的局部变量. 代码: function fn() { va ...

  • JavaScript入门-函数function(二)

    JavaScript入门-函数function(二) 递归函数 什么是递归函数? 递归简单理解就是,在函数体里,调用自己. //我们在求一个10的阶乘的时候,可能会这么做 //写一个循环 var to ...

  • 269个JavaScript工具函数,助你提升工作效率(下)

    原创 叫我詹躲躲 前端技术优选 作者:叫我詹躲躲 原文地址:https://juejin.im/post/5edb6c6be51d4578a2555a9b 130.blob转file /** * @p ...

  • Dart基础语言 — 函数 Function

    Dart基础语言 - 函数 Function 函数定义 int add(int x) { return x + 1;}调用add(1); 可选参数 int add(int x, [int y, int ...

  • 这6个日期入门函数,你必须学会,轻松搞定80%的日期问题

    [温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 日期,在Excel表格中出现的频率很高,如人事部门统计员工的入职日期.财务部门账务结算日期.统计的生产日期等等. 在职场中 ...

  • JavaScript入门-对象(二)

    JavaScript对象(二) 本篇,主要讲了面向对象.this的指向问题,模拟继承过程 面向对象编程 什么面向对象编程? 编程,编程就是人们用计算机能懂的语言,告诉计算机自己想做的事情. 面向对象的 ...

  • JavaScript入门-js的变量以及运算

    关于js变量 变量,就是一个用来存储数据的容器 一般来说,我们的变量都是可以得先声明,再使用,就像是一个东西先必须存在,才能看得见摸得着.然而在js里(es5),可以先使用,后声明. a = 100; ...

  • JavaScript(六)-函数

    函数:定义函数 定义方式 第一种定义方式:可在后面定义前面调用.可提前调用 function gg(){ console.log("函数内部的代码"); } 第二种定义方式:必须先 ...

  • JavaScript入门-了解JavaScript

    JavaScript入门(一) 学习js之前,我们先来了解一下,什么是JavaScript? JavaScript是一种解释型语言.在运行的时候,一边读一边编译一边执行.简单来说就是,在执行js代码时 ...

  • JavaScript日期函数 - 练习、计时器、innerHTML

    一些例题 1.显示当前的时间 function showDate( ){ var d = new Date(); //获取当前时间 var year = d.getFullYear(); //获取当前 ...