Javascript（五⼗四）class定义构造函数普通构造函数的定义：
class定义：
所有的属性写在constructor构造器中，原型⽅法（省略function）直接写在构造函数体中
普通构造函数继承：
class继承：
class ⼦级构造函数名名 extend ⽗级函数名 {}
属性继承：super（⽗级属性1，⽗级属性2，…）
原型继承继承结果与普通函数ate()作⽤⼀样。直接将⼦⼀级的原型指向⽗⼀级的原型，值拷贝。
整体⽐较：
官⽅构造函数⽅法
function Person(name,sex,age){
this.name=name;
this.sex=sex;
this.age=age;
}
Person.prototype.showSelf=function(){
console.log(this.name,this.sex,this.age)
}
//继承
function Worker(name,sex,age,job){
//继承⽗级的属性  call,apply,bind
Person.call(this,name,sex,age);
this.job=job
}
//继承⽗级的⽅法（原型对象原型链）
//⽅式1：
// for(let key in Person.prototype){
/
/  Worker[key]=Person[key]
// }
//⽅式2  ate (原型链)
Worker.ate(Person.prototype) //⽅式3
// Worker.prototype=new Person()
//多态
Worker.prototype.showSelf=function(){
console.log(this.name,this.sex,this.age,this.job) }
var p1=new Person('blue','man',18,'boss');
var w1=new Worker('woker1','man',30,'boss');
p1.showSelf()
w1.showSelf()
Worker.prototype.run=function(){}
console.log(p1.__proto__)
console.log(w1.__proto__)
console.log(p1.__proto__==w1.__proto__)
console.log(Worker.prototype,Person.prototype)  console.log(Worker.prototype==Person.prototype)
class构造函数⽅法
class Person{
constructor(name,sex,age){
this.name=name;
this.sex=sex;
this.age=age;
}
showSelf(){
console.log(this.name,this.sex,this.age)
}
}
class Worker extends Person{//extends继承⽗级的⽅法
constructor(name,sex,age,job){
// 1.继承⽗⼀级的属性
super(name,sex,age)
this.job=job;
}
}htmlbutton属性
var p1=new Person('blue','男',18);
p1.showSelf()
var w1=new Worker('grenn','⼥',20,'play')
w1.showSelf()
Worker.prototype.showSelf=function(){//多态
console.log(this.name,this.sex,this.age,this.job)
}
w1.showSelf()
p1.showSelf()
console.log(Worker.prototype,Person.prototype,Worker.prototype==Person.prototype)
注意：在使⽤构造函数时（⽆论是普通构造函数，还是class构造函数），如果函数内部出现了事件绑定或者定时器，那么⼀定要注意事件处理函数和定时器函数的this指向问题。
解决⽅式：
1.bind、call、apply
2.箭头函数
3.使⽤变量保存this
案例：拖拽
普通的拖拽
var ElementById('green');
var e=ev||window.event;
// var left=e.clientX-oG.offsetLeft;
// var top=e.clientY-oG.offsetTop;
// console.log(e.offsetX,e.offsetY,left,top)
var left=e.offsetX
var top=e.offsetY;
oG.style.left=e.clientX-left+'px';
p=e.clientY-top+'px'
}
}
}
改造 1.不能有函数嵌套 2.可以有全局变量官⽅构造函数拖拽
function Drag(id){
this.ElementById(id);
this.left=0;
// 注意：更改this指向否则事件处理函数的this指向的是它的主⼈，也就是事件绑定的对象usedown =this.down.bind(this)
}
Drag.prototype.down=function(ev){
console.log(this)
var e = ev || window.event;
// var left=e.clientX-oG.offsetLeft;
// var top=e.clientY-oG.offsetTop;
// console.log(e.offsetX,e.offsetY,left,top)
this.left = e.offsetX;
// 注意：更改this指向否则事件处理函数的this指向的是它的主⼈，也就是事件绑定的对象      usemove =ve.bind(this)
}
ve=function(ev){
console.log(1234,this)
var e = ev || window.event;
this.oG.style.left = e.clientX -this.left +'px';
this.p = e.clientY -p2 +'px'
}
Drag.prototype.up=function(){
}
new Drag('green')
}
class构造函数拖拽

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。