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(){
}
- 函数的原型===实例化的原型链
9.下面附上一个简单的原型案例
- 给标签的原型上设置属性,使其拥有可以拖拽的属性
Object.defineProperties(HTMLDivElement.prototype,{ //HTMLElement可以认为是函数
_drag:{
writable:true,
value:false,
},
{
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;
}