js -- 函数总结篇，函数提升、动态参数、剩余参数、箭头函数、this指向......

码喽的自我修养

已于 2024-09-01 19:00:03 修改

阅读量1.3k

点赞数 40

分类专栏： javascript深入研究文章标签： javascript 前端 vue.js 开发语言 es6 html5

于 2024-06-22 10:11:42 首次发布

本文链接：https://blog.csdn.net/2301_78542842/article/details/139822523

版权

javascript深入研究专栏收录该内容

26 篇文章 5 订阅

订阅专栏

前言：

哈喽，大家好，我是码喽的自我修养！今天给大家分享JavaScript的函数相关知识，包含【函数提升、动态参数、剩余参数、箭头函数、this指向】，并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎收藏+关注 哦 💕

🌈🌈文章目录

一、函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用。

  
  <script>
    // 调用函数
    foo()
    // 声明函数
    function foo() {
      console.log('声明之前即被调用...')
    }
  
    // 不存在提升现象
    bar()  // 错误
    var bar = function () {
      console.log('函数表达式不存在提升现象...')
    }
  </script>

总结：

函数提升能够使函数的声明调用更灵活

函数表达式不存在提升的现象

函数提升出现在相同作用域当中

二、函数参数

了解函数参数的使用细节，比如参数默认值、动态参数、剩余参数等等，能够提升函数应用的灵活度。

1.1 默认值

  
  <script>
    // 设置参数默认值
    function sayHi(name="小明", age=18) {
      document.write(`<p>大家好，我叫${name}，我今年${age}岁了。</p>`);
    }
    // 调用函数
    sayHi();
    sayHi('小红');
    sayHi('小刚', 21);
  </script>

1.2 总结

声明函数时为形参赋值即为参数的默认值

如果参数未自定义默认值时，参数的默认值为 undefined

调用函数时没有传入对应实参时，参数的默认值被当做实参传入

2.1 动态参数

如果不确定函数调用时传参的数量，则适合用动态参数 👉 arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。

  <script>
    // 求生函数，计算所有参数的和
    function sum() {
      // console.log(arguments)
      let s = 0
      for(let i = 0; i < arguments.length; i++) {
        s += arguments[i]
      }
      console.log(s)
    }
    // 调用求和函数
    sum(5, 10)// 两个参数
    sum(1, 2, 4) // 两个参数
  </script>

2.2 总结

arguments 是一个伪数组

arguments 的作用是动态获取函数的实参

3.1 剩余参数

函数调用时将部分传参或者全部传参合并到一个数组中，以...other来表示

  
  <script>
    function config(baseURL, ...other) {
      console.log(baseURL) // 得到 'http://baidu.com'
      console.log(other)  // other  得到 ['get', 'json']
    }
    // 调用函数
    config('http://baidu.com', 'get', 'json');
  </script>

3.3 总结

... 是语法符号，置于最末函数形参之前，用于获取多余的实参

借助 ... 获取的剩余实参，是个真数组

三、箭头函数

箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。

以下示例代码，包含了箭头函数的基本写法、只有一个形参的简化写法，只有一行代码的简化写法、省略return、直接返回对象的特殊写法

 
  <body>
    <script>
      //普通函数表达式的写法
      // const fn = function () {
      //   console.log(123)
      // }
      //fn()

      // 1. 箭头函数表达式 基本语法
      // const fn = () => {
      //   console.log(123)
      // }
      // fn()
      // const fn = (x) => {
      //   console.log(x)
      // }
      // fn(1)


      // 2. 只有一个形参的时候，可以省略小括号
      // const fn = x => {
      //   console.log(x)
      // }
      // fn(1)


      // // 3. 只有一行代码的时候，我们可以省略大括号
      // const fn = x => console.log(x)
      // fn(1)


      // 4. 只有一行代码的时候，可以省略return
      // const fn = x => x + x
      // console.log(fn(1)) 打印2


      // 5. 箭头函数可以直接返回一个对象
      // const fn = (uname) => ({ uname: uname })
      // console.log(fn('刘德华'))   打印{ uname: '刘德华'}
  
    </script>
  </body>

小结

箭头函数属于表达式函数，因此不存在函数提升

箭头函数只有一个参数时可以省略圆括号 ()

箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回

箭头函数参数

箭头函数中没有 arguments，只能使用 ... 动态获取实参

  
  <body>
    <script>
      // 1. 利用箭头函数来求和
      const getSum = (...arr) => {
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
          sum += arr[i]
        }
        return sum
      }
      const result = getSum(2, 3, 4)
      console.log(result) // 9
    </script>

四、箭头函数 this

1.普通函数的this指向

以前普通函数this的指向： 谁调用的这个函数，this 就指向谁

console.log(this) // window  

function fn() {   
  console.log(this) // window   
}    
window.fn()   
 
// 对象方法里面的this  
 const obj = {   
    name: 'andy',    
    sayHi: function () {  
      console.log(this)  // obj
    }  
 }   
 obj.sayHi()

2.箭头函数的this指向

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

<script>
      
      // 箭头函数的this  是上一层作用域的this 指向
      // const fn = () => {
      //   console.log(this)  // window
      // }
      // fn()

      // 对象方法箭头函数 this
      // const obj = {
      //   uname: 'pink老师',
      //   sayHi: () => {
      //     console.log(this)  // this 指向谁？---> window
      //   }
      // }
      // obj.sayHi()

  
      const obj = {
        uname: 'pink老师',
        sayHi: function () {
          console.log(this)  // obj
          let i = 10
          const count = () => {
            console.log(this)  // obj 
          }
          count()
        }
      }
      obj.sayHi()
  
    </script>