• 欢迎大家分享资料!前往留言板评论即可!

ECMAScript(ES6)基本语法介绍(五)

合宙 模组资料网 5个月前 (05-15) 81次浏览 已收录 0个评论 扫描二维码

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,将会报错。

  1. 继承
  • 案例

    “`html





    Document





    “`
    </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





    Document



    “`

  1. 两个常用静态方法:
  • Promise.all():可以将多个Promise实例包装成一个新的Promise实例

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

    • 只要其中一个被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}
      


转载请注明原文链接:ECMAScript(ES6)基本语法介绍(五)
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址