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. VCF文件导入导出

    参考资料 通讯录导入导出vcf格式文件方法可参考: https://qiaodahai.com/android-iphone-mobile-phones-contacts-import-and-exp ...

  2. 正规式->最小化DFA说明

      整体的步骤是三步: 一,先把正规式转换为NFA(非确定有穷自动机), 二,在把NFA通过"子集构造法"转化为DFA, 三,在把DFA通过"分割法"进行最小化 ...

  3. Go语言优势与劣势

    Go语言的优势: 1.脚本化的语法:开发效率高,容易上手 2.静态类型+编译型,程序运行速度有保障:静态类型+编译型语言相对于动态类型+解释型语言的效率高 3.原生的支持并发编程:降低开发.维护成本/ ...

  4. Sonar及其eclipse插件的安装 详细 http://www.importnew.com/10017.html

    参考:http://www.importnew.com/10017.html

  5. Daylight Saving Time

    ［Daylight Saving Time］ 夏时制,又称日光节约时制.日光節約時間(英语:Daylight saving time)或夏令时间(英语:Summer time),是一种为节约能源而人为 ...

  6. Rigidbody中 Angular Drag （角阻力）：

    Rigidbody中 Angular Drag  (角阻力):同样指的是空气阻力,只不过是用来阻碍物体旋转的.如果设置成无限的话,物体会立即停止旋转.如果设置成0,物体在上升过程中,会发生侧翻旋转. ...

  7. tomcat限制ip访问

    context元素添加 <Context> <Valve className="org.apache.catalina.valves.RemoteAddrValve&quo ...

  8. java 线程之对象的同步和异步

    一.多线程环境下的同步与异步 同步:A线程要请求某个资源,但是此资源正在被B线程使用中,因为同步机制存在,A线程请求不到,怎么办,A线程只能等待下去. package com.jalja.org.th ...

  9. 11-基于dev的bug(还没想通)

    十六进制转八进制 http://lx.lanqiao.cn/problem.page?gpid=T51 问题描述 给定n个十六进制正整数,输出它们对应的八进制数. 输入格式 输入的第一行为一个正整数n ...

  10. C#中DateTime的各种操作

    C#时间戳与日期互转 /// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <param name="timeSta ...