JavaScript面向对象的继承应用

Posted 筱风能动浪，岸树不遮山

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript面向对象的继承应用相关的知识，希望对你有一定的参考价值。

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

<!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面向对象的继承应用的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

javascript 此代码段显示了如何在纯JavaScript中实现面向对象的继承，以便可以继承正确的函数

JavaScript对象原型链继承闭包

Javascript 面向对象-继承

JavaScript对象原型链继承和闭包

前端 JavaScript 设计模式前奏--面向对象-封装继承多态