ES6——Class的继承

Posted zyhbook

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6——Class的继承相关的知识，希望对你有一定的参考价值。

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的继承的主要内容，如果未能解决你的问题，请参考以下文章

ES6中class的实现原理

从 Babel 转译过程浅谈 ES6 实现继承的原理

ES6中的CLASS继承

ES6 浅谈class继承机制

JavaScript高级class类ES6实现继承ES6对象增强

JavaScript高级class类ES6实现继承ES6对象增强