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

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。