JavaScript进阶(十二)

第三部分：JavaScript进阶

十二、深浅拷贝

12.1 浅拷贝

12.2 深拷贝

1. 通过递归实现深拷贝

2. js库lodash里面cloneDeep内部实现了深拷贝

3. 通过JSON.stringify()实现

十三、异常处理

13.1 throw抛异常

13.2 try /catch捕获异常

13.3 debugger

十四、处理this

14.1 this指向

1. 普通函数this指向

2. 箭头函数this指向

14.2 改变this

1. call() – 了解

2. apply() – 理解

3. bind() – 重点

call apply bind 总结

十五、性能优化

15.1 防抖

15.2 节流

十六、节流综合案例

案例-页面打开，可以记录上一次的视频播放位置

十二、深浅拷贝

开发中我们经常需要复制一个对象。如果直接用赋值会有下面问题：

图片[1] - JavaScript进阶(十二) - 宋马

12.1 浅拷贝

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

浅拷贝：拷贝的是地址常见方法

常见方法：

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

总结：

1. 直接赋值和浅拷贝有什么区别?

直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址
浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响

2. 浅拷贝怎么理解?

拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
如果属性值是引用数据类型则拷贝的是地址

12.2 深拷贝

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

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

常见方法：

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

1. 通过递归实现深拷贝

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

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

练习-利用递归函数实现setTimeout模拟setInterval效果

需求：
①页面每隔-秒输出当前的时间
②输出当前时间可以使用：new Date().toLocaleString()

图片[2] - JavaScript进阶(十二) - 宋马

通过递归函数实现深拷贝(简版)：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<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>

</html>

2. js库lodash里面cloneDeep内部实现了深拷贝

Lodash网址：Lodash 简介 | Lodash中文文档 | Lodash中文网

图片[3] - JavaScript进阶(十二) - 宋马

3. 通过JSON.stringify()实现

总结：

1. 实现深拷贝三种方式?

自己利用递归函数书写深拷贝
利用js库lodash里面的 _.cloneDeep()
利用JSON字符串转换

十三、异常处理

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

13.1 throw抛异常

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

图片[5] - JavaScript进阶(十二) - 宋马

总结：

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

总结：

1. 抛出异常我们用那个关键字?它会终止程序吗?

throw 关键字
会中止程序

2. 抛出异常经常和谁配合使用?

Error对象配合throw使用

13.2 try /catch捕获异常

我们可以通过 try/catch 捕获错误信息(浏览器提供的错误信息) try 试试catch 拦住finally 最后

图片[6] - JavaScript进阶(十二) - 宋马

总结：

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

总结：

1. 捕获异常我们用那3个关键字?可能会出现的错误代码写到谁里面

try catch finally
try

2. 怎么调用错误信息?

利用 catch 的参数

13.3 debugger

图片[7] - JavaScript进阶(十二) - 宋马

十四、处理this

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

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

14.1 this指向

1. 普通函数this指向

目标：能说出普通函数的this指向

普通函数的调用方式决定了this 的值，即【谁调用this的值指向谁】

图片[8] - JavaScript进阶(十二) - 宋马

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

图片[9] - JavaScript进阶(十二) - 宋马

总结：

1. 普通函数this指向我们怎么记忆?

【谁调用this的值指向谁】

2. 普通函数严格模式下指向谁?

严格模式下指向undefined

2. 箭头函数this指向

目标：能说出箭头函数的this指向

箭头函数中的this与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在this !

箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的
箭头函数中的this引用的就是最近作用域中的this
向外层作用域中，一层一层查找this，直到有this的定义

注意情况1：

在开发中【使用箭头函数前需要考虑函数中this的值】，事件回调函数使用箭头函数时，this为全局的window

因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数

图片[10] - JavaScript进阶(十二) - 宋马

注意情况2：同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数

图片[11] - JavaScript进阶(十二) - 宋马

总结：

1. 函数内不存在this,沿用上一级的
2. 不适用

构造函数，原型函数，dom事件函数等等

3. 适用

需要使用上层this的地方

4. 使用正确的话，它会在很多地方带来方便，后面我们会大量使用慢慢体会

14.2 改变this

JavaScript中还允许指定函数中this的指向，有3个方法可以动态指定普通函数中this的指向

call()
apply()
bind()

1. call() – 了解

使用call方法调用函数，同时指定被调用函数中this的值

语法：

图片[12] - JavaScript进阶(十二) - 宋马

thisArg：在fun函数运行时指定的this值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数

2. apply() – 理解

使用apply方法调用函数，同时指定被调用函数中 this 的值

语法：

图片[13] - JavaScript进阶(十二) - 宋马

thisArg：在fun函数运行时指定的this值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此apply主要跟数组有关系，比如使用Math.max()求数组的最大值

利用 apply() 求数组最大值2个方法：

总结：

1. call和apply的区别是?

都是调用函数，都能改变this指向
参数不一样，apply传递的必须是数组

3. bind() – 重点

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

语法：

图片[15] - JavaScript进阶(十二) - 宋马

thisArg：在fun函数运行时指定的this值
arg1，arg2：传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝(新函数)
因此当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用bind,比如改变定时器内部的this指向

call apply bind 总结

相同点：

都可以改变函数内部的this指向.

区别点：

call和apply会调用函数，并且改变函数内部this指向.
call和apply传递的参数不一样，call 传递参数aru1，aru2..形式 apply 必须数组形式[arg]
bind不会调用函数，可以改变函数内部this指向

主要应用场景：

call调用函数并且可以传递参数
apply经常跟数组有关系.比如借助于数学对象实现数组最大值最小值
bind不调用函数，但是还想改变this指向.比如改变定时器内部的this指向.

十五、性能优化

15.1 防抖

防抖(debounce)：单位时间内，频繁触发事件，只执行最后一次

举个栗子：王者荣耀回城，只要被打断就需要重新来

使用场景：

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测

开发使用场景-搜索框防抖

假设输入就可以发送请求，但是不能每次输入都去发送请求，输入比较快发送请求会比较多

我们设定一个时间，假如300ms，当输入第-一个字符时候，300ms后发送请求，但是在200ms的时候又输入了一个字符，则需要再等300ms后发送请求

案例-利用防抖来处理-鼠标滑过盒子显示文字

要求：鼠标在盒子上移动，鼠标停止之后，500ms后里面的数字就会变化+1

图片[16] - JavaScript进阶(十二) - 宋马

实现方式：

lodash提供的防抖来处理
手写一个防抖函数来处理

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

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

<body>
    <div class="box"></div>
    <script src="./js/lodash.min.js"></script>
    <script>
        //利用防抖实现性能优化
        //需求:鼠标在盒子上移动，里面的数字就会变化+ 1
        const box = document.querySelector(".box");
        let i = 1;

        function mouseMove() {
            box.innerHTML = i++;
            //如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
        }
        // 添加事件
        // box.addEventListener( 'mousemove', mouseMove )
        //利用Lodash库实现防抖- 500毫秒之后采取+1
        // 语法:_.debounce(fun, 时间)
        box.addEventListener("mousemove", _.debounce(mouseMove, 500));
    </script>
</body>

</html>

(手写防抖函数)核心思路：

防抖的核心就是利用定时器(setTimeout)来实现
①声明一个定时器变量
②当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
③如果没有定时器则开启定时器，记得存到变量里面
④在定时器里面调用要执行的函数

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      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
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }
    // 防抖函数
    function debounce(fn, t) {
      let timeId
      return function () {
        // 如果有定时器就清除
        if (timeId) clearTimeout(timeId)
        // 开启定时器 200
        timeId = setTimeout(function () {
          fn()
        }, t)
      }
    }
    // box.addEventListener('mousemove', mouseMove)
    box.addEventListener('mousemove', debounce(mouseMove, 200))

  </script>
</body>

</html>

15.2 节流

节流(throttle)：单位时间内，频繁触发事件，只执行一次

图片[17] - JavaScript进阶(十二) - 宋马

只有等到了上一个人做完核酸，整个动作完成了，第二个人才能排队跟上

举个栗子：

王者荣耀技能冷却，期间无法继续释放技能
和平精英98k 换子弹期间不能射击

开发使用场景-小米轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动就可以加节流

假如一张轮播图完成切换需要300ms，不加节流效果，快速点击，则嗖嗖嗖的切换
加上节流效果，不管快速点击多少次，300ms时间内，只能切换一张图片。

案例：利用节流来处理-鼠标滑过盒子显示文字

要求：鼠标在盒子上移动，里面的数字就会变化+1

图片[18] - JavaScript进阶(十二) - 宋马

①如果以前方式，每次鼠标移动就会有大量操作，触发频次太高

图片[19] - JavaScript进阶(十二) - 宋马

利用节流的方式，鼠标经过，500ms ，数字才显示

实现方式：

lodash提供的节流函数来处理
手写一个节流函数来处理

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

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

<body>
    <div class="box"></div>
    <script src="js/lodash.min.js"></script>
    <script>
        const box = document.querySelector(".box");
        let i = 1; // 让这个变量++
        // 鼠标移动函数
        function mouseMove() {
            box.innerHTML = ++i;
            // 如果里面存在大量操作 dom 的情况，可能会卡顿
        }

        // box.addEventListener('mousemove', mouseMove)
        // lodash 节流写法
           box.addEventListener("mousemove", _.throttle(mouseMove, 500));
        // lodash 防抖的写法
        // box.addEventListener('mousemove', _.debounce(mouseMove, 500))
    </script>
</body>

</html>

(手写节流函数)核心思路：

节流的核心就是利用定时器(setTimeout)来实现

①声明一个定时器变量
②当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器
③如果没有定时器则开启定时器，记得存到变量里面

定时器里面调用执行的函数
定时器里面要把定时器清空

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

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

<body>
    <div class="box"></div>
    <script src="js/lodash.min.js"></script>
    <script>
        const box = document.querySelector(".box");
        let i = 1;

        function mouseMove() {
            box.innerHTML = i++;
        }

        function throttle(fn, t) {
            let timer = null;
            return function() {
                if (!timer) {
                    timer = setTimeout(function() {
                        fn();
                        timer = null; // 这里不能用clearTimeout(timer)，原因如下图
                    }, t);
                }
            };
        }

        box.addEventListener("mousemove", throttle(mouseMove, 500));
    </script>
</body>

</html>