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

news2024/9/25 19:14:08

在这里插入图片描述

JavaScript 进阶 - 第4天

深浅拷贝

浅拷贝

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

浅拷贝：拷贝的是地址

常见方法：

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

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

深拷贝

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

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

常见方法：

  1. 通过递归实现深拷贝
  2. lodash/cloneDeep
  3. 通过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>
js库lodash里面cloneDeep内部实现了深拷贝
<body>
  <!-- 先引用 -->
  <script src="./lodash.min.js"></script>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o)
    o.family.baby = '老pink'
    console.log(obj)
  </script>
</body>
JSON序列化
<body>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    // 把对象转换为 JSON 字符串
    // console.log(JSON.stringify(obj))
    const o = JSON.parse(JSON.stringify(obj))
    console.log(o)
    o.family.baby = '123'
    console.log(obj)
  </script>
</body>

异常处理

了解 JavaScript 中程序异常处理的方法，提升代码运行的健壮性。

throw

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

总结：

  1. throw 抛出异常信息，程序也会终止执行
  2. throw 后面跟的是错误提示信息
  3. Error 对象配合 throw 使用，能够设置更详细的错误信息
<script>
  function counter(x, y) {

    if(!x || !y) {
      // throw '参数不能为空!';
      throw new Error('参数不能为空!')
    }

    return x + y
  }

  counter()
</script>

总结：

  1. throw 抛出异常信息，程序也会终止执行
  2. throw 后面跟的是错误提示信息
  3. Error 对象配合 throw 使用，能够设置更详细的错误信息

try … catch

<script>
   function foo() {
      try {
        // 查找 DOM 节点
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (error) {
        // try 代码段中执行有错误时，会执行 catch 代码段
        // 查看错误信息
        console.log(error.message)
        // 终止代码继续执行
        return

      }
      finally {
          alert('执行')
      }
      console.log('如果出现错误，我的语句不会执行')
    }
    foo()
</script>

总结：

  1. try...catch 用于捕获错误信息
  2. 将预估可能发生错误的代码写在 try 代码段中
  3. 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息

debugger

相当于断点调试

处理this

了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。

this 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。

普通函数

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this)  
  }
  // 函数表达式
  const sayHello = function () {
    console.log(this)
  }
  // 函数的调用方式决定了 this 的值
  sayHi() // window
  window.sayHi()
	

// 普通对象
  const user = {
    name: '小明',
    walk: function () {
      console.log(this)
    }
  }
  // 动态为 user 添加方法
  user.sayHi = sayHi
  uesr.sayHello = sayHello
  // 函数调用方式，决定了 this 的值
  user.sayHi()
  user.sayHello()
</script>

注： 普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined。

箭头函数

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。

<script>
    
  console.log(this) // 此处为 window
  // 箭头函数
  const sayHi = function() {
    console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致
  }
  // 普通对象
  const user = {
    name: '小明',
    // 该箭头函数中的 this 为函数声明环境中 this 一致
    walk: () => {
      console.log(this)
    },
    
    sleep: function () {
      let str = 'hello'
      console.log(this)
      let fn = () => {
        console.log(str)
        console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致
      }
      // 调用箭头函数
      fn();
    }
  }

  // 动态添加方法
  user.sayHi = sayHi
  
  // 函数调用
  user.sayHi()
  user.sleep()
  user.walk()
</script>

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此DOM事件回调函数不推荐使用箭头函数，如下代码所示：

<script>
  // DOM 节点
  const btn = document.querySelector('.btn')
  // 箭头函数 此时 this 指向了 window
  btn.addEventListener('click', () => {
    console.log(this)
  })
  // 普通函数 此时 this 指向了 DOM 对象
  btn.addEventListener('click', function () {
    console.log(this)
  })
</script>

同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数，如下代码所示：

<script>
  function Person() {
  }
  // 原型对像上添加了箭头函数
  Person.prototype.walk = () => {
    console.log('人都要走路...')
    console.log(this); // window
  }
  const p1 = new Person()
  p1.walk()
</script>

改变this指向

以上归纳了普通函数和箭头函数中关于 this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向：

call

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this);
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16
  }

  // 调用函数并指定 this 的值
  sayHi.call(user); // this 值为 user
  sayHi.call(student); // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y;
  }

  // 调用 counter 函数，并传入参数
  let result = counter.call(null, 5, 10);
  console.log(result);
</script>

总结：

  1. call 方法能够在调用函数的同时指定 this 的值
  2. 使用 call 方法调用函数时，第1个参数为 this 指定的值
  3. call 方法的其余参数会依次自动传入函数做为函数的参数
apply

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this)
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16
  }

  // 调用函数并指定 this 的值
  sayHi.apply(user) // this 值为 user
  sayHi.apply(student) // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y
  }
  // 调用 counter 函数，并传入参数
  let result = counter.apply(null, [5, 10])
  console.log(result)
</script>

总结：

  1. apply 方法能够在调用函数的同时指定 this 的值
  2. 使用 apply 方法调用函数时，第1个参数为 this 指定的值
  3. apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数
bind

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this)
  }
  let user = {
    name: '小明',
    age: 18
  }
  // 调用 bind 指定 this 的值
  let sayHello = sayHi.bind(user);
  // 调用使用 bind 创建的新函数
  sayHello()
</script>

注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值。

防抖节流

  1. 防抖（debounce）
    所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
  2. 节流（throttle）
    所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1133750.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

NSSCTF做题第9页（3）

NSSCTF做题第9页（3）

[GKCTF 2020]CheckIN 代码审计 这段代码定义了一个名为ClassName的类&#xff0c;并在脚本的最后创建了一个ClassName类的实例。 在ClassName类的构造函数中&#xff0c;首先通过调用$this->x()方法获取了请求参数$_REQUEST中的值&#xff0c;并将其赋值给$this->code属性…
阅读更多...
Android [SPI,AutoSerivce,ServiceLoader]

Android [SPI,AutoSerivce,ServiceLoader]

记录一下在Android中使用SPI的过程。 1.项目gralde文件。 plugins {id kotlin-kapt } dependencies {implementation com.google.auto.service:auto-service:1.0-rc7 kapt "com.google.auto.service:auto-service:1.0-rc7" } 这个AutoServ…
阅读更多...
【Qt】绘图与绘图设备

【Qt】绘图与绘图设备

文章目录 绘图设备QPainter绘图实例案例1案例2-高级设置案例3&#xff1a;利用画家画资源图片 点击按钮移动图片 QtPaintDevice实例Pixmap绘图设备QImage 绘图设备QPicture 绘图设备 QPainter绘图 Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制。整个绘图系…
阅读更多...
外卖跑腿小程序开发如何满足不断变化的用户需求？

外卖跑腿小程序开发如何满足不断变化的用户需求？

外卖跑腿小程序市场竞争激烈&#xff0c;用户需求不断演变。为了保持竞争力&#xff0c;开发团队需要不断适应变化&#xff0c;提供新功能和改进用户体验。本文将讨论如何通过技术手段来满足不断变化的用户需求。 1. 灵活的后端服务 后端服务是外卖跑腿小程序的核心&#xf…
阅读更多...
Sui主网升级至V1.12.2版本

Sui主网升级至V1.12.2版本

其他升级要点如下所示&#xff1a; #14305 使Sui能够验证zkLogin历史地址&#xff08;通过已填充的address_seed派生&#xff09;。升级协议版本至29&#xff0c;以启用对历史地址的验证。 #14100 修复了verify_zklogin_id函数中的错误&#xff0c;该函数按预期返回一个Ver…
阅读更多...
Flutter extended_image库设置内存缓存区大小与缓存图片数

Flutter extended_image库设置内存缓存区大小与缓存图片数

ExtendedImage ExtendedImage 是一个Flutter库&#xff0c;用于提供高级图片加载和显示功能。这个库使用了 image 包来进行图片的加载和缓存。如果你想修改缓存大小&#xff0c;你可以通过修改ImageCache的配置来实现。 1. 获取ImageCache实例: 你可以通过PaintingBinding…
阅读更多...
Ansible简介

Ansible简介

环境 控制节点&#xff1a;Ubuntu 22.04Ansible 2.10.8管理节点&#xff1a;CentOS 8 组成 Ansible环境主要由三部分组成&#xff1a; 控制节点&#xff08;Control node&#xff09;&#xff1a;安装Ansible的节点&#xff0c;在此节点上运行Ansible命令管理节点&#xff…
阅读更多...
通信算法之189: 信道检测- MRC

通信算法之189: 信道检测- MRC

阅读更多...
【剑指Offer】38.字符串的排列

【剑指Offer】38.字符串的排列

题目 输入一个长度为 n 字符串&#xff0c;打印出该字符串中字符的所有排列&#xff0c;你可以以任意顺序返回这个字符串数组。 例如输入字符串ABC,则输出由字符A,B,C所能排列出来的所有字符串ABC,ACB,BAC,BCA,CBA和CAB。 数据范围&#xff1a;n<10 要求&#xff1a;空间复…
阅读更多...
基于springboot实现篮球竞赛预约平台管理系统项目【项目源码+论文说明】

基于springboot实现篮球竞赛预约平台管理系统项目【项目源码+论文说明】

基于springboot实现篮球竞赛预约平台管理系统演示 摘要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;篮球竞赛预约平台也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&…
阅读更多...
【图解数据结构】手把手教你如何实现顺序表（超详细）

【图解数据结构】手把手教你如何实现顺序表（超详细）

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、算法模板、汇编语言 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️线性表1.1 &#x1f514;线性表的定义1.2 &#x1f514;线性表的存储结构 二. ⛳️…
阅读更多...
JavaScript进阶 第三天笔记

JavaScript进阶 第三天笔记

JavaScript 进阶 - 第3天笔记 了解构造函数原型对象的语法特征&#xff0c;掌握 JavaScript 中面向对象编程的实现方式&#xff0c;基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征掌握基于构造函数原型对象的逻辑封装掌握基于原型对象实现的继承理解什…
阅读更多...
对比Vue2和Vue3的自定义指令

对比Vue2和Vue3的自定义指令

一、自定义指令简介 自定义指令是Vue提供的能力,用于注册自定义的指令,从而实现一些自定义的DOM操作。 二、Vue2中自定义指令 在Vue2中,自定义指令通过全局方法Vue.directive()进行注册: // 注册全局指令v-focus Vue.directive(focus, {inserted: function(el) {el.focus()…
阅读更多...
短视频矩阵剪辑分发+AI无人直播的如何开发技术搭建？

短视频矩阵剪辑分发+AI无人直播的如何开发技术搭建？

搭建步骤&#xff1a; 1. 首先需要根据自身产品确定视频类型及需要实现的视频效果 2. 根据预期视频效果选择视频上传模式&#xff0c;并将视频素材进行上传 3. 添加音频、字幕&#xff0c;标题等与素材进行组合。 4. 设置投放计划&#xff0c;包括&#xff1a;视频标题、视频…
阅读更多...
如何解决找不到xinput1_3.dll无法继续执行此代码？5个解决方法分享

如何解决找不到xinput1_3.dll无法继续执行此代码？5个解决方法分享

由于各种原因&#xff0c;电脑可能会出现一些问题&#xff0c;其中之一就是电脑提示找不到xinput1_3.dll。这个问题可能会导致一些应用程序无法正常运行&#xff0c;给用户带来困扰。那么&#xff0c;当遇到这个问题时&#xff0c;我们应该如何修复呢&#xff1f;小编将详细介绍…
阅读更多...
C语言 每日一题 PTA 10.25 day4

C语言 每日一题 PTA 10.25 day4

10.25 求解马鞍点问题 若矩阵Anm中某个元素A[i][j]是矩阵第i行中值最小的元素&#xff0c;同时又是第j列中值最大的元素&#xff0c;则称元素A[i][j]是矩阵中的一个马鞍点。 设以二维数组存储矩阵&#xff0c;编写算法求矩阵A中的所有马鞍点&#xff0c;算法的时间复杂度要尽量…
阅读更多...
【软考系统架构设计师】2023年系统架构师冲刺模拟习题之《系统工程与信息系统基础》

【软考系统架构设计师】2023年系统架构师冲刺模拟习题之《系统工程与信息系统基础》

本篇文章主要分享软考中系统工程与信息系统基础章节相关知识点。 系统工程与信息系统基础 [01] 霍尔三维结构以时间维、逻辑维、&#xff08;&#xff09;维组成的立体结构概括性地表示出系统工程的各阶段、各步骤以及所涉及的知识范围。其中时间维是系统的工作进程&#xff0…
阅读更多...
OSATE 插件 Cheddar 的安装与简单使用

OSATE 插件 Cheddar 的安装与简单使用

一、Cheddar简介 Cheddar是一个开源的实时系统任务调度模拟器/分析仪&#xff0c;可以使用Cheddar进行任务的可调度性分析以及相关的性能分析。对于Cheddar的详细信息可以参考其官网&#xff1a; Cheddar - open-source real-time scheduling simulator/analyzer (univ-brest…
阅读更多...
JS加密/解密之手搓进阶版加密

JS加密/解密之手搓进阶版加密

前言 以前给大家介绍过一个简单的加密原理&#xff0c;是通过将字符串转换储层ascii码进行加密处理&#xff0c;这次介绍一个进阶版。解密难度直接上升了好几倍&#xff0c;加密代码放在下方各位自己尝试&#xff0c;解密代码就不贴了&#xff0c;感兴趣的可以到我的js加密官网…
阅读更多...
Echarts的legend的特殊图例展示

Echarts的legend的特殊图例展示

问题描述 如图的红框中(上图是设计稿)&#xff0c;默认总发行和总到期都是矩形&#xff0c;即默认的情况下图例是25*14的&#xff0c;但是设计稿要求前两世正方形的。 问题复现&#xff1a; 默认的情况下&#xff0c;柱状图的图例是矩形(长方形),不是设计稿中的正方形。 演示…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023