class 的继承和使用。
　　　　子类继承父类，使用extends关键字。
　　　　为父类知道那个静态方法，使用 static方法名字
super：
　　　　在构造函数中，可以当一个函数来使用，相当于调用父类的构造函数。
　　　　在原型方法中，可以当一个对象来使用，相当于父类的原型对象。并且会自动绑定this到子类

　　

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">

　　const canvas = document.querySelector("#canvas");
　　const ctx = canvas.getContext("2d");

　　const w = canvas.width = 600;
　　const h = canvas.height = 400;

　　class Ball {
　　constructor(x, y, r) {
　　　　this.x = x;
　　　　this.y = y;
　　　　this.r = r;
　　　　this.color = `rgb(${Ball.rnFn([55, 255])}，rgb(${Ball.rnFn([55, 255])}
　　　　rgb(${Ball.rnFn([55, 255])}) `;
　　　　return this;
　　}
　　render(ctx) {
　　　　ctx.save();
　　　　ctx.translate(this.x, this.y);
　　　　ctx.fillstyle = this.color;
　　　　ctx.beginPath();
　　　　ctx.arc(0, 0, this.r, 0, 2 * Math.PI);
　　　　ctx.fill();
　　　　ctx.restroe();
　　　　return this;
　　}

　　static rnFn(arr) {
　　　　let max = Math.max(...arr),
　　　　min = Math.min(...arr);
　　　　return Math.random() * (max - min) + min;
　　　　}
　　}

　　const ball1 = new Ball(100, 100, 30).render(ctx);

　　class SuperBall extends Ball {
　　　　constructor(x, y, r) {
　　　　super(x, y, r);
　　　　this.vy = SuperBall.rnFn([2, 4]);
　　　　this.g = SuperBall.rnFn([0.2, 0.4]);
　　　　return this;
　　}
　　move(ctx) {
　　　　this.y += this.vy;
　　　　this.vy += this.g;
　　　　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;
　　}

　　ctx.clearRect(0, 0, ctx.canvas.width, crx.canvas.height);
　　super.render(ctx);

　　return true;
　　}
}

const ball2 = new SuperBall(100, 100, 30).render(ctx);

canvas.onclick = function (e) {
　　let x = e.offsetX, y = e.offsetY;
　　let r = ~~Ball.rnFn([25, 55]);
　　ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
　　ball = new SuperBall(x, y, r).render(ctx);

　　ballMove();
}
function ballMove() {
　　timer = window.requestAnimationFrame(ballMove);

　　if (!ball2.move(ctx)) {
　　　　window.cancelAnimationFrame(timer);
　　}
}
</script>

<style>
canvas {
box-shadow:2px 2px 12px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

以上 是关于Class继承的一个小例子。

ES6——Class的继承的更多相关文章

  1. ES5和ES6中的继承 图解

    Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...

  2. ES6 class的继承使用细节

    ES6 class的继承与java的继承大同小异,如果学过java的话应该很容易理解,都是通过extends关键字继承. class Animal{ constructor(color){ this. ...

  3. 深入解析ES6 更易于继承的类语法的使用

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

  4. ES5和ES6中的继承

    看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: function Super( ...

  5. es5继承和es6类和继承

    es6新增关键字class,代表类,其实相当于代替了es5的构造函数 通过构造函数可以创建一个对象实例,那么通过class也可以创建一个对象实列 /* es5 创建一个person 构造函数 */ f ...

  6. 前端面试之ES6中的继承！

    前端面试之ES6中的继承! ES6之前并没有给我们提供 extends继承.我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承. 1 call() 两个作用: 1 调用这个函数! 2 修改函数 ...

  7. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  8. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  9. 04面向对象编程-02-原型继承 和 ES6的class继承

    1.原型继承 在上一篇中,我们提到,JS中原型继承的本质,实际上就是 "将构造函数的原型对象,指向由另一个构造函数创建的实例". 这里,我们就原型继承的概念,再进行详细的理解.首先 ...

  10. ES5与ES6中的继承

    ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam' ...

随机推荐

  1. linux centos 6.1 安装 redis

    1, yum install redis 检测是否有redis 2,没有的话就运行:yum install epel-release 3,再执行 yum install redis

  2. Excel2013复制内容粘贴到刷选的数据表中

    如何将复制内容粘贴到筛选后表格中: 1.需要一个表格:我要把这个表格里姓名列不包含A的项改为另外一个表中的数据列: 2.在姓名右侧插入两列,列A.列B: 3.在列A下第一格输入1,向下序列填充: 4. ...

  3. 清除MAC 可清除空间

    一.首先:查到了官方解释 https://support.apple.com/zh-cn/HT202867官方说 在 macOS Sierra 中,当您打开优化 Mac 储存空间时,会显示“可清除”内 ...

  4. 关于phpmailer邮件发送

    今天有个需求,要把phpmailer集成到框架里面 所以我去官方下载了 phpmail5.2.6 地址在 https://github.com/PHPMailer/PHPMailer/releases ...

  5. php自动生成mysql的触发代码。

    如果公司里有上百个表要做触发器,如果手动写代码的话.很累,所以今天写了一个小程序, <?php $dbname = 'test';//数据库 $tab1 = 'user'; //执行的表 $ta ...

  6. Xcode 中设置部分文件ARC支持

    ARC是什么 ARC是iOS 5推出的新功能,全称叫 ARC(Automatic Reference Counting).简单地说,就是代码中自动加入了retain/release,原先需要手动添加的 ...

  7. 在浏览器输入URL后发生了什么？

    摘录部分一:https://www.cnblogs.com/kongxy/p/4615226.html 从输入URL到浏览器显示页面发生了什么 当在浏览器地址栏输入网址,如:www.baidu.com ...

  8. 改成maven工程

    configure->convert to Maven Project

  9. 归纳整理Linux下C语言常用的库函数----文件操作

    在没有IDE的时候,记住一些常用的库函数的函数名.参数.基本用法及注意事项是很有必要的. 参照Linux_C_HS.chm的目录,我大致将常用的函数分为一下几类: 1. 内存及字符串控制及操作 2. ...

  10. TI davinci DM6467通过串口0将UBL和u-boot写入NAND flash

    TI的davinci系列一般支持好几种启动模式,如下图TMS320DM6467的datasheet可以查到所有的BOOTMODE LVS301和LW9226的开发板上有一个选择bootmode的拨码开 ...