class：

類(lèi)一般包含屬性、方法。命名規(guī)范：大駝峰格式。

ES5之前的類(lèi)

ES5之前的類(lèi)

ES6類(lèi)的使用

動(dòng)態(tài)創(chuàng)建類(lèi)的方法

注意：class不存在預(yù)編譯，即提升。所以需要先定義后使用。

不建議這樣寫(xiě)，容易造成this指向混亂

class里面取值函數(shù)（getter)和存值函數(shù)(setter)。

set和get

靜態(tài)方法：

靜態(tài)方法

繼承：

ES6之前的繼承

ES6繼承extends

簡(jiǎn)單案例：（簡(jiǎn)單的拖拽）

?//?普通拖拽

????class?Durg{

??????constructor(className){

????????this.oDiv?=?document.querySelector(className);

????????this.disX?=?0;

????????this.disY?=?0;

????????this.init();

??????};

??????init(){

????????this.oDiv.onmousedown?=?function(ev){

??????????console.log(ev.clientX,ev.clientY);

??????????this.disX?=?ev.clientX?-?this.oDiv.offsetLeft;

??????????this.disY?=?ev.clientY?-?this.oDiv.offsetTop;

??????????document.onmousemove?=?this.fnMove.bind(this);

??????????document.onmouseup?=?this.fnUp.bind(this);

??????????return?false;

????????}.bind(this);

??????};

??????fnMove(ev){

????????//?console.log('11',ev.clientX,ev.clientY);

????????this.oDiv.style.left?=?ev.clientX?-?this.disX?+?'px';

????????this.oDiv.style.top?=?ev.clientY?-?this.disY?+?'px';

??????};

??????fnUp(){

????????document.onmousemove?=?null;

????????document.onmouseup?=?null;

??????}

????}

????//?限制移動(dòng)位置

????class?limitDurg?extends?Durg{

??????fnMove(ev){

????????super.fnMove(ev);//?調(diào)用父類(lèi)方法

????????if(this.oDiv.offsetLeft?<=0){

??????????this.oDiv.style.left?=?0;

????????}

????????if(this.oDiv.offsetTop?<=0){

??????????this.oDiv.style.top?=?0;

????????}

????????let?limitRight?=?window.innerWidth?-?this.oDiv.offsetWidth;

????????let?limitBottom?=?window.innerHeight?-?this.oDiv.offsetHeight;

????????if?(this.oDiv.offsetLeft>limitRight){

??????????this.oDiv.style.left?=?limitRight+'px';

????????}

????????if?(this.oDiv.offsetTop>limitBottom){

??????????this.oDiv.style.top?=?limitBottom+'px';

????????}

??????}

????}

????new?Durg('.div1')

????new?limitDurg('.div2')