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

<!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. #树形dp，二次扫描换根法#JZOJ 3501 消息传递 with others

    目录 JZOJ 3501 消息传递 题目 分析 代码 简单写就能跳过之题目 JZOJ 3500 物语 题目 分析 代码 JZOJ 3757 洛谷 2354 [NOI 2014] 随机数产生器 题目 分 ...

  2. 本周四晚19：00知识赋能第八期第2课丨ArkUI自定义组件

     9月21日19:00~20:00,第八期知识赋能第2节直播就要开始啦!本次直播将为同学们带来涂鸦小游戏的趣味体验,让大家全面了解ArkUI框架的应用,帮助你们在自己已有专业的基础上拓宽知识边界,学习 ...

  3. openGauss关于PL/SQL匿名块调用测试

    openGauss 关于 PL/SQL 匿名块调用测试 一.原理介绍 PL/SQL(Procedure Language/Structure Query Language)是标准 SQL 语言添加了过 ...

  4. 如何使用ODBC应用程序接口连接数据库

    如何使用 ODBC 应用程序接口连接数据库? 安装 unixODBC. yum install -y unixODBC yum install -y unixODBC-devel 下载并安装 open ...

  5. np.squeeze()

    np.squeeze() 是 NumPy 库中的一个函数,用于从数组中删除单维度的条目.它返回一个在输入数组中删除了尺寸为 1 的维度的新数组. 下面是使用 np.squeeze() 的示例代码: 点 ...

  6. HarmonyOS Lottie组件，让动画绘制更简单

    原文:https://mp.weixin.qq.com/s/eC7g9ya4f_2AiNgteiyXcw,点击链接查看更多技术内容. 动画是UI界面的重要元素之一,精心设计的动画能使UI界面更直观,有 ...

  7. 史上最全的中高级JAVA工程师-面试题汇总

    史上最全的中高级JAVA工程师-面试题汇总 置顶 2019-10-15 18:58:32 Jeff.Smile 阅读数 34460更多 分类专栏: # 随笔 版权声明:本文为博主原创文章,遵循CC 4 ...

  8. 安装CentOS-6.3-i386-minimal

    服务器开发者都离不开linux,这里一步步讲下linux安装和开发环境部署 一.下载安装镜像文件 这里以安装CentOS-6.3-i386-minimal为例,这个自带安装软件最少,简单而小巧,偏于你 ...

  9. c# mvc 移除多于的视图引擎

    前言 在我们的mvc中,我们又很多视图引擎是不需要的.为什么这么说呢? 我们知道计算机玩的就是遍历. 上图中我们可以看到,首先找的是index.aspx,因为我们都是cshtml,那么去映射的时候呢每 ...

  10. MMDeploy部署实战系列【第四章】：onnx，tensorrt模型推理

    MMDeploy部署实战系列[第四章]:onnx,tensorrt模型推理 这个系列是一个随笔,是我走过的一些路,有些地方可能不太完善.如果有那个地方没看懂,评论区问就可以,我给补充. 目录: 0️⃣ ...