7、class的继承—ES6学习笔记

最新推荐文章于 2022-04-30 23:38:35 发布

xyphf_和派孔明

最新推荐文章于 2022-04-30 23:38:35 发布

阅读量541

点赞数

分类专栏： ECMAScript 6学习笔记

本文链接：https://blog.csdn.net/xyphf/article/details/77919612

版权

ECMAScript 6学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

extends、 static、 super

在ES6中extends关键字,可以很方便的实现子类继承父类，同时static关键字可以为类指定静态方法，以及super关键字可以在子类继承父类的时候，方便的去调用父类原型身上的方法或者静态方法。

本节我们将通过具体的例子来阐述着三个关键字如何使用?

首先我们在html中写了一个简单的canvas画布以及一些简单的样式阴影，这样我们可以很方便的看到这个画布在文档中的位置。
index.html

<!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></title>
  <style>
    canvas {
      box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="./js/bundle.js"></script>
</body>
</html>

如图所示：

需求：
我们要写一个小球的类，通过实例化这个小球，将小球绘制在画布当中。
并且让小球做一个自由落体的运动。

// 1、获取这个画布
const canvas = document.querySelector('#canvas');
// 2、获取一下这个画布对应的绘图环境
const ctx = canvas.getContext('2d');

// 3、初始化两个常量,来指定这个画布的分辨率
const w = canvas.width = 600;
const h = canvas.height = 400;

// 4、现在我们通过class关键字声明一个Ball小球的类
class Ball {
  /* 5、首先指定一下它的构造函数constructor,
  同时化初始化三个参数x,y,r,分别对应小球的横坐标、纵坐标、以及小球的半径 */
  constructor(x, y, r){
    this.x = x;
    this.y = y;
    this.r = r;
    /* 6、接下来再给小球添加一个color属性,让它随机的等于一个rgb值
          这里需要用到一个产生随机数的方法,但是这个方法和绘制小球实际上并没有太多的关系,
          所有我们把这个方法写成Ball类的静态方法,转至第7步
      10、 接下来我们做一下字符串的拼接,这里我就使用Ball类下面的rpFn()函数获取随机数
           使用两个~~号去掉小数部分,
    */
    this.color = `rgb(${~~Ball.rpFn([55, 255])}, ${~~Ball.rpFn([55, 255])}, ${~~Ball.rpFn([55, 255])})`;
    // 11、最后我们return this,这样方便在实例化的时候调到其它的方法
    return this;
  }
  /* 12、 为了让小球绘制到画布当中，我们在写一个render方法
          render方法接收一个参数,就是绘图的环境ctx
  */
  render(ctx){
    // 13、首先保存一下绘图环境
    ctx.save();
    // 14、绘制小球的坐标
    ctx.translate(this.x, this.y);
    // 15、指定一下小球的填充颜色
    ctx.fillStyle = this.color;
    // 16、起始一个新的路径
    ctx.beginPath();
    // 17、绘制小球的路径
    ctx.arc(0, 0, this.r, 0, 2*Math.PI);
    // 18、给小球填充颜色
    ctx.fill();
    // 19、恢复一下绘图环境
    ctx.restore();
    // 20、返回teturn this
    return this;
  }
  /* 7、如何指定静态方法 前面我们已经提了，使用static关键字
     这里只需要写上static,然后跟上方法的名字就可以了,这里叫rpFn
     给它接收一个参数数组
     使用它的时候,如：Ball.rpFn([1, 10])，那么它就可以返回一个1-10之间的随机数
  */
  static rpFn(arr){ // Ball.rpFn([1, 10])
    // 8、 接下来我们就来实现这个函数,首先声明两个变量
    // 获取到这个数组的最大值和最小值,使用...作为扩展运算符
    let max = Math.max(...arr),
        min = Math.min(...arr);
    // 9、返回一组固定区间的随机数 ,这样我们获取随机数的函数就写好了
    return Math.random() * (max - min) + min;
  }
}

/*
  21、声明一个变量,实例测试一下
  在坐标100,100的位置，绘制一个半径为30的小球
  此时我们发现一个小球就绘制在画布当中了
*/
// const ball1 = new Ball(100, 100, 30).render(ctx);

/*
  22、接下来我任然绘制一个小球在画布当中，并且让它做一个自由落体的运动。
      那么我们可以肯定接下来绘制的这个小球依然有Ball所有的属性以及绘制
      的render方法。

     我们声明一个新的类,起名叫SuperBall,它可以先去继承Ball的类,
     把它的属性和方法继承过来
*/
//    子类      继承    父类
class SuperBall extends Ball {
  // 23、此处如果什么都不写，相当于复制了一个Ball类
  // 24、接下来我们就给SuperBall指定一些它自己的属性和方法
  // 首先写上它的构造函数constructor,这里面依然需要传入x,y,r三个参数
  constructor(x, y, r){
    /*
    25、我们首先要继承x,y,r三个属性,
    我们去调用一下父类的构造函数,发现报错了

    */
    // Ball.call(this, x, y, r); 
    // 报错 找不到this,实际上通过class定义的类在ES6中它是不允许通过函数的方式去调用的,
    // 也就是说这种写法本身就是错的
    // this.color = 'red';

    /*
      26、那么如何在子类中调用父类的构造函数呢?
      在ES6当中提供了一个新的关键字,super
      super主要有两种用法
      第一种：就是在子类继承父类的时候，
      在子类的构造函数中可以当成一个函数去使用，
      当它当作函数去使用的时候，就相当于调用了父类的构造函数
      这里由于要继承x,y,r三个属性，所有要把这三个参数传进去
    */
    super(x, y, r); //这个时候我们就发现一个小球就绘制在相同的位置了
    /*
    27、super(x, y, r);调用完成之后,实际上就相当于子类继承了父类构造函数当中的所有的属性,
    在ES6中规定在没调用super()函数之前子类是没有自己的this的

    */
    //纵向的速度vy
    //28、也就是说当子类继承父类的时候不仅仅是继承属性，还会自动继承静态方法
    this.vy = SuperBall.rpFn([2, 4]);
    this.g = SuperBall.rpFn([0.2, 0.4]);
    this.a = 0;
    return this;
  }
  // 28、为了让小球动起来，我们再写一个move方法
  move(ctx){
    // super()在非构造函数中调用时会报错,super()只能在构造函数中调用
    // super();  // 报错

    this.y += this.vy;
    this.vy += this.g;

    let current = this.vy * -0.75;

    if(this.y + this.r >= ctx.canvas.height){
      this.y = ctx.canvas.height - this.r;

      if(Math.abs(current - this.a) < 0.01) return false;

      this.a = this.vy *= -0.75; 
    }
    // 29、清除整个画布大小
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    // 30、将绘图打印出来，这里render不是当作函数调用
    // super的第二种使用情况：
    // 如果在原型的方法里使用super,它实际上指向的是父类的原型对象
    super.render(ctx);

    return true;
  }
};

// 我们发现一个小球就绘制在了相同的位置了
// const ball1 = new SuperBall(100, 100, 30).render(ctx);

/*
我们想鼠标点击哪里,哪里就出现一个小球，并且呈现自由落体运动
*/
let ball, timer;

canvas.onclick = function (e){
  // 31、获取点击画布的鼠标坐标
  let x = e.offsetX, y = e.offsetY;
  // 通过Ball的静态方法来指定一个随机的半径
  let r = ~~Ball.rpFn([25, 55]);

  //33、为了每次点击值产生一个小球，故每次点击之前最画布进行一次清除
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  // 32、接受一个实例对象
  ball = new SuperBall(x, y, r).render(ctx);
  // 33、调用一下小球掉下来的方法
  ballMove();
}

function ballMove(){
  // 34、用timer变量接收一下动画帧的返回值
  timer = window.requestAnimationFrame(ballMove);
  //35、如果ball.move(ctx)返回了一个false
  //就清除这个动画帧
  if(!ball.move(ctx)){
    window.cancelAnimationFrame(timer);
  }
}

我们做一下简单的总结回顾：
首先在Ball这个类中，我们通过static关键字来指定了一个镜静态方法，静态方法实际上就是挂载到类身上的方法,
接下来我们实现了用extends，用子类去继承父类，并且想给子类去指定一些额外的属性,首先需要通过super关键字调用一下父类的构造函数,这里面想继承那些属性就要把哪些属性当参数传到方法上,
接下来在子类的原型方法当中,如果是super()当作一个函数去调用的时候,就会报错，
此外，在构造函数当中在没使用super()之前是拿不到this 对象的，必须先调用super()才能调用子类的this对象。
接下来在原型的方法当中还有第二种情况,super可以当作一个对象去调用，它实际上指向的是父类原型的对象，并且在调用父类原型身上的方法的时候,会自动的绑定子类的this

子类继承父类使用extends 关键字
为父类指定静态方法,使用 static 方法名字
super
- 在构造函数中可以当做一个函数来使用,相当于调用父类的构造函数
- 在原型方法中,可以当一个对象类使用,相当于父类的原型对象,并且会自动绑定this到子类上