JS里的函数

peaky
99 阅读3分钟

一、JS函数概述：

  1. 是什么：
    • 一个JS代码块
    • 一个对象
  2. 特点：
    • 能被多次调用
    • 是闭包：可嵌套定义在其他函数中，并且这个内嵌函数可访问在函数作用域的任何变量
  3. 构造函数：
    • 是什么：
      • 用来初始化一个新对象的函数
  4. 定义函数：
    • 方式1：函数声明
      • 语法：
        • funtion 函数名(){}
      • 特点：
        • 函数能在定义前调用，因为函数声明会被提升到包含脚本、函数或代码块的顶部
    • 方式2：函数表达式
      • 语法：
        • const/let 名=function(){}或const 常量名=function 函数名(){}
          • 注：最佳实践是用const，这样可防止意外又给变量赋予新值
      • 特点：
        • 函数不能在定义前调用
      • 如何提升函数的定义：
        • 调用bind()方法
    • 方式3：箭头函数
      • 语法：
        • const 名=(形参)=>{}
        • 简洁写法：
          • 如果形参只有一个：const 名=形参=>{}
          • 如果函数体只有一个return语句：const 名=(形参)=>语句
        • 关于return：
          • 如果要返回a：const 名=(形参)=>({a})或const 名=(形参)=>{return {a}}
      • 特点：
        • 从定义自己的环境继承this关键字的值
        • 无prototype属性，不能作为新类的构造函数
    • 方式4：使用Function()构造函数
  5. 嵌套函数：
    • 是什么：
      • 嵌套在函数里的函数
    • 特点：
      • 能访问包含自己的函数或更外层函数的参数和变量
  6. this关键字
    • 除了箭头函数，嵌套函数不会继承包含函数的this值
    • 若嵌套函数被当作方法来调用，那其this值就是调用它的对象
    • 若嵌套函数（非箭头函数）被当作函数来调用
      • 其this值只可能为全局对象（非严格模式）或undefined（严格模式）

二、调用函数：

  1. 方式1：函数调用

    • 函数名()

  2. 方式2：方法调用
    image.png

  3. 方式3：构造函数调用

    • new Object() 或 new Object【无参时】。
    • 调用结果：
      • 创建一个新的空对象
        • 其特点：
          • 继承构造函数的prototype属性指定的对象

  4. 方式4：间接调用：

    • 使用函数内部的方法：（可自行指定调用时的this值）
      • call()
      • apply()

  5. 方式5：隐式函数调用：

    • 需要关注，因为出现隐式调用将会导致bug更难排查

三、函数实参与形参

  1. 形参：
    • 当调用函数时传入的实参少于声明的形参时：
      • 额外的形参获得默认值undefined
    • 剩余形参：
      • ...剩余形参：允许我们调用函数时传入比形参多的任意数量的实参
      • 特点：
        • 传入的实参首先赋值到非剩余形参
        • 然后所有剩余的实参会保存在一数组里赋值给剩余形参
  2. 实参：
    • 扩展操作符：
      • 是什么：
        • 一种可针对数组字面量或函数调用使用的特殊JS语法
      • 用途：
        • 展开数组的元素

四、闭包

  1. 是什么：
    • 一种机制，函数对象与作用域组成起来解析函数变量的机制
  2. 特点：
    • 能访问外部函数的变量
    • 能保存某个状态或上下文信息

五、函数属性、方法与构造函数：

  1. 属性：
    • length
    • name
    • prototype
  2. 方法：
    • 间接调用一个函数的方法：
      • 有哪些：
        • call(参数1，参数2...)
        • apply(参数1，[参数2，参数3...])
      • 特点：
        • 第一个参数都是要在其上调用这个函数的对象（即函数调用上下文，this的值）
      • 注意：
        • 箭头函数的this值不能通过这两个方法重写
      • 举例说明：
        • f.call(o)：在o上调用函数f，o为函数f里this的值，f为o的方法
    • bind()：
      • 用途：
        • 把函数绑定到对象
      • 注意：
        • 箭头函数的this值不能通bind()方法重写
    • toString()：
      • 用途：
        • 返回一个符合函数声明语句的字符串
参考资源： 犀牛书第七版--函数（javascript权威指南）
avatar
文章
阅读
粉丝