面向对象语言的三大特征：继承、封装、多态

<!DOCTYPE html>

<html>

<head>

    <title>Extend-OPP</title>

</head>

<script type="text/javascript">

    function Person(name,sex){

        this.name=name;

        this.sex=sex;

    }

    Person.prototype.showName = function() {

    alert(this.name);

    };

    Person.prototype.showSex=function(){

        alert(this.sex);

    };

    var oP1=new Person('blue','man');

    // oP1.showSex();

    function Worker(name,sex,job){

        //构造函数伪装 Call the parent's construtor

        Person.call(this,name,sex);

        this.job=job;

    }

    // 原型链 Use the prototype to extend the parent's function

    //Worker.prototype=Person.prototype;

    for (var i in Person.prototype){

        Worker.prototype[i]=Person.prototype[i];

    }

    Worker.prototype.showJob=function(){

        alert(this.job);

    };

    var oW1=new Worker('Jack','man','Designer');

    oW1.showJob();

</script>

<body>

</body>

</html>

使用面向对象继承的实例：

index.html

<!DOCTYPE html>

<html>

<head>

    <title>drag Div</title>

    <style type="text/css">

        #div1{width: 100px;height: 100px;background: red;position: absolute;}

        #div2{width: 100px;height: 100px;background: yellow;position: absolute;}

    </style>

    <script src="drag.js"></script>

    <script src="Limitdrag.js"></script>

    <script type="text/javascript">

    window.onload=function(){

        new Drag('div1');

        new LimitDrag('div2');

    }

    </script>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

</body>

</html>

darg.js

        function Drag(id){

            var _this=this;

            this.disX=0;

            this.dixY=0;

            this.oDiv=document.getElementById(id);

            this.oDiv.onmousedown=function(ev)

            {

                _this.fnDown(ev);

                return false;

            };

    }

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';

                // this.oDiv.style.left=l+'px';

                // this.oDiv.style.top=t+'px';

            };

Drag.prototype.fnUp=function(){

                document.onmousemove=null;

                document.onmouseup=null;

            };

Limitdrag.js

function LimitDrag(id){

    Drag.call(this,id);

}

for(var i in Drag.prototype){

    LimitDrag.prototype[i]=Drag.prototype[i];

}

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.offsetWidth;

                }

                    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';

            };

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面向对象事件继承

    继承:父类有的,子类也有.父类改变,子类也跟着变. 属性继承:      矫正this (window对象,矫正成object对象)     fn .call(this是谁,参数1,参数2...); ...

  9. Javascript 面向对象之继承

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

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

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

随机推荐

  1. 【已解决】Hadoop_01 Linux修改hosts文件

    设置主机名 [root@localhost ~]# hostnamectl set-hostname s1[root@localhost ~]# reboot 修改hosts文件 [root@mast ...

  2. OpenHarmony加速行业应用落地，多款软件发行版正通过兼容性测评

    4 月 25 日,OpenAtom OpenHarmony(以下简称"OpenHarmony")技术日在深圳举办,大会聚焦 OpenHarmony 3.1 Release 版本核心 ...

  3. 圈重点！一图读懂OpenHarmony技术日

     

  4. OpenHarmony 官网文档有哪些上新？上篇：应用开发文档上新

    随着 OpenAtom OpenHarmony(以下简称"OpenHarmony")系统能力持续升级,已具备支撑复杂带屏标准设备和应用开发的基础能力.相较于旧版本,OpenHarm ...

  5. 轻松上手Jackjson（珍藏版）

    写在前面 虽然现在市面上有很多优秀的json解析库,但 Spring默认采用Jackson解析Json. 本文将通过一系列通俗易懂的代码示例,带你逐步掌握 Jackson 的基础用法.进阶技巧以及在实 ...

  6. Java 学习路线：基础知识、数据类型、条件语句、函数、循环、异常处理、数据结构、面向对象编程、包、文件和 API

    Java 基础 什么是 Java Java 是一种由 Sun Microsystems 于 1995 年首次发布的编程语言和计算平台.Java 是一种通用的.基于类的.面向对象的编程语言,旨在减少实现 ...

  7. ContOS7搭建RAID-5磁盘阵列

    RAID5:分布式奇偶校验的独立磁盘结构 RAID5就是raid0和RAID1的一种折中,既提升了磁盘读写能力,又有一定的容错能力,成本也低: 实验开始: 1.挂载四块5G硬盘 2.进行分区:fdis ...

  8. go语言结构体使用小结

    转载请注明出处: 在Go语言中,结构体(struct)是一种复合数据类型,它允许你将多个不同类型的字段组合成一个单一的类型.结构体为数据的封装和抽象提供了便利,使得数据组织更加清晰和易于管理. 结构体 ...

  9. SEO — 搜索引擎优化

    一.多词排名标题设置 SEO(Search Engine Optimization)是指搜索引擎优化,即利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名 优化目的是:让网站在搜索引擎上的曝光率达到 ...

  10. mysql 必知必会整理—触发器[十五]

    前言 现在很多都是程序用于触发的,而不是触发器了. 正文 需要MySQL 5 对触发器的支持是在MySQL 5中增加的.因此,本章内容适用于MySQL 5或之后的版本. MySQL语句在需要时被执行, ...