1、类与对象
类： 类就是在构造函数上一层额封装。
对象： 通过类实例创建的。具体的能够操作的对象。
class StuClass {
}
var StuClass = class{
}
constructor ：
类的构造函数，每一个类都具有的。即使没有申明，那么系统也会默认添加一个空的构造函数。
自动调用的，类在实例对象的时候自动调用，自动传参。
类里面的成员方法都是创建在原型上的。
类里面可以使用static的关键字申明一个静态的方法。这个方法不需要类实例化对象，而是使用类本身调用的。静态方法内部的this指的是类本身。
类使用extends关键字实现类的继承
class child extends father{
}
子类也必须具有一个constructor的构造函数，如果没有，那么继承父类的，如果有那么使用自己的，子类的构造函数里面必须调用父类的构造函数，也就是必须要运行
super()函数。
其他的地方或者方法中想要调用父类的其他方法，则使用super.方法来实现。super表示父类。
bind(), call ,apply 都可以偏正一个函数内部的this。
案例：
拖拽事件：
1.将左边图片设置位拖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
position: absolute;
}
#d1{
background: red;
left:0;
}
#d2{
background: blue;
right:0;
}
</style>
</head>
<body>
<div id="d1">qwdeqw</div>
<div id="d2">asdsa</div>
<script src="Drag.js"></script>
<script>
var drag = new Drag('d1');
drag.init();
</script>
</body>
</html>
效果如下：
day45拖拽事件.jpg
day45拖拽事件1.jpg
相似将右边图片设置位拖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
position: absolute;
}
#d1{
background: red;
left:0;
}
#d2{
background: blue;
right:0;
}
</style>
</head>
<body>
<div id="d1">qwdeqw</div>
<div id="d2">asdsa</div>
<script src="Drag.js"></script>
<script>
var LimitDrag = class LimitDrag extends Drag{
move(ev){
super.move(ev);
if(this.d.offsetLeft<0){
this.d.style.left = 0;
}
}
}
var drag = new LimitDrag('d2');
drag.init();
</script>
</body>
</html>
day45拖拽事件.jpg
day45拖拽事件2.jpg
网友评论