[JavaScript学习笔记-13] 深浅拷贝 异常处理 this 防抖节流

已于 2022-07-24 21:34:37 修改
阅读量124 收藏
点赞数 1
分类专栏： 学习笔记 文章标签： javascript 学习 前端
于 2022-07-20 20:50:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64509600/article/details/125900390
版权

目录

二、异常处理

2.1 throw

2.2 try ... catch

三、this

3.1 默认值

箭头函数

this指向

call

apply

bind

四、防抖节流

一、深浅拷贝

  1. 首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象，简单来说，浅拷贝只复制一层对象的属性，二深拷贝则复制了所有的层级。

  2. 对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会 改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

    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)

二、异常处理

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

2.1 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 使用，能够设置更详细的错误信息

2.2 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 代码段，并截获到错误信息

三、this

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

3.1 默认值

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 秒中只执行一次函数

发条橙序员
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
构造函数和原型对象、this的指向问题、JavaScript中的错误处理、查找算法
weixin_44892365的博客
11-14 270
构造函数和原型对象、this的指向问题、JavaScript中的错误处理、查找算法
我们来看看this吧
weixin_56847152的博客
08-19 187
全局环境下 在全局环境下，this 始终指向全局对象（window）, 无论是否严格模式 普通函数: 调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示： 普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined。 <script> // 普通函数 function sayHi() { console.log(this); } // 函数表达式 let say...
调试大法：this复习，try...catch，es5标准模式
hey_uncle的博客
08-16 238
1.this指向复习 2.try…catch 3.es5严格模式 "use strict"; //写在第一行 es3.0 + es5.0新的语法 （意味着重合的语法方法，使用es3.0，要使用es5.0，就必须在严格模式下） 示例： with（obj） { console.log(this); } // obj //改变了作用域链，成为了顶级作用域（最近一级的作用域） 功能强大，...
this指向问题
hhthwx的博客
03-20 424
调用一个函数会暂停当前函数的执行，传递控制权和参数给新的函数。除了生命是定义的形式参数，每个函数还接收两个附加的参数：this,和arguments。参数this在面向对象编程中很重要，它的值取决于调用的模式。在JavaScript中一共有四种调用模式：方法调用模式，函数调用模式，构造器调用模式和apply调用模式。这些模式在初始化关键参数this上有差异。 方法调用模式 当一个函数被保存...
this到底是什么，this指向其所在函数的直接调用者！！！
weixin_30729609的博客
09-20 456
this指向其所在函数的直接调用者。this在函数中使用，函数都有挂载的对象，没有明确挂载到对象上的函数，默认都挂着在window对象上。 一定要明确是谁调用了函数，this就指向这个调用者。 一般很常见的就是函数 此时的this是浏览器的window对象，函数默认声明到window对象上，函数在浏览器中执行，在其中引用this，this即为window对象 function...
JavaScript学习笔记整理_setTimeout的应用
10-21
在本篇学习笔记中，我们将深入探讨`setTimeout`的应用及其相关概念。 首先，`setTimeout(f, n)`接收两个参数：一个函数`f`和一个时间间隔`n`（以毫秒为单位）。它会安排在`n`毫秒后执行`f`函数，但请注意，`...
summary:走心的的前端进阶汇总，目前包含Js基础进阶系列、Js专题系列，不久的将来会添加ES6系列、知识专题、算法系列，感兴趣的小伙伴们不妨点个Star，一起进步吧～
07-23
全系列预计10-15篇文章，欢迎大家指正，虚心学习提高深入变量对象立即执行函数看透闭包函数参数传递基本数据类型你真的了解Js吗JavaScript专项进阶系列变量与函数提升数组去重防抖专题节流专题深浅拷贝数据类型检
pratiknilange.github.io：回家！ :house_with_garden:
02-09
这个项目可能是一个关于JavaScript技术分享、个人作品展示或者是学习笔记的平台。 JavaScript是一种广泛使用的编程语言，尤其在Web开发领域中扮演着核心角色。它主要负责网页的动态交互，如表单验证、动画效果、...
阿拉尼亚
02-13
11. **性能优化**：如事件委托、防抖和节流、懒加载、代码分割、异步加载等。 12. **测试和调试**：使用Mocha、Chai进行单元测试，Chrome DevTools进行前端调试。 13. **源码分析**：可能包含作者对知名JavaScript...
LiveMarkdownPreviewer
02-15
4. **性能优化**：为了提高用户体验，避免频繁的DOM操作导致的性能下降，可以使用防抖(debounce)或节流(throttle)技术来限制预览更新的频率。 在"LiveMarkdownPreviewer-master"这个压缩包中，我们可能找到以下内容...
JS深拷贝和浅拷贝
zhangwenok的博客
07-22 1123
JS深拷贝和浅拷贝的核心区别就在于不同的数据类型在内存中存储的位置不同。JS的数据类型分为基本数据类型(值类型)字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。引用数据类型（对象类型）对象(Object)、数组(Array)、函数(Function)。基本类型数据保存在栈内存中；引用类型数据保存在堆内存中，引用数据类型的变量是存放在栈中的，指向的是堆内存中实际对象的引用。...
Js实现深克隆和浅克隆的方法！
Wsh20210301的博客
08-07 1197
深克隆和浅克隆的定义 浅克隆定义： 直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址。 浅克隆代码： function lowClone(Clone){ let obj={}; for(let key in Clone){ obj[key]=Clone[key] } return obj; } let a = {
@Transactional中try-catch和this使用事务失效的解决方法
随缘同学的博客
07-18 1640
//通过获取当前代理对象来代替this的方法去解决this导致事务失效的问题 ((BaseWithdrawBillService<BaseWithdrawBillPo, CashServiceFace>) AopContext.currentProxy()).returnAliAmount(id); // 解决在try-catch中无法回滚事务的问题 TransactionAs...
【JS学习】JS中的深浅复制
zx1041561837的博客
10-30 1684
介绍了深复制和浅复制分别是什么，给出了实现深复制的JS代码。
获取动态参数数据，静态属性数据
yezi153的博客
10-22 336
// 获取动态参数数据 if ((this.paramsObj.params === 'many')) { this.manyData = res.data.data // 遍历数组用map方法 const newArr = res.data.data.map((item) => { return { attr_id: item.attr_id, attr_vals: item.attr_vals } ..
【我不熟悉的javascript】使用lodash,节流、防抖函数别忘了使用bind指定this指针的指向
qq_17335549的博客
09-26 350
【我不熟悉的javascript】使用lodash,节流、防抖函数别忘了使用bind指定this指针的指向
JS改变函数内this指向的三种方法call()、apply()、bind()
tkrj7_的博客
01-21 748
改变函数内this指向 this的指向问题 JS提供三种方法： call() call(this指向,参数…) 可以调用函数 可以改变函数内部this指向 应用：可以实现继承 //将fn的this指向t var t = { name: 'tracy' }; function fn(a, b) { console.log(a + b); }; fn.call(t, 1, 2); //实现继承 function Fa(uname, age, sex) { this.uname =
分分钟掌握this关键字的指向
李小乐er
01-28 376
1.this的值取决于函数被调用的方式正常调用指向window 谁调用就指向谁 var objData = {a: 'custom'}; // 这个属性是在global对象定义的 var a = 'global'; function whatsThis() { return this.a; // this的值取决于函数的调用方式 } whatsThis(); // 输出 "glo...
防抖节流与this指向的改变
zyq51的博客
08-31 2839
一、防抖节流 1、防抖 在固定的时间内没有触发事件，会在固定时间结束后触发，如果固定时间内触发事件了，会在延长固定时间再触发 防抖主要利用定时器实现 用实例的话，可以用电梯的升降，遇到人进入会有一段时间的停止，当再次有人进入延迟会延长。 //用定时器实现防抖 function debounce(func,wait) { var timer=null; return function() { //保存当前调用的dom对象 var _this=this; //保
javascript学习笔记--查看html元素和改变html的内容
最新发布
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值