目录
ES5和ES6的继承方式 一个拖拽效果,理清继承!
链接
若是对于构造函数,和class类不清晰的时候,无妨看看这一篇基础文章
链接: link.
ES6继承
- 原理:
- 01:使用extends去继承父类
- 02:假如父类有构造函数,则需要使用super去继承这个父类的构造函数!
需求:使用ES6继承的方式,来实现子类继承父类的拖拽效果,并且自己自带边界判断(父类没有边界判断)!
class Drag {
constructor(selector) {
this.ele = document.querySelector(selector)
this.bindEvent();
}
bindEvent() {
let self = this;
document.onmousedown = function (evt) {
let e = evt || event
let {
offsetX: x,
offsetY: y
} = e
document.onmousemove = function (evt) {
let e = evt || event;
self.eleMove(e.clientX - x, e.clientY - y);
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
eleMove(x, y) {
this.ele.style.left = x + "px";
this.ele.style.top = y + "px";
}
}
// new Drag("#box")
class sonDrag extends Drag { //01:使用extends去继承父类
constructor(selector) {
super(selector) // 02:假如父类有构造函数,则需要使用super去继承这个父类的构造函数!
}
eleMove(x, y) {
// console.log(innerWidth, innerHeight); console.log(this.ele.offsetWidth);
//最小值的判断
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
//最大值的判断
x = x > innerWidth - this.ele.offsetWidth ? innerWidth - this.ele.offsetWidth : x;
y = y > innerHeight - this.ele.offsetHeight ? innerHeight - this.ele.offsetHeight : y;
this.ele.style.left = x + "px";
this.ele.style.top = y + "px";
}
}
const son = new sonDrag("#box");
ES继承的方式1 => 使用强制改变this指向结合for in 遍历方式:
原理:
- 01:在son的构造函数之内,调用父构造函数,前行改变this的指向到son
- 02:假如父构造函数存在原型方法,那么需要继承这个父构造函数的原型对象 => 通过for in 遍历原型对象,给son的原型对象
也就是说,遍历到父构造函数的方法,然后在赋值给子构造函数,于是达到继承的效果!
需求:使用ES5继承的方式,来实现子类继承父类的拖拽效果,并且自己自带边界判断(父类没有边界判断)!
function Drag(selector) {
this.ele = document.querySelector(selector)
this.bindEvent();
}
Drag.prototype.bindEvent = function () {
let self = this;
document.onmousedown = function (evt) {
let e = evt || event
let {
offsetX: x,
offsetY: y
} = e
document.onmousemove = function (evt) {
let e = evt || event;
self.eleMove(e.clientX - x, e.clientY - y);
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
Drag.prototype.eleMove = function (x, y) {
this.ele.style.left = x + "px";
this.ele.style.top = y + "px";
}
// new Drag("#box")
function sonDrag(selector) { //01:继承父构造函数
var son_this = this;
Drag.call(son_this, selector)
}
//02:继承父构造函数的方法
for (var key in Drag.prototype) {
sonDrag.prototype[key] = Drag.prototype[key]
}
sonDrag.prototype.eleMove = function (x, y) {
// console.log(innerWidth, innerHeight); console.log(this.ele.offsetWidth);
//最小值的判断
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
//最大值的判断
x = x > innerWidth - this.ele.offsetWidth ? innerWidth - this.ele.offsetWidth : x;
y = y > innerHeight - this.ele.offsetHeight ? innerHeight - this.ele.offsetHeight : y;
this.ele.style.left = x + "px";
this.ele.style.top = y + "px";
}
new sonDrag("#box")
ES5的继承方式2 =>把父构造函数的实例对象给与子构造函数的原型对象
- 01:在son的构造函数之内,调用父构造函数,前行改变this的指向到son
- 02:假如父构造函数存在原型方法,那么需要继承这个父构造函数的原型对象
=> 通过父构造函数的实例对象(指向的是原型对象),赋值给子构造函数的原型对象
也就是说,值构造函数得到这个函数地址后,也是指向的是父构造函数的原型对象(那么可以继承它的方法) - 需求:使用ES5继承的方式,来实现子类继承父类的拖拽效果,并且自己自带边界判断(父类没有边界判断)!
function Drag(selector) {
this.ele = document.querySelector(selector)
this.bindEvent();
}
Drag.prototype.bindEvent = function () {
let self = this;
document.onmousedown = function (evt) {
let e = evt || event
let {
offsetX: x,
offsetY: y
} = e
document.onmousemove = function (evt) {
let e = evt || event;
self.eleMove(e.clientX - x, e.clientY - y);
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
Drag.prototype.eleMove = function (x, y) {
this.ele.style.left = x + "px";
this.ele.style.top = y + "px";
}
// new Drag("#box")
function sonDrag(selector) { //01:继承父构造函数
var son_this = this;
Drag.call(son_this, selector)
}
sonDrag.prototype = new Drag("#box");
sonDrag.prototype.eleMove = function (x, y) {
// console.log(innerWidth, innerHeight); console.log(this.ele.offsetWidth);
//最小值的判断
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
//最大值的判断
x = x > innerWidth - this.ele.offsetWidth ? innerWidth - this.ele.offsetWidth : x;
y = y > innerHeight - this.ele.offsetHeight ? innerHeight - this.ele.offsetHeight : y;
this.ele.style.left = x + "px";
this.ele.style.top = y + "px";
}
new sonDrag("#box")