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

<!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. #扫描线，线段树#nssl 1459 空间复杂度

    分析 由于\(k\leq 10\)所以考虑用总方案减去经过两个差的绝对值\(\leq k\)的点的路径数 分类讨论一下发现要处理祖先关系和其它关系两种情况,考虑怎么去重,可以将这些答案看作一个个矩形, ...

  2. JDK9的新特性:JVM的xlog

    目录 简介 xlog的使用 selections output decorators 总结 简介 在java程序中,我们通过日志来定位和发现项目中可能出现的问题.在现代java项目中,我们使用log4 ...

  3. Python 集合（Sets）3

    Python - 合并集合 在 Python 中,有几种方法可以合并两个或多个集合.您可以使用union()方法,该方法返回一个包含两个集合中所有项的新集合,或使用update()方法,将一个集合中的 ...

  4. Linux系统 g++ 链接 libopencv_world.a 静态库编译程序

    编译opencv,我是直接编译成 libopencv_world.a  一个文件 正常链接编译,容易报错:main: hidden symbol `opj_read_header' isn't def ...

  5. 带你走进红帽企业级 Linux 6体验之旅(安装篇)

    红帽在11月10日发布了其企业级Linux,RHEL 6的正式版(51CTO编辑注:红帽官方已经不用RHEL这个简称了,其全称叫做Red Hat Enterprise Linux).新版带来了将近18 ...

  6. c# 解决死锁问题Monitor

    前言 在高并发中,一个很关键的问题就是要避免死锁. 那么为什么会产生死锁呢?这种情况多见吗? 举一个例子: 比如方法一中先lock(object1),在lock(object1)中lock(objec ...

  7. CF1933D Turtle Tenacity: Continual Mods

    思路: 此题其实很简单,不要被邪恶的出题人迷惑了双眼. 此题判断有解一共有两种情况. 通过题意可以知道将原数组排序后如果 \(b_{1} \ne b_{2}\),那么最后的结果一定 \(\ne 0\) ...

  8. Linux基础——shell

    shell ############# shell是什么 -Bash Shell是一个命令解释器(python解释器),它在操作系统的最外层,负责用户程序与内核进行交互操作的一种接口,将用户输入的命令 ...

  9. 顺通ERP：精细敏捷的设计理念，得到了消费者的喜爱

    顺通ERP是近年来备受关注的一款ERP品牌,其设计精细,操作便捷,备受消费者喜爱.那么,顺通ERP到底怎么样呢?属于什么档次呢? 首先,从品质上来看,顺通ERP具备高度的稳定性,能够确保企业的日常运营 ...

  10. kubernetes集群最新版安装

    原文地址:https://haiyux.cc/2022/09/21/k8s-install/ 虚拟机准备 我这里准备了三台虚拟机,分别部署一个master和两个node,操作系统位ubuntu 20. ...