9.class语法

1. 基本概念：JS语言的传统方法是通过构造函数，定义并生成新的对象，是一种基于原型的面向对象系统。这种写法跟传统的面向对象语言（比如C++和Java）差异很大，很容易让新学这门语言的人感到困惑。所以在ES6中新增加了类的概念，可以使用class 关键字声明一个类，之后以这个类来实例化对象。

2. 实例

   class Miaov {
    constructor(a, b){
      this.a = a;
      this.b = b;
      return this;
    }
    print(){
      console,log(this.a + ' ' + this.b );
    }
   };
   const miavo = new Miaov ('hello', 'world').print(); // 输出结果：hello world
   consoe.log(typeof Miaov); // 打印结果：function
   

• Miaov 中的constructor方法是构造方法，this 关键字则代表实例对象。也就是说，ES6的构造函数，对应Miaov 这个类的构造方法。

• Miaov 这个类除了构造方法，还定义了一个print 方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去就可以了。另外，方法直接不需要逗号分隔，加了会报错。

• 构造函数的 prototype属性，在ES6的类上面继续存在。而且类的所有方法都定义在类的 prototype的属性上

  “`javascript
  console.log(Miaov.prototype);
  “`

• 定义在类中的方法都是不可以枚举的。

  “`javascript
  console.log(Object.keys(Miaov.prototype));
  “`

• constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor 方法，如果没有显示定义，一个空的 constructor 方法会被默认添加。

• 生成类的实例对象的写法，与ES5完全一样，也是使用new命令。如果忘记加上new，像函数那样调用Class，将会报错。

3. 继承：

• 案例

  “`html
  
  

  
  
  
  
  

  
  
  
  
  

  “`
  </p></li>
  <li><p><strong>说明</strong>：

  <ul>
  <li>子类继承父类 使用<code>extends</code> 关键字</li>
  <li>为父类指定静态方法，使用 <code>static</code> 方法名字</li>
  <li><strong>super</strong>：

  <ul>
  <li>在构造函数中可以当做一个函数来使用，相当于调用父类的构造函数。</li>
  <li>在原型方法中，可以当做一个对象来使用，相当于父类的原型对象，并且会自动绑定this到子类上。</li>
  </ul></li>
  </ul></li>
  </ul>

  <h1>10.<code>Promise</code>对象</h1>

  <ol>
  <li><strong>基本概念</strong>：

  <ul>
  <li>是ES6中新增的异步编程解决方案，体现在代码中它是一个对象，可以通过<code>Promise</code>构造函数来实例化。</li>
  </ul></li>
  </ol>

  <ul>
  <li><code>new Promise(cb) ===> 实例的基本使用 Pending Resolved Rejected</code>

  <ul>
  <li><code>new Promise(cb)</code>的状态</li>
  <li><code>Pending(进行中) ===> Resolved(已完成)</code></li>
  <li><code>Pending(进行中) ===> Rejected(已失败)</code></li>
  </ul></li>
  </ul>

  <ol>
  <li><strong>两个原型方法</strong>:</li>
  </ol>

  <ul>
  <li><code>Promise.prototype.then()</code></p></li>
  <li><p><code>Promise.prototype.catch()</code></p></li>
  <li><p><strong>实例</strong>

  “`html
  
  

  
  
  
  
  
  

  
  
  

  “`

2. 两个常用静态方法:

• Promise.all()：可以将多个Promise实例包装成一个新的Promise实例

  • 当所有的Promise实例的状态都变成resolved , Promise.all的状态才会变成resolved，此时返回值组成一个数组，传递给then的resolve函数

  • 只要其中一个被rejected,Promise.all的状态就会被rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数

  • 实例

    function loadImg(url) {
         const p = new Promise(function (resolve, reject) { // resolve成功的回调函数, reject失败的回调函数
           const img = new Image();
           img.src = url;
           img.onload = function () {
             resolve(this);
           };
           img.onerror = function () {
             reject(new Error('图片加载失败'));
           }
         });
         return p;
       }
       const allDone = Promise.all([loadImg(imgs[0]),loadImg(imgs[1]),loadImg(imgs[2])]);
       allDone.then(function(datas){
         datas.forEach(function(item, i){
           document.body.appendChild(item);
         })
       }).catch(function(err){
         console.log(err)
       })
    

• Promise.resolve()
  • 第一种用法：参数是Promise实例，将不做任何修改，原封不动地返回这个实例

    function loadImg(url) {
         const p = new Promise(function (resolve, reject) { // resolve成功的回调函数, reject失败的回调函数
           const img = new Image();
           img.src = url;
           img.onload = function () {
             resolve(this);
           };
           img.onerror = function () {
             reject(new Error('图片加载失败'));
           }
         });
         return p;
       }
       // 参数是Promise实例，将不做任何修改，原封不动地返回这个实例
       Promise.resolve(loadImg(imgs[0])).then(function(img){
         document.body.appendChild(img);
       })
    

  • 第二种用法：将对象转化为Promise对象，然后立即执行thenable 对象的then方法

    Promise.resolve({
         then(resolve, reject){
           const img = new Image();
           img.src = imgs[1];
           img.onload = function(){
             resolve(this);
           }
         }
       }).then(function(img){
         document.body.appendChild(img);
       })
    

  • 第三种用法：参数是一个基本数据类型或者不传参数，那么返回一个状态为resolved的Promise对象

    // 传递一个基本数据类型
    Promise.resolve('fengya').then(function(str){
          console.log(str); // fengya
        })
    // 不传参数
       const p =Promise.resolve();
       console.log(p); // Promise {<resolved>: undefined}
    

    ​