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

<!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. Java数据类型转换，字符串（String）转日期（Date）

    Java类型转换,字符串(String)转日期(Date) import java.text.ParseException; import java.text.SimpleDateFormat; im ...

  2. Make It Equal 题解

    Problem Link 简要题意 翻译很清楚. 思路 提供一种简单直接的思路. 可以发现最多会操作 \(n\) 次. 那么就可以每次直接枚举切的高度 \(h\),检查更改是否超过 \(k\),之后暴 ...

  3. #DP#CF9D How many trees?

    题目 用\(n\)个点组成二叉树,问高度\(\geq h\)的有多少个. 分析 首先前缀和相减就能得到答案,做dp 设\(dp[n][h]\)表示节点数为\(n\),高度不超过\(h\)的树的个数 那 ...

  4. Wasm软件生态系统安全分析

    演讲嘉宾 | 王浩宇 回顾整理 | 廖   涛 排版校对 | 李萍萍 嘉宾简介 王浩宇,华中科技大学教授,博士生导师,华中科技大学OpenHarmony技术俱乐部主任.研究关注于新兴软件系统中的安全. ...

  5. Java 运算符详解与字符串处理技巧

    Java 运算符 算术运算符 算术运算符用于执行常见的数学运算. 运算符 名称 描述 示例 + 加法 将两个值相加 x + y - 减法 从一个值中减去另一个值 x - y * 乘法 将两个值相乘 x ...

  6. 深入理解 C++ 右值引用和移动语义：全面解析

    C++11引入了右值引用,它也是C++11最重要的新特性之一.原因在于它解决了C++的一大历史遗留问题,即消除了很多场景下的不必要的额外开销.即使你的代码中并不直接使用右值引用,也可以通过标准库,间接 ...

  7. Centos环境部署SpringBoot项目

    centos JDK Jenkins maven tomcat git myslq nginx 7.9 11.0.19 2.418 3.8.1 9.0.78 2.34.4 5.7.26 1.24.0 ...

  8. MCM箱模型建模方法及大气O3来源解析

    OBM箱模型可用于模拟光化学污染的发生.演变过程,研究臭氧的生成机制和进行敏感性分析,探讨前体物的排放对光化学污染的影响.箱模型通常由化学机理.物理过程.初始条件.输入和输出模块构成,化学机理是其核心 ...

  9. 学习Source Generators之打包成Nuget使用

    前面我们简单的实现了一个从swagger生成实体类的Generator,在实际使用中,通过nuget包引用使用会更方便,那么本篇文章将介绍如何将Generator打包成Nuget来使用. 打包Nuge ...

  10. 【直播预告】HarmonyOS极客松赋能直播第四期：HarmonyOS开发经验分享