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. 使用GridFsTemplate在mongodb中存取文件

    spring-data-mongodb之gridfs   mongodb除了能够存储大量的数据外,还内置了一个非常好用的文件系统.基于mongodb集群的优势,GridFS当然也是分布式的,而且备份也 ...

  2. Putty使用密钥登陆SSH

    平时工作学习必须要使用Windows,在SSH远程连接软件里Putty算是用得比较顺手的,而且很小巧. 但是每次输入密码很麻烦,还容易输错,OpenSSH可以利用密钥来自动登陆,如此一来方便了不少.配 ...

  3. jQuery+SpringMVC中的复选框选择与传值

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...

  4. Git 仓库 SSH、HTTP、Gitweb (Nginx) 乱炖

    简介: 自己搭建 Git 仓库,实现 SSH 协议.配合 Nginx 实现 HTTP 协议拉取.推送代码. 利用 Nginx 实现 Gitweb 在线浏览代码,使用 Gitweb-theme 更新默认 ...

  5. XML解析的二种方法之Sax解析

    package com.huawei.xml; import java.io.InputStream;import java.util.Stack; import javax.xml.parsers. ...

  6. Dirichlet Process

    http://www.cnblogs.com/zhangbojiangfeng/p/5962039.html [各种函数推导]

  7. C++中public、protected以及private的使用

    相比C语言,C++中通过class/struct来定义既包含数据,又包含行为的结构,从而支持了“对象”.现实世界中,一个人(一个对象)通常 拥有一些资产(数据),并且掌握某些技能(行为),并且这些资产 ...

  8. CloudStack 全局参数设置

    mem.overprovisioning.factor 内存超分参数 cpu.overprovisioning.factor cpu超分参数

  9. 22-python爬虫解决gbk乱码问题

    转载自: python爬虫解决gbk乱码问题   今天尝试了下爬虫,爬取一本小说,忘语的凡人修仙仙界篇,当然这样不好,大家要支持正版. 爬取过程中是老套路,先获取网页源代码 # -*- coding: ...

  10. Golang基本结构之练习(day2)

    笔记: . 任何一个代码文件隶属于一个包 . import 关键字,引用其他包: import(“fmt”) import(“os”) 通常习惯写成: import ( “fmt” “os” ) . ...