【Promise】准备知识-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45980065/article/details/143578396

文章目录

1 实例对象与函数对象
2 回调函数的分类
- 2.1 同步回调
- 2.2 异步回调
3 JS的error处理

1 实例对象与函数对象

实例对象：new 函数产生的对象，称为实例对象，简称为对象。
函数对象：将函数作为对象使用时，简称为函数对。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>01_准备_函数对象与实例对象</title>
</head>
<body>

  <script>
    /* 
    1. 函数对象与实例对象
      函数对象: 将函数作为对象使用时, 简称为函数对象
      实例对象: new 函数产生的对象, 简称为对象
    */

    function Fn(){ // Fn函数

    }
    const fn = new Fn(); // Fn是构造函数，fn是实例对象（简称为对象）
    console.log(Fn.prototype); // Fn是函数对象，()括号左边是函数，.点的左边是对象
    Fn.bind({}); // 函数对象才有bind()，在Function的原型上
    Fn.call({}); // Fn是函数对象
    $('#test'); //$：jQuery函数
    $.get('/test'); // $：jQuery函数对象，调用$函数对象的get方法

    function Person(params){
      
    }

  </script>
</body>
</html>

2 回调函数的分类

2.1 同步回调

理解：立即执行，完全执行完了才结束，不会放入回调队列中。
例子：数组遍历相关的回调函数 / Promise 的 excutor 函数。

2.2 异步回调

理解：不会立即执行，会放入回调队列中将来执行。
例子：定时器回调 / ajax 回调 / Promise 的成功|失败的回调。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>02_准备_回调函数的分类</title>
</head>
<body>
  <script>
    /* 
    1). 同步回调: （回调函数：自己定义的函数、不自己调用最终也应该执行）
      理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
      例子: 数组遍历相关的回调函数 / Promise的excutor函数
    2). 异步回调: 
      理解: 不会立即执行, 会放入回调队列中将来执行
      例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调
    */

    //1. 同步回调函数
    const arr = [1, 3, 5];
    arr.forEach(item => { // 同步回调函数，执行完了forEach才能结束，不会放入队列，一上来就要执行完
      //遍历的回调函数
      console.log(item); // 先执行
    });
    console.log('forEach()之后'); // 后执行

    //2. 异步回调函数
    setTimeout(() => { // 异步回调函数，会放入队列中将来执行
      console.log('timeout callback()'); // 后执行
    }, 0);
    console.log('setTimeout()之后'); // 先执行

  </script>
</body>
</html>

3 JS的error处理

3.1 错误类型

Error：所有错误的父类型。
ReferenceError：引用的变量不存在。
TypeError：数据类型不正确的错误。
RangeError：数据值不在其所允许的范围内。
SyntaxError：语法错误。

3.2 错误处理

捕获错误：try … catch。
抛出错误：throw error。

3.3 error对象的结构

message 属性：错误相关信息。
stack 属性：函数调用栈记录信息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JS的error处理</title>
</head>
<body>

<script>
  /* 
  目标: 进一步理解JS中的错误(Error)和错误处理
    mdn文档: https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error

    1. 错误的类型
        Error: 所有错误的父类型
        ReferenceError: 引用的变量不存在
        TypeError: 数据类型不正确的错误
        RangeError: 数据值不在其所允许的范围内
        SyntaxError: 语法错误
    2. 错误处理
        捕获错误: try ... catch
        抛出错误: throw error
    3. 错误对象
        message属性: 错误相关信息
        stack属性: 函数调用栈记录信息
  */

  //1. 常见的内置错误
  //1) ReferenceError: 引用的变量不存在
  console.log(a); // a未定义，ReferenceError: a in not defined
  console.log('------'); // 没有捕获error，下面的代码不会执行

  //2) TypeError: 数据类型不正确的错误
  let b = null;
  console.log(b.xxx); // TypeError: Cannot read property 'xxx' of null

  let b = {};
  b.xxx() // 不是一个函数，TypeError: b.xxx is not a function

  //3) RangeError: 数据值不在其所允许的范围内
  function fn(){ // RangeError: Maximum call stack size exceeded
    fn(); // 递归调用
  }
  fn();

  //4) SyntaxError: 语法错误
  const c = """"; // SyntaxError: unexpected string

  //2. 错误处理
  //捕获错误: try ... catch
  try {
    let d;
    console.log(d.xxx);
  } catch (error) { //error对象中有两个属性：message、stack
    console.log(error.message);
    console.log(error.stack);
  }
  console.log('出错之后'); // 可以执行，因为错误被捕获处理了

  //抛出错误: throw error
  function something(){
    if(Date.now() % 2 === 1){
      console.log('当前时间为奇数，可以执行任务');
    }else{ // 抛出异常，由调用者处理
      throw new Error('当前时间为偶数，无法执行任务');
    }
  }

  //捕获处理异常
  try {
    something();
  } catch (error) {
    alert(error.message);
  }
  
</script>
</body>
</html>