JavaScript 进阶 - 高阶技巧

深入this学习，知道如何判断this指向和改变this指向

知道在JS中如何处理异常，学习深浅拷贝，理解递归

深浅拷贝

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

直接复制对象

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

  <script>
        const obj = {
            uname: 'Jasmine',
            age: 18
        }
        const o = obj
        console.log(o) //{uname: 'Jasmine', age: 18}
        o.age = 20
        console.log(o) //{uname: 'Jasmine', age: 20}
        console.log(obj) //{uname: 'Jasmine', age: 20}
    
// 直接复制对象，复制的是地址，如果更改对象内的属性值，则都改变
  </script>

浅拷贝

浅拷贝：拷贝的是地址

常见方法：

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

<script>
     const obj = {
         uname: 'Jasmine',
         age: 18,
         family: {
            baby: '大J'
         }
     }
     //【拷贝对象 展开运算符{...obj}】
     const o = { ...obj }
     console.log(o)  //{uname: 'Jasmine', age: 18, family: {baby: '大J'}}
     o.age = 20
     console.log(o)  //{uname: 'Jasmine', age: 20, family: {baby: '大J'}}
     console.log(obj) //{uname: 'Jasmine', age: 18, family: {baby: '大J'}}
     
     //【拷贝对象 Object.assign()】
     const o = {}
     Object.assign(o, obj)
     o.age = 20
     o.family.baby = '小J'
     console.log(o) //{uname: 'Jasmine', age: 20, family: {baby: '小J'}}
     // 浅层的属性没有改变，深层的方法会改变
    console.log(obj) //{uname: 'Jasmine', age: 18, family: {baby: '小J'}}
</script>

拷贝对象之后，里面的属性值是简单数据类型直接拷贝值

如果属性值是引用数据类型则拷贝的是地址

直接复制和浅拷贝的区别

直接赋值 : 只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址

浅拷贝 : 如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响

深拷贝

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

常见方法：

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

递归实现深拷贝

函数递归：

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

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

  <script>
    //【递归函数】
        let i = 1
        function fn() {
            console.log(`这是第${i}次`)
            if (i >= 6) {
                return
            }
            i++
            fn()
        }
        fn()
  </script>

例子-函数递归

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

页面每隔一秒输出当前的时间
输出当前时间可以使用：new Date().toLocaleString()

  <script>
        function getTime(){
            document.querySelector('div').innerHTML = new Date().toLocaleString()
            setTimeout(getTime,1000)
        }
        getTime()
  </script>

通过递归函数实现深拷贝

<script>
        const obj = {
            uname: 'Jasmine',
            age: 18,
            hobby: ['跑步', '健身'],
            family: {
                baby: '佩奇'
            }
        }
        const o = {}
        // 拷贝函数
        function deepCopy(newObj,oldObj){
            for(let k in oldObj){
                // 处理数组的问题，一定要先写数组，再写对象，不能颠倒
                if(oldObj[k] instanceof Array){
                    newObj[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) //{uname: 'Jasmine', age: 18, hobby: Array(['跑步', '健身']), family: Array([baby: '佩奇'])}
        o.age = 20
        o.hobby[0] = '篮球'
        o.family.baby = '乔治'
        console.log(o) //{uname: 'Jasmine', age:20, hobby: Array(['篮球', '健身']), family: {[baby: '乔治']}}
        console.log(obj) //{uname: 'Jasmine', age: 18, hobby: Array(['跑步', '健身']), family: {[baby: '佩奇']}}

</script>

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

<body>
    <script src="./lodash.min.js"></script>
    <script>
        const obj = {
            uname: 'Jasmine',
            age: 18,
            hobby: ['乒乓球', '足球'],
            family: {
                baby: '大J'
            }
        }
        const o = _.cloneDeep(obj)
        console.log(o)
        o.family.baby = '小J'
        console.log(obj)
    </script>
</body>

JSON序列化

    <script>
        const obj = {
            uname: 'Jasmine',
            age: 18,
            hobby: ['跑步', '健身'],
            family: {
                baby: '佩奇'
            }
        }
        // 把对象转换为 JSON 字符串
        // console.log(JSON.stringify(obj))
        const o = JSON.parse(JSON.stringify(obj))
        console.log(o)
        o.family.baby = '123'
        console.log(obj)
    </script>

异常处理

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

throw

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

总结：

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

<script>
  function counter(x, y) {
    if(!x || !y) {
      // throw '参数不能为空!';
      throw new Error('参数不能为空!')
    }
    return x + y
  }
  counter()
</script>

try catch 捕获异常

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

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

总结：

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

debugger

相当于断点调试

处理this

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

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

普通函数this指向

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

<script>
    ` // 普通函数：谁调用我，this就指向谁
        console.log(this)  //Window

        function fn(){
            console.log(this) //this
        }
        window.fn()

        window.setInterval(function(){
            console.log(this)  //window
        },1000)
        document.querySelector('button').addEventListener('click',function(){
            console.log(this)  //指向obj
        })
        
        const obj = {
            sayHi:function(){
                console.log(this)  //指向obj
            }
        }
        obj.sayHi()
</script>

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

箭头函数

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

箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的
箭头函数中的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

语法：fn.call(thisArg , arg1, arg2,...)

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

<script>
         const obj ={
            uname : 'pink'
        }
        function fn(x,y){
            console.log(this)  //window
            console.log( x + y )
        }
        fn(1,2) //window 3
        // 1.调用函数
        // 2.改变this指向
        fn.call(obj,1,2) //obj 3
</script>

总结：

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

apply

语法：fn.apply(thisArg , [argsArrays])

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

<script>
        const obj ={
            age : 18
        }
        function fn(x,y){
            console.log(this)
            console.log(x+y)
        }
        // 1.调用函数
        // 2.改变this指向
        // fn.apply(this指向谁，数组参数)
        fn.apply(obj,[1,2]) //3
        // 3.返回值 本身就是在调用函数，所以返回值就是函数的返回值

        // 使用场景： 求数组最大值
        // const max = Math.max(1, 2, 3)
        // console.log(max)
        const arr = [100, 44, 77]
        const max = Math.max.apply(Math, arr)
        const min = Math.min.apply(null, arr)
        console.log(max, min) //100 44
        // 使用场景： 求数组最大值
        console.log(Math.max(...arr)) //100
</script>

总结：

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

bind

语法：fn.bind(thisArg , arg1, arg2,...))

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

<script>
        const obj = {
            age: 18
        }
        function fn() {
            console.log(this)
        }
    // 1. bind 不会调用函数 
    // 2. 能改变this指向
    // 3. 返回值是个函数，  但是这个函数里面的this是更改过的obj
        const fun = fn.bind(obj)
        console.log(fun) //fn函数
        fun()  //{age: 18}
        
// 需求，有一个按钮，点击里面就禁用，2秒钟之后开启
        document.querySelector('button').addEventListener('click', function () {
        // 禁用按钮
        this.disabled = true
        window.setTimeout(function () {
            // 在这个普通函数里面，我们要this由原来的window 改为 btn
            this.disabled = false
        }.bind(this), 2000)   // 这里的this 和 btn 一样
        })
</script>

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

防抖节流

防抖

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

开发使用场景- 搜索框防抖，假设输入就可以发送请求，但是不能每次输入都去发送请求，输入比较快发送请求会比较多我们设定一个时间，假如300ms，当输入第一个字符时候，300ms后发送请求，但是在200ms的时候又输入了一个字符，则需要再等300ms 后发送请求

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

节流

节流（throttle）所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

开发使用场景- 假如一张轮播图完成切换需要300ms，不加节流效果，快速点击，则嗖嗖嗖的切换

 加上节流效果，不管快速点击多少次， 300ms时间内，只能切换一张图片。

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

      // 节流函数 throttle 
    function throttle(fn, t) {
      // 起始时间
      let startTime = 0
      return function (){
        // 得到当前的时间
        let now = Date.now()
        // 判断如果大于等于 500 采取调用函数
        if (now - startTime >= t){
          // 调用函数
          fn()
          // 起始的时间 = 现在的时间   写在调用函数的下面 
          startTime = now
        }
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 500))
    </script>
</body>

Lodash 库实现节流和防抖

<body>
    <div class="box"></div>
  <script src="./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>

节流综合案例

两个事件:

ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发
onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发

思路：

在ontimeupdate事件触发的时候，每隔1秒钟，就记录当前时间到本地存储

下次打开页面， onloadeddata 事件触发，就可以从本地存储取出时间，让视频从取出的时间播放，如果没有就默认为0s

获得当前时间 video.currentTime

JavaScript 进阶 - day4