学习前端的第三十天

函数

1.函数的概念

• 函数：由用户或自身控制，可以实现某个功能的 代码段（很多代码）

• 函数的特点：

  • 忽略细节：在使用过程中，只需要关注其实现的功能，而不需要关注其内部原理
  • 重复使用：多次使用
  • 选择使用：按需使用

2.创建函数

• 函数从哪来

  • 内置（系统提供）例：

    • parseInt()
    • parseFloat()
    • alert()

  • 自定义（自己写）

    • 声明式创建函数
      • 需要配合关键字：function
      • 语法：

            function 函数名(){}
        

    • 赋值式创建函数
      • 需要配合关键字：var和function

            var 变量名 = function(){}
        

3.执行函数

• 函数名()
  • 只要函数名后面有小括号，必然会立即执行当前函数
  • 固定语法
• 通过事件执行
  • 执行无名函数

      元素.事件 = function(){}
  

  • 执行有名函数

      元素.事件 = 函数名
  

  • 无名函数配合有名函数，使用较多

      元素.事件 = function(){
          函数|变量名()
      }
  

4.函数分类

• 根据写法分类
  • 有名函数：
    • 正常函数
    • 使用频率最多的函数
    • 声明式和赋值式创建的函数

        function 函数名(){}
        var 变量名 = function(){}
    

    • 执行
      • 常规执行：函数名或变量名()
  • 无名函数：
    • 非正常函数
    • 没有名字

        function(){}
    

    • 不允许直接存在于代码空间中，否则会报错
    • 使用场景：
      1. 作为变量的值存在（赋值式创建函数时的值）

             var 变量名 = function(){}
         

         • 执行：函数名|变量名()
      2. 作为事件处理函数执行

         btn.onclick = function(){
             // 当事件被触发时要执行的内容...
         }
         

5.函数的参数

• 参数

  • 根据用户传入不同的参数，选择执行函数中不同的功能

• 参数的分类：

  • 实参：函数执行时的参数
  • 形参：函数定义时的参数
  • 实参和形参的关系，赋值的关系，形参相当于变量，实参相当于值，一对一

• 数量对应关系

  • 参数可以有很多个，语法上没有数量限制，但是行业有习惯，自定义函数，如非特殊需要，尽量不要超过3个
  • 实参和形参数量一致：
    • 按照顺序，一一对应
  • 实参多：
    • 没有形参接收，通过形参找不到
    • 在函数内部有个神秘的空间（arguments），这个空间会将所有的实参全部保存，不论有没有被接收
    • arguments是个对象类型的数据（类数组的数据）
      • 长度（个数），表示接收到了几个实参
        • arguments.length
      • 索引（序号，编号），表示数组内部的数据位置，索引从0开始
        • arguments[索引]
  • 形参多：
    • 多出来的形参是undefined
    • 形参其实就是一个变量，实参是赋值，如果实参不够，表示没有赋值，undefined

补充:事件分类

• 事件按照输入设备分：

  • 鼠标类：

    • 单击：click
    • 双击：dblclick
    • 按下：mousedown
    • 抬起：mouseup
    • 移动：mousemove
    • 进入：mouseover / mouseenter
    • 离开：mouseout / mouseleave
    • 右键：contextmenu

  • 键盘类：

    • 按下：keydown
    • 抬起：keyup
    • 按下并抬起：keypress

• 网页的特色事件

  • 浏览器类：

    • 加载：load
    • 滚动：scroll
    • 改变大小：resize

  • 表单类：

    • 获取焦点：focus
    • 失去焦点：blur
    • 输入：input
    • 内容改变：change
    • 提交事件：submit
    • 重置事件：reset