小球运动案例重新理解Es6继承和寄生式继承
作者：互联网
首先呢，es6的继承是要比es5简单的，所以我们先吧我们之前写过的那个面向对象对象的小球，再重新拿过来 什么是继承呢，就是根据原有的方法和属性，想去创建新的对象的时候，只需要根据已有的对象去new一个新对象出来 new出来的对象具有原有类的方法和属性，不一样的地方我们再去添加他的新的属性和方法，我的理解就是这样的，那我们先来看下效果
这个小方块是根据原来的小球new出来的一个新对象，我们添加了新的属性，取消了他的圆角，通过这个例子我们来理解一下es6的继承
es5中的类和es6中的类的写法也是有区别的，这个在之前的代码中也有写过
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
class Ball {
constructor( r ) {
this._r = 25;
this.ball = null;
this.bool = false;
if ( r ) {
this.r = r;
}
}
set r( value ) {
this._r = value;
if ( !this.ball ) return;
this.ball.style.width = value * 2 + "px";
this.ball.style.height = value * 2 + "px";
this.ball.style.borderRadius = value + "px";
}
get r() {
return this._r;
}
createBall( parent ) {
if ( !this.ball ) {
this.ball = document.createElement( "div" );
this.ball.style.width = this.r * 2 + "px";
this.ball.style.height = this.r * 2 + "px";
this.ball.style.borderRadius = this.r + "px";
this.ball.style.backgroundColor = "red";
this.ball.style.position = "absolute";
this.ball.self = this;
this.ball.addEventListener( "click", this.clickHandler );
parent.appendChild( this.ball );
}
return this.ball;
}
clickHandler( e ) {
this.self.bool = !this.self.bool;
}
update() {
if ( !this.bool ) return;
this.ball.style.left = this.ball.offsetLeft + 2 + "px";
}
}
class Box extends Ball {
constructor( r ) {
super( r ); //执行超类中constructor（构造函数）
}
// override 覆盖 这里因为重写父类中createBall方法，这样就会将其覆盖
// 覆盖的目的是重写，父类的那个方法内容不再执行，而执行当前这个子类的这个方法
createBall( parent ) {
// super.方法（）就是执行父类的当前这个方法
// 通常用于我们需要在父类的该方法中加入更多语句，或者修改部分语句
let div = super.createBall( parent );
div.style.borderRadius = "0px";
return div;
}
setWH( w, h ) {
this.ball.style.width = w + "px";
this.ball.style.height = h + "px";
}
}
let b1 = new Ball( 20 );
let b2 = new Box( 30 );
b2.createBall( document.body );
b1.createBall( document.body );
b2.setWH( 50, 100 );
console.log( b2, b1 );
//动画函数，每帧执行
animation();
function animation() {
requestAnimationFrame( animation );
b1.update();
b2.update();
}
</script>
</body>
</html>
那么接下来我再重新整理出我们es5中的继承的，因为其他的继承稍微有点缺陷，这个缺陷可以自行百度，所以我们以后都是用寄生式继承来使用
<script>
function Ball(user) {
this.name=user;
console.log("aaa");
}
Ball.prototype={
a:1,
b:2,
c:function () {
this.a=10;
}
};
function extend(subClass,supClass) {
// 创建一个空类，空的构造函数
function A() {}
// 设置这个空类的原型是父类的原型，这样保证这个空类和父类一样，但是没有父类构造函数内容
// 这样就解决直接继承时调用两次构造函数的情况
A.prototype=supClass.prototype;
// 将这个与父类相似的类实例化后赋值给子类的原型，这样子类的原型就是这个空类的实例化对象
// 因此子类的原型里面就有了空类的原型下所有属性和方法
subClass.prototype=new A();
// 子类的原型指针指向子类的构造函数
subClass.prototype.constructor=subClass;
// 因为可能在子类使用到父类原型
// 设置子类的属性superClass是父类的原型对象
subClass.superClass=supClass.prototype;
// 如果父类原型的指针没有指向父类的构造函数，仍然指向的是对象
if(supClass.prototype.constructor===Object.prototype.constructor){
// 将父类的原型指针指向父类构造函数
supClass.prototype.constructor=supClass;
}
}
function Box(user) {
Ball.call(this,user);
}
extend(Box,Ball);
Box.prototype.d=function () {
};
Box.prototype.e=5;
Box.prototype.c=function () {
Box.superClass.c.call(this);
console.log(this.a);
};
/*
*
* ES5
* 1、先写extend函数
* 2、新建父类和父类所有原型属性和方法
* 3、新建子类，并且在子类的构造函数中执行 父类构造函数.call(this,参数1，参数2..)
* 4、使用extend函数，填入子类和父类，完成继承
* 5、只能使用子类.prototype.属性/方法=...设置添加新的子类方法和属性
* 不能使用 子类.prototype={...}这种添加属性方法，这样会覆盖继承的方法
* 6、覆盖父类的方法，子类.prototype.父类方法=function(){}
* 7、super父类方法，就是希望在父类的该方法执行后在添加一些新的内容
* 子类.superClass.父类方法.call(this,参数...);
* 这句写在子类覆盖父类方法中
* 8、最后就可以使用new来实例化对象了
*
*
* */
var b1=new Box("xie");
b1.c();
console.log(b1);
</script>
标签：Es6,style,ball,继承,子类,小球,prototype,父类,构造函数 来源： https://www.cnblogs.com/0811thomas/p/15876834.html