js 1.3 异常、this、防抖、节流

最新推荐文章于 2024-11-13 17:27:29 发布

晨风流云837

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量99

点赞数 3

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_70856517/article/details/132598904

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js 1.3异常、this、防抖、节流

异常处理
处理 this
防抖
节流

异常处理

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

throw 抛异常

    function dre(x, y) {
      if (!x || !y) {
        throw new Error('没有传参')
      }
      return x + y
    }
    dre()

在这里插入图片描述

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

try/ catch 捕获异常

    function err() {
      // debugger
      try {
        //查找dom节点
        const y = document.querySelector(".p")
        p.style.color = 'red'
      } catch (error) {
        // try 代码中执行错误会执行catch代码
        console.log(error.message)
        // 终止代码继续执行
        // return
        throw new Error('出错了')
      }
      finally {
        //不管你程序对不对，一定会执行代码
        alert('执行')
      }
      console.log('如果出现错误，我的语句不会执行');

    }

    err()

try …catch 用于捕获错误信息
将预估发生错误的代码写在try代码段中
如果try代码段中出现错误后，会执行catch代码段，并截获到错误信息
finally不管是否有错误，都会执行

debugger

直接跳转到断点调试中程序员用于测试找bug
在这里插入图片描述

处理 this

this 指向

普通函数的方式就定了this的值，谁调用this的值指向谁（普通函数没有明确调用者时this值为window，严格模式下没有调用者时this的值为undefined）
‘use strict’ 严格模式
箭头函数中的this 与普通函数不同也不受调用方式的影响，事实上箭头函数中不存在this

箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this 的值和外层的this是一样的
箭头函数中的this引用就是最近作用域中的this
向外层作用域中，一层一层找this，直到有this
箭头函数不存在this ，沿用上一级的
不适用：构造函数、原型函数、字面量对象中函数，dom事件函数
适用：需要使用上层this的地方

改变this

call（）

fun.call(thisArg,arg1,arg2)
thisArg在函数运行时指定的this值
arg1,arg2 其他参数值

    const obj = {
      name: 'red',
      age: 12
    }
    function fu(x, y) {
      console.log(this);
      console.log(x + y);
    }

    fu.call(obj, 1, 3)

在这里插入图片描述

apply（）

fun.apply(thisArg,[argArray])
thisArg在函数运行时指定的this值
argArray:传递的值，必须包含在数组里面

const obj = {
      name: 'red',
      age: 12
    }
    function fn(x, y) {
      console.log(this);
      console.log(x + y);
    }

    fn.apply(obj, [1, 2])

在这里插入图片描述
可以用来求最大值
const max = Math.max.apply(Math, [44, 55, 21, 99, 41])
console.log(max); //99

bind（）

bind()方法不会调用函数，但是能改变函数内部this指向

fun.bind(thisArg,arg1,arg2)

防抖

单位时间内，频繁触发事件，只执行最后一次

lodash提供的防抖
_.debounce(func,[wait=0],[options=])
手写防抖函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      box.innerHTML = i++
    }


    // 手写防抖函数
    // 核心是利用settimeout定时器来实现的
    // 1.声明定时器变量
    // 2.每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器
    // 3. 如果没有定时器，则开启定时器，存入到定时器变量里面
    // 4.定时器里面写函数调用

    function debounce(fn, t) {
      let timer
      return function () {
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () {
          fn()
        }, t)
      }
    }
    box.addEventListener('mousemove', debounce(mouseMove, 500))


  </script>
</body>


</html>

节流

单位时间内，频繁触发事件，只执行一次

losdash 提供节流 _.throttle()

手写节流


    function throttle(fn, t) {
      let timer = null
      return function () {
        if (!timer) {
          timer = setTimeout(function () {
            fn()
            timer = null
          }, t)
        }
      }
    }

    box.addEventListener('mousemove', throttle(mouseMove, 500))