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

<!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. #基数排序#CF1654F Minimal String Xoration

    题目传送门 分析 有没有一种办法可以将每个 \(j\) 的比较过程同时进行, 可以发现其实这个过程很像后缀排序,实际上只是加号变成了异或, 从低位到高位重新将字符串排名,用同样的方法做到 \(O(2^ ...

  2. OpenHarmony创新赛人气投票活动，最佳人气作品由你来定！

      12月1日至12月15日 十大入围作品线上投票激战正酣 最佳人气作品,由你来定!   投票链接:https://forums.openharmony.cn/forum.php?mod=viewth ...

  3. OpenHarmony父子组件单项同步使用：@Prop装饰器

      @Prop装饰的变量可以和父组件建立单向的同步关系.@Prop装饰的变量是可变的,但是变化不会同步回其父组件. 说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用. 概述 ...

  4. OpenHarmony创新赛 | 您有一份创新激励奖待领取 请查收！

      2023开源和信息消费大赛 开放原子开源大赛OpenHarmony创新赛 (以下简称"OpenHarmony创新赛") 正如火如荼的进行当中 赛程也即将进入到提交作品的关键阶段 ...

  5. Windows开发的瑞士军刀,NewSPYLite发布

    宗旨:延续了SpyLite的方便易用,同时也丰富了更多的功能,更适合开发者使用. 在SpyLite的基础功能上,开发了更多人性化并且好用的功能,增强的信息的可读性,以及软件总体的可用性. New Sp ...

  6. C/C++ 项目构建指南：如何使用 Makefile 提高开发效率

    Makefile是一个常用的自动化构建工具,它可以为开发人员提供方便的项目构建方式.在C/C++项目中,Makefile可以用来编译.链接和生成可执行文件.使用Makefile的好处是可以自动执行一系 ...

  7. RabbitMQ 06 工作队列模式

    工作队列模式结构图: 这种模式非常适合多个工人等待任务到来的场景.任务有多个,一个一个丢进消息队列,工人也有很多个,就可以将这些任务分配个各个工人,让他们各自负责一些任务,并且做的快的工人还可以多完成 ...

  8. HMS Core Discovery第15期直播预告|构筑立体世界，共造沉浸式营销

    [导读] AR技术,是一种将真实世界信息和虚拟世界信息"无缝"衔接的技术,现如今AR技术受到日益广泛的关注,在我们生活中发挥着重要的作用,并显示出巨大的潜力--它是如何改变我们观察 ...

  9. Python调用动态库，获取BSTR字符串

    今天客户在用Python调用我们的动态库的时候,遇到一个问题,调用动态库中的函数,函数返回的是BSTR字符串,但是客户接收到的是一个8位长度的数字. 动态库函数原型:EXTERN_C BSTR ELO ...

  10. Qt 操作注册表

    一.写入注册表 #include <QSettings> //实例 QSettings //参数 1:注册表位置 //参数 2:操作 windows 注册表 QSettings::Nati ...