js中ES中原型和類的繼承

關於原型的解釋，個人覺得按照ES6的類來解釋和理解要容易的多

1.在js中，只有函式有原型，普通函式和建構函式都有,Array,Object等都是函式(建構函式),都可以設定原型,但是它們的例項不能設定原型
2.可以把函式理解為一個類，原型就是這個類中的方法或者屬性
3.動態方法的設定:

function Fn(){

}
Fn.prototype.play=function(){    

 }

4.靜態方法或屬性的設定:

Fn.run=function(){

}

5.例項化函式,相當於ES6中例項化類
例項化時會將函式的prototype物件下的所有方法和屬性新增在例項化物件的原型鏈中

 var f=new Fn();
 console.dir(f);

6.constructor 方法的設定

• 函式建立後，系統會預設賦予其constructor,但是如果後面再設定原型方法或屬性後，這個constructor會被覆蓋(即使你沒重新設定它),
  所以需要重新設定constructor,這之後再設定原型，不會覆蓋constructor

7.原型的設定，可以單條設定，也可以使用物件，多條設定

function Box(){   //多條設定

}
Box.prototype={
    a:1,
    run:function(){


    },
    play:function(){

    }
}
Object.defineProperty(Box.prototype,"constructor",{    //重新設定constructor
value:Box
})


Box.prototype.run=function(){   //單條設定    不會覆蓋設定過後的constructor

}
Box.prototype.play=function(){

}
 

8. 函式的原型===例項化的原型鏈

9.下面附上一個簡單的原型案例

• 給標籤的原型上設定屬性,使其擁有可以拖拽的屬性

Object.defineProperties(HTMLDivElement.prototype,{   //HTMLElement可以認為是函式
    _drag:{
        writable:true,
        value:false,
    },
    width:{
        set:function(_v){
            this.style.width=_v.toString().indexOf("px")>-1 ? _v : _v+"px";
        },
        get:function(){
            return parseFloat(getComputedStyle(this).width);
        }
    },
    height:{
        set:function(_v){
            this.style.height=_v.toString().indexOf("px")>-1 ? _v : _v+"px";
        },
        get:function(){
            return parseFloat(getComputedStyle(this).height);
        }
    },
    bgColor:{
        set:function(_v){
            this.style.backgroundColor=(typeof _v==="string") ? _v : "#"+_v.toString(16).padStart(6,"0");
        },
        get:function(){
            return parseFloat(getComputedStyle(this).backgroundColor);
        }
    },
    drag:{
        set:function(_v){
            this._drag=_v;
            if(_v){
                this.style.position="absolute";
                return this.addEventListener("mousedown",this.dragHandler);
            }
            this.removeEventListener("mousedown",this.dragHandler);
        },
        get:function(){
            return this._drag;
        }
    },
    dragHandler:{
        value:function(e){
            if(e.type==="mousedown"){
                e.preventDefault();
                document.target=this;
                document.offset={x:e.offsetX,y:e.offsetY};
                document.addEventListener("mousemove",this.dragHandler)
                document.addEventListener("mouseup",this.dragHandler)
            }else if(e.type==="mousemove"){
                this.target.style.left=e.clientX-this.offset.x+"px";
                this.target.style.top=e.clientY-this.offset.y+"px";
            }else if(e.type==="mouseup"){
                document.removeEventListener("mousemove",this.target.dragHandler)
                document.removeEventListener("mouseup",this.target.dragHandler)
            }
        }
    }
})


div0.width=100;
div0.height=100;
div0.bgColor="red";
div1.width=50;
div1.height=50;
div1.bgColor="skyblue";


bn=document.querySelector("button");
bn.addEventListener("click",clickHandler);

function clickHandler(e){
    div0.drag=!div0.drag;
    div1.drag=!div1.drag;
}