JavaScript类和继承
ES5之前：
function Person(){
this.name = 'mia';
}
Person.prototype.showName = function(){}
ES6中的类:
class Person{
constructor(name){
this.name = name;
}
showName(){
}
}
------------------------
或者 const Person = class{} //不推荐
------------------------
let a = 'strive';
let b = 'method';
class Person{
[a+b](){}
}
let p1 = new Person();
p1[a+b];
let json = {
[a+b]:'welcome';
}
注意：
1.ES6中class没有提升功能，在ES5中用函数模拟可以，默认函数提升
2.ES6里面的this比之前轻松多了
class里面取值函数(getter),存值函数(setter)
静态方法：类身上的方法
static fnName(){}
父类.fnName()
继承：ES6中非常简单：（ES6之前继承实现方式可参考文末）
class Student extends Person{
constructor(name,skill){
super(name); //一定要继承父类的构造函数
this.skill = skill;
}
showName(){
super.showName();//父类的方法执行
//TODO做子类自己的事情
}
}
例子：
类-拖拽
.box{
position:absolute;
width:100px;
height:100px;
background-color:red;
top:100px;
}
.left{
left:100px;
}
.right{
right:100px;
}
div1div2//普通拖拽--父类
class Drag{
constructor(id){
this.oDiv = document.querySelector(id);
this.disX = 0;
this.disY = 0;
this.init();
}
init(){
this.oDiv.onmousedown = function (ev) {
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = this.fnMove.bind(this);
document.oumouseup = this.fnUp.bind(this);
return false;
}.bind(this)
}
fnMove(ev){
this.oDiv.style.left = ev.clientX - this.disX + 'px';
this.oDiv.style.top = ev.clientY - this.disY + 'px';
}
fnUp(ev){
document.onmousemove = null;
document.omouseup = null;
}
}
//子类 --限制范围
class LimtDrag extends Drag{
fnMove(ev){
super.fnMove(ev)
//限制范围
if(this.oDiv.offsetLeft<=0){
this.oDiv.style.left = 0;
}
}
}
//调用
new Drag('#div1')
new LimtDrag('#div2')
ES6之前企业级继承方式实现：
var inherit = (function(){
var Buffer = function();
return function(Target, Origin){
Buffer.prototype = Origin.prototype;
Target.prototype = new Buffer();
Target.prototype.constructor = Target; //还原构造器
Target.prototype.super_class = Origin; //设置继承源
}
})();
作者：亦世
链接：https://juejin.im/post/5b724336f265da27d96ef21c
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
