ES6学习笔记（七）——异常处理与处理this（改变this指向）

一、异常处理

1.1 throw 抛异常

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

总结：

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

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

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

1.2 try/catch 捕获错误信息

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

总结：

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

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

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

        finally 不管是否有错误，都会执行

1.3 debugger

断点调试功能

二、 处理 this

2.1 处理this

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

① this指向-普通函数

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

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

② this指向-箭头函数

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

箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的

箭头函数中的this引用的就是最近作用域中的this

向外层作用域中，一层一层查找this，直到有this的定义

注意情况1：

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

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

注意情况2：

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

总结：

        1. 函数内不存在this，沿用上一级的

        2.不适用

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

        3. 适用

                需要使用上层this的地方

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

2.2 改变this

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

① call()-了解

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

语法：

        fun.call(thisArg, arg1, arg2, ...)

        thisArg：在 fun 函数运行时指定的 this 值

        arg1，arg2：传递的其他参数

        返回值就是函数的返回值，因为它就是调用函数

② apply()-理解

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

语法：

        fun.apply(thisArg, [argsArray])

        thisArg：在fun函数运行时指定的 this 值

        argsArray：传递的值，必须包含在数组里面

        返回值就是函数的返回值，因为它就是调用函数

        因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

求数组最大值2个方法：

③ bind()-重点

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

语法：

        fun.bind(thisArg, arg1, arg2, ...)

        thisArg：在 fun 函数运行时指定的 this 值

        arg1，arg2：传递的其他参数

        返回由指定的 this 值和初始化参数改造的 原函数拷贝 （新函数）

        因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的 this指向。

<button>按钮</button>
<script>
    // 有一个按钮，点击之后禁用， 两秒钟之后恢复
    const btn = document.querySelector('button')
    // btn.addEventListener('click', function() {
    //   this.disabled = true
    //   setTimeout(btnDisabled,2000)
    // })

    // function disabled() {    
    //   this.disabled = false
    // }
    // const btnDisabled = disabled.bind(btn)

    btn.addEventListener('click', function() {
      this.disabled = true
      setTimeout(function() {
        this.disabled = false
      }.bind(this), 2000)
    })
<script>

2.3 call apply bind 总结

相同点:

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

区别点:

        call 和 apply 会调用函数，并且改变函数内部this指向。

        call 和 apply 传递的参数不一样，call 传递参数 aru1，aru2..形式 apply 必须数组形式[arg]

        bind 不会调用函数，可以改变函数内部this指向.

主要应用场景:

        call 调用函数并且可以传递参数

        apply 经常跟数组有关系。比如借助于数学对象实现数组最大值最小值

        bind 不调用函数，但是还想改变this指向。比如改变定时器内部的this指向。