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

目录

二、异常处理

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

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

总结：

1. throw 抛出异常信息，程序也会终止执行

2. throw 后面跟的是错误提示信息

3. Error 对象配合 throw 使用，能够设置更详细的错误信息

2.2 try ... catch

总结：

1. try...catch 用于捕获错误信息

2. 将预估可能发生错误的代码写在 try 代码段中

3. 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息

三、this

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

3.1 默认值

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

普通函数

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

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

箭头函数

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

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

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

this指向

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

call

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

总结：

1. call 方法能够在调用函数的同时指定 this 的值

2. 使用 call 方法调用函数时，第1个参数为 this 指定的值

3. call 方法的其余参数会依次自动传入函数做为函数的参数

apply

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

总结：

1. apply 方法能够在调用函数的同时指定 this 的值

2. 使用 apply 方法调用函数时，第1个参数为 this 指定的值

3. apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数

bind

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

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

四、防抖节流

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

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