继承
一、继承的定义：
1、在一个类基础上定义一个新类叫继承，原有的类叫父类，新生成的类叫子类。
2、一个父类可以有多个子类，一个子类只能有一个父类。
二、继承的特点：
1、子类拥有父类的属性和方法
2、子类可以有自己新的属性和方法
3、子类可以重写（覆盖）父类的方法
4、可以声明父类，创建子类
写一个简单的对象
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function () {
console.log("名字：" + this.name);
};
Person.prototype.showAge = function () {
console.log("年龄：" + this.age);
};
拖拽
首先写出我们要拖拽的物体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#box2 {
background: green;
}
#box3 {
background: blue;
}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script src="DragBox.js"></script>
<script>
function DragBoxText(boxId) {
DragBox.call(this,boxId)
}
DragBoxText.prototype = new DragBox();
DragBoxText.prototype.move = function (x,y) {
DragBox.prototype.move.call(this,x,y);
this.box.innerHTML = x+"px"+y+"px"
}
function DragBoxs(boxId) {
DragBox.call(this,boxId)
}
DragBoxs.prototype = new DragBox();
DragBoxs.prototype.move = function (x,y) {
DragBox.prototype.move.call(this,x,y);
if(x<=0 && y<=0){
this.box.style.top = 0+"px"
this.box.style.left = 0+"px"
}else if (x<=0 ) {
this.box.style.left = 0+"px"
}else if(y<=0){
this.box.style.top = 0+"px"
}
}
//
new DragBoxText("box3");
new DragBoxs("box2");
new DragBox("box1");
</script>
</body>
</html>
引入我们的JS文件
function DragBox (boxId) {
if (boxId == undefined) {
return;
}
this.box = document.getElementById(boxId);
var self = this;
this.box.onmousedown = function (e) {
e.preventDefault();
self.detaX = e.clientX-self.box.offsetLeft;
self.detaY = e.clientY-self.box.offsetTop;
self.start()
document.onmouseup = function () {
self.stop()
}
}
}
DragBox.prototype.start = function () {
var self = this;
document.onmousemove = function (e) {
var x = e.clientX - self.detaX;
var y = e.clientY - self.detaY;
self.move(x,y)
}
}
DragBox.prototype.move = function (x,y) {
var self = this;
self.box.style.left = x+"px";
self.box.style.top = y+"px"
}
DragBox.prototype.stop = function () {
document.onmousemove = null
}
这里call的用法
call和apply，它们的作用都是将函数绑定到另外一个对象上去运行
两者的格式和参数定义：
call( this，var1，var2，… ); // 当前对象，参数列表（形参）
apply(this， [var1，var2,...] ); // 当前对象，必须是数组
这两函数的作用其实就是更改对象的内部指针，即改变对象的this指向的内容
网友评论