JavaScript进阶第四天笔记——深浅拷贝、this绑定、防抖节流

原创

已于 2023-10-25 23:16:04 修改 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #笔记 #开发语言 #前端 #学习 #ecmascript #1024程序员节

于 2023-10-25 21:49:17 首次发布

本文详细介绍了JavaScript中的深浅拷贝方法，包括浅拷贝的Object.assign和数组扩展运算符，以及深拷贝的实现如lodash的cloneDeep和递归。此外，文章还涵盖了异常处理、this指向、call、apply和bind等概念，以及防抖和节流技术的应用。

在这里插入图片描述

JavaScript 进阶 - 第4天

深浅拷贝

浅拷贝

首先浅拷贝和深拷贝只针对引用类型

浅拷贝：拷贝的是地址

常见方法：

拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象
拷贝数组：Array.prototype.concat() 或者 […arr]

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解：如果是单层对象，没问题，如果有多层就有问题)

深拷贝

首先浅拷贝和深拷贝只针对引用类型

深拷贝：拷贝的是对象，不是地址

常见方法：

通过递归实现深拷贝
lodash/cloneDeep
通过JSON.stringify()实现

递归实现深拷贝

函数递归：

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

简单理解:函数内部自己调用自己, 这个函数就是递归函数
递归函数的作用和循环效果类似
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return

<body>
  <script>
    const obj = {
     
     
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
     
     
        baby: '小pink'
      }
    }
    const o = {
     
     }
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
     
     
      debugger
      for (let k in oldObj) {
     
     
        // 处理数组的问题  一定先写数组 在写 对象 不能颠倒
        if (oldObj[k] instanceof Array) {
     
     
          newObj[k] = []
          //  newObj[k] 接收 []  hobby
          //  oldObj[k]   ['乒乓球', '足球']
          deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
     
     
          newObj[k] = {
     
     }
          deepCopy(newObj[k], oldObj[k])
        }
        else {
     
     
          //  k  属性名 uname age    oldObj[k]  属性值  18
          // newObj[k]  === o.uname  给新对象添加属性
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象
    console.log(o)
    o.age = 20
    o.hobby[0] = '篮球'
    o.family.baby = '老pink'
    console.log(obj)
    console.log([1, 23] instanceof Object)
    // 复习
    // const obj = {
     
     
    //   uname: 'pink',
    //   age: 18,
    //   hobby: ['乒乓球', '足球']
    // }
    // function deepCopy({ }, oldObj) {
     
     
    //   // k 属性名  oldObj[k] 属性值
    //   for (let k in oldObj) {
     
     
    //     // 处理数组的问题   k 变量
    //     newObj[k] = oldObj[k]
    //     // o.uname = 'pink'
    //     // newObj.k  = 'pink'
    //   }
    // }
  </script>
</body>