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. 为什么重写equals后要重写hashCode

    equals和hashCode的关系 要搞清楚题目中的问题就必须搞明白equals方法和hashCode方法分别是什么,和诞生的原因,当搞明白了这一点其实题目就不算是个问题了,下面我们来探讨分别探讨一 ...

  2. leetcode219

    public class Solution { Dictionary<int, List<int>> dic = new Dictionary<int, List< ...

  3. awk使用

    [awk使用] 例:awk -F ':' '{print $1"\t"$7}' 参考:http://www.cnblogs.com/ggjucheng/archive/2013/0 ...

  4. Python中的排序方法sort()，sorted()，argsort()等

    python 列表排序方法sort.sorted技巧篇 转自https://www.cnblogs.com/whaben/p/6495702.html,学习参考. Python list内置sort( ...

  5. vue项目 调用百度地图 BMap is not defined

    这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...

  6. 微信小程序进行地图导航使用地图功能

    之前我写过的文章当中,提过小程序的打包大小.所以特地去下载一个区域的地图的这种方法,是不存在的. 我用的导航主要使用的是应用外的导航,这篇文章可能对于非常熟悉小程序的小伙伴来说就是小case,所以只适 ...

  7. Android文件上传

    服务端: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syst ...

  8. sublime主题选择

    Sublime Text是一个强大的令人难以置信的编辑器. 它不仅具有大量的功能,而且还有很多主题,让他看起来很漂亮. 我们以前整理过 2014年的最好的主题 ; 让我们看看最新的Sublime Te ...

  9. loadrunner - 安装与破解

    最近准备学习LR,借助这个平台,将自己的学习经历记录下来,当然很多都不是原创,都是遇到问题时各种百度,然后梳理下知识是为了避免以后遇到同样的错误时,能回过头来参考参考. 下面的是转载某位大神的博客,尊 ...

  10. 2016-2017-2 20155223 实验二 《Java面向对象程序设计》

    2016-2017-2 苏黄永郦 实验二 实验报告 前期准备工作--程序安装 -问题一 开始的时候我就在老师博客的指导下安装IDEA插件JUnit Generator V2.0.当然我的IDEA肯定没 ...