继承:父类有的,子类也有。父类改变,子类也跟着变。
属性继承: 
    矫正this (window对象,矫正成object对象)
    fn .call(this是谁,参数1,参数2...);
    fn .apply(this是谁,[参数1,参数2...]);
    父类.apply(this,arguments);
方法继承:
    a).Worker.prototype = Person.prototype;
        问题:会触发引用 ,当改变worker的时候会改变Person的值
    b).
        for(var name in Person.prototype){
            Worker.prototype[name] = Person.prototype[name];
        }
 
        瑕疵:w1 instanceof Person         false
 
    c).
        Worker.prototype = new Person();
        瑕疵:w1.constructor 不等于Worker
 
    d).
        Worker.prototype = new Person();(原型链上赋值new Person所有的方法)
        Worker.prototype.constructor = Worker;(把它的构造函数指向worker)

面向对象写选项卡

function Tab(id){
    this.oBox = document.getElementById(id);
    this.aBtn = this.oBox.getElementsByTagName('input');
    this.aDiv = this.oBox.getElementsByTagName('div');
    this.iNow = 0;
    this.init();
}
Tab.prototype.init=function(){
    var _this = this;
    for(var i=0;i<this.aBtn.length;i++){
        this.aBtn[i].index = i;
        this.aBtn[i].onclick=function(){
            _this.iNow = this.index;
            _this.hide();
            _this.show();
        };
    }
};
Tab.prototype.hide=function(){
    for(var i=0;i<this.aBtn.length;i++){
        this.aBtn[i].className='';
        this.aDiv[i].className='';
    }
};
Tab.prototype.show=function(){
    this.aBtn[this.iNow].className='on';
    this.aDiv[this.iNow].className='on';
};
window.onload=function(){
    new Tab('div1');
}; 

面向对象写拖拽

function Drag(id){
    this.oDiv = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
    this.init();
};
Drag.prototype.init=function(){
    var _this = this;
    this.oDiv.onmousedown=function(ev){
        var oEvent = ev||event;
        _this.fnDown(oEvent);
        return false;
    };
};
Drag.prototype.fnDown=function(ev){
    var _this = this;
    this.disX = ev.clientX-this.oDiv.offsetLeft;
    this.disY = ev.clientY-this.oDiv.offsetTop;
    document.onmousemove=function(ev){
        var oEvent = ev||event;
        _this.fnMove(oEvent);
    };
    document.onmouseup=function(){
        _this.fnUp();
    };
    this.oDiv.setCapture&&this.oDiv.setCapture();
};
Drag.prototype.fnMove=function(ev){
    this.oDiv.style.left = ev.clientX-this.disX+'px';
    this.oDiv.style.top = ev.clientY-this.disY+'px';
};
Drag.prototype.fnUp=function(){
    document.onmousemove=null;
    document.onmouseup=null;
    this.oDiv.releaseCapture&&this.oDiv.releaseCapture();
};
window.onload=function(){
    new Drag('div1');
}; 
 

javascript面向对象事件继承的更多相关文章

  1. JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式

      前  言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...

  2. Javascript 面向对象编程—继承和封装

      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

  3. javascript面向对象中继承实现?

    面向对象的基本特征有:封闭.继承.多态. 在javascript中实现继承的方法: 1.原型链(prototype chaining) 2.call()/apply() 3.混合方式(prototyp ...

  4. 【前端学习】javascript面向对象编程(继承和复用)

    前言       继承,代码复用的一种模式.和其它高级程序语言相比,javascript有点点不一样,它是一门纯面向对象的语言,在JS中,没有类的概念,但也可以通过原型(prototype)来模拟对象 ...

  5. javascript 面向对象的继承的实现

    JavaScript 中的面向对象的初步认识 上面这篇简单的记录了我对 JS面向对象实现的一点初步认识和了解,下面继续研究JS面向对象,实现继承和多态. 之前的学习我了解到了 :构造函数加属性,原型p ...

  6. javascript面向对象:继承、多态

    继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属性),同时可扩展自己的成员,下面介绍几种js中实现继承的方式: 1,对象模仿:通过动态的改变 this 指针的指向,实现 ...

  7. Javascript面向对象之继承

    与类的创建篇一样,这里先贴出最终代码,再做详细分析: // 创建一个父类 function SuperType(){ this.company = 'alibaba'; } function SubT ...

  8. Javascript 面向对象之继承

    本文参考书籍<<Javascript高级程序设计>> js继承方式:实现继承,主要依靠原型链实现. 原型链:基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 这 ...

  9. javascript 面向对象(实现继承的几种方式)

     1.原型链继承 核心: 将父类的实例作为子类的原型 缺点:  父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了 function Person (name) { this.name ...

随机推荐

  1. git使用ssh协议,生成公钥和私钥,并指定私钥

    http://superuser.com/questions/232373/how-to-tell-git-which-private-key-to-use In ~/.ssh/config, add ...

  2. poj 动态规划题目列表及总结

    此文转载别人,希望自己能够做完这些题目! 1.POJ动态规划题目列表 容易:1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, 11 ...

  3. MVC 3 基本操作增加修改

    在MVC中实现基本的增删改和传统的asp .net 程序有很大的不同,刚开始使用MVC还是有些不太适应,但是它的页面简洁也相当的不同,同时对服务器的访问性能上也有很大的提高.基于此,下面对我学习过程记 ...

  4. core--线程调度

    线程的调度和我们用人是同一个道理,假如我们是公司的CEO,你的手下有7名大将,10名美女,100000名普通员工,现在你的任务是在1年内情切慰问完所有的员工.你将如何安排这个行程?先从那些人开始?从哪 ...

  5. bzoj2428: [HAOI2006]均分数据

    模拟退火.挺好理解的.然后res打成了ans一直WA一直WA...!!!一定要注意嗷嗷嗷一定要注意嗷嗷嗷一定要注意嗷嗷嗷. 然后我就一直卡一直卡...发现最少1800次的时候就可以出解了.然后我就去调 ...

  6. 菜鸟学习笔记4——jquery事件

    方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 cli ...

  7. 850 USB 烧录模式

    /************************************************************************* * 850 USB 烧录模式 * 说明: * 本文 ...

  8. UVA 11354 Bond 邦德 (RMQ,最小瓶颈MST)

    题意: n个城市,m条路,每条路有个危险值,要使得从s走到t的危险值最小.回答q个询问,每个询问有s和t,要求输出从s到t最小的危险值.(5万个点,10万条边) 思路: 其实要求的是任意点对之间的最小 ...

  9. Struts2的crud

    struts2的crud引出的问题: 1.当Action里面有其他类的实例引用属性时,当要用请求参数为该对象的属性赋值时,如何将其压入栈顶. 2.当有的操作(list)不需要创建该属性的实例对象时,或 ...

  10. lseek()函数

    lseek()有个特殊的用途,确定文件是常规文件还是设备.<pre lang="c" escaped="true">off_t currpos;ou ...