javascript 如何继承父类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none
}
#div1{
width: 200px;
height: 300px;
position: absolute;
background: red;
}
#div2{
width: 200px;
height: 300px;
position: absolute;
background: green;
top: 300px;
}
#div3{
width: 200px;
height: 300px;
position: absolute;
background: yellow;
top: 600px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">ddd</div>
<div id="div3">yyyy</div>
<script>
function Drag (id) {
var _this = this;
this.disX = 0;
this.disY = 0;
this.oDiv = document.getElementById(id);
this.oDiv.onmousedown = function (ev) {
_this.fnDown(ev);
};
}
Drag.prototype.fnDown = function (ev) {
var _this = this;
var oEvent = ev || event;
this.disX = oEvent.clientX - this.oDiv.offsetLeft;
this.disY = oEvent.clientY - this.oDiv.offsetTop;
document.onmousemove = function (ev) {
_this.fnMove(ev);
};
document.onmouseup = function () {
_this.fnUp();
};
};
Drag.prototype.fnMove = function (ev) {
var oEvent = ev || event;
this.oDiv.style.left = oEvent.clientX - this.disX + 'px';
this.oDiv.style.top = oEvent.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function () {
document.onmousemove = null;
document.onmouseup = null;
};
function LimitDrag (id) {
Drag.call(this,id); //获得父类的属性 Drag.apply(this,arguments) //这里arguments就代表传入的参数就不需要全部列出来了
}
//获取父类的方法
for(var i in Drag.prototype){
LimitDrag.prototype[i] = Drag.prototype[i];
}
<!--另外一种获取父类的方法-->
TabOver.prototype = Object.create(SwitchTab.prototype);
TabOver.prototype.constructor = TabOver;
LimitDrag.prototype.fnMove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
if(l<0){
l = 0;
}else if( l > document.documentElement.clientWidth - this.oDiv.offsetWidth){
l = document.documentElement.clientWidth - this.oDiv.offsetWdith;
}
if(t<0){
t = 0;
}else if( t > document.documentElement.clientHeight - this.oDiv.offsetHeight){
t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
}
this.oDiv.style.left = l + "px";
this.oDiv.style.top = t + "px";
};
window.onload = function () {
new Drag('div1');
new Drag('div2');
new LimitDrag('div3');
};
// C语言没有面向对象的概念 javascript 基于面向对象 java php 具有面向对象的概念
// document.documentElement.clientHeight 网页可视区的宽度
// document.documentElement.clientWdith 网页可视区的高度
//想要继承父类的属性和方法。要做两件事情
//第一件:使用call继承父类属性
//第二件:使用循环将父类中的方法全部拷贝一份到子类中。这样做的目的是为了避免修改子类影响父类
</script>
</body>
</html>
详细可以浏览:http://blog.csdn.net/kkkkkxiaofei/article/details/46474069
javascript 如何继承父类的更多相关文章
- javascript中子类如何继承父类
参考阮一峰的文章:http://javascript.ruanyifeng.com/oop/inheritance.html#toc4 function Shape() { this.x = 0; t ...
- JavaScript构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习
虽然经常说是做前端开发的,但常常使用的技术反而是JQuery比较多一点.在JavaScript的使用上相对而言少些.尤其是在创建对象使用原型链继承上面,在项目开发中很少用到.所以今天做个demo练习一 ...
- 【设计模式+原型理解】第三章：javascript五种继承父类方式
[前言] 我们都知道,面向对象(类)的三大特征:封装.继承.多态 继承:子类继承父类的私有属性和公有方法 封装:把相同的代码写在一个函数中 多态: ->重载:JS严格意义上是没有重载,但可以通过 ...
- Javascript模拟继承（赠送.net吐槽一段）
首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...
- 详解Javascript的继承实现
我最早掌握的在js中实现继承的方法是在w3school学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用 ...
- 详解Javascript的继承实现（二）
上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...
- JavaScript简洁继承机制实现(不使用prototype和new)
此方法并非笔者原创,笔者只是在前辈的基础上,加以总结,得出一种简洁实用的JavaScript继承方法. 传统的JavaScript继承基于prototype原型链,并且需要使用大量的new操作,代码不 ...
- JavaScript 面向对象继承详解
题记 由于js不像java那样是完全面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,一般都是基于原型链的方式: 一.继承初探 大多数JavaScript的实现用 __proto_ ...
- javascript实现继承的几种方式
原型链方式实现继承 function SuperType(){ this.property = true; this.colors = ['red','blue','green']; } SuperT ...
随机推荐
- C语言函数指针(转载)
二.通常的函数调用 一个通常的函数调用的例子:/* 自行包含头文件 */void MyFun(int x); /* 此处的声明也可写成:void MyFun(int) */int main(int a ...
- Python函数对象
秉承着一切皆对象的理念,我们再次回头来看函数(function).函数也是一个对象,具有属性(可以使用dir()查询).作为对象,它还可以赋值给其它对象名,或者作为参数传递. lambda函数 在展开 ...
- C#基础语法总结
C#笔记——基础篇 一．入门知识 VS中的常用快捷键 Ctrl+K+D:快速对齐代码 Ctrl+Z:撤销 Ctrl+S:保存(一定要经常保存!) Ctrl+J:快速弹出智能提示 Shift+End . ...
- 重学《C#高级编程》（泛型与数组）
前段时间工作比较忙,就没有写随笔了,现在继续. 前两天重新看了泛型和数组两章,简单说下我自己的收获吧 泛型 我们知道数组是一种批量的数据格式,而泛型其实就是一种自定义的批量数据格式,当数组和C#现有的 ...
- .NET Linq获取一个集合中的一个或多个属性，赋值到新的类对象
//得到自定义的list var list = schoolGradeClassModelList.Select(x => new DropDownListData() { DataTextFi ...
- struts2 JS获取上传文件的绝对路径，兼容IE和FF
因为file控件上传失败后会自动清空,所以使用文本框来保存上传路径,而且在不同的浏览器下,控件的样式也需要兼容.下面是自己用到的实例 // 初始化判断浏览器的版本,根据版本的不同使用不同的样式func ...
- C#Graphics画图
public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { G ...
- Dom4j之xPath
XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...
- ECstore报表不显示解决
最近研究ECSTORE发现后台报表显示空白,Google了一下发现N多统一的做法,直接往表里插几条数据.呵呵,更深入一点 1.要显示报表功能首先要确保已经配置好contab的定时任务,定时任务能够执行 ...
- S3C2440的GPIO
S3C2440一共有A B C D E F G H J 共九组IO口,一共是130个,每组IO口的个数如下图所示, 其中A组IO口只有输出功能,没有输入功能, 关于GPXCON寄存器,这个寄存器用来配 ...