面向对象--高级

Posted 2020-07-23 distant-遥远

tags:

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

json方式的面向对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var p1={
    name: \'blue\',
    sex: \'男\',
    showName: function ()
    {
        alert(\'我的名字是：\'+this.name);
    },
    showSex: function ()
    {
        alert(\'我的性别是\'+this.sex+\'的\');
    }
};

var p2={
    name: \'leo\',
    sex: \'男\',
    showName: function ()
    {
        alert(\'我的名字是：\'+this.name);
    },
    showSex: function ()
    {
        alert(\'我的性别是\'+this.sex+\'的\');
    }
};

p1.showSex();
p2.showName();
</script>
</head>

<body>
</body>
</html>

json

把方法包在json里

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var p1={
    name: \'blue\',
    sex: \'男\',
    showName: function ()
    {
        alert(\'我的名字是：\'+this.name);
    },
    showSex: function ()
    {
        alert(\'我的性别是\'+this.sex+\'的\');
    }
};

var p2={
    name: \'leo\',
    sex: \'男\',
    showName: function ()
    {
        alert(\'我的名字是：\'+this.name);
    },
    showSex: function ()
    {
        alert(\'我的性别是\'+this.sex+\'的\');
    }
};

p1.showSex();
p2.showName();
</script>
</head>

<body>
</body>
</html>

json面向对象

有人管他叫---命名空间

在公司里把同一类的方法包在一起

拖拽和继承

面向对象的拖拽

改写原有的拖拽

<script>
function Person(name, sex)
{
    this.name=name;
    this.sex=sex;
}

Person.prototype.showName=function ()
{
    alert(this.name);
};

Person.prototype.showSex=function ()
{
    alert(this.sex);
};

//-------------------------------------

function Worker(name, sex, job)
{
    //this->new出来的Worker对象
    //构造函数伪装        调用父级的构造函数——为了继承属性
    Person.call(this, name, sex);
    
    this.job=job;
}

//原型链        通过原型来继承父级的方法
//Worker.prototype=Person.prototype;

for(var i in Person.prototype)
{
    Worker.prototype[i]=Person.prototype[i];
}

Worker.prototype.showJob=function ()
{
    alert(this.job);
};

var oP=new Person(\'blue\', \'男\');
var oW=new Worker(\'blue\', \'男\', \'打杂的\');

oP.showName();
oP.showSex();

oW.showName();
oW.showSex();
oW.showJob();
</script>
</head>

<body>
</body>
</html>

继承

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    new Drag(\'div1\');
    new Drag(\'div2\');
};

function Drag(id)
{
    var _this=this;
    
    this.disX=0;
    this.disY=0;
    this.oDiv=document.getElementById(id);
    
    this.oDiv.onmousedown=function ()
    {
        _this.fnDown();
    };
}

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 ()
    {
        _this.fnMove();
             
    };
    
    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\';
};

Drag.prototype.fnUp=function ()
{
    document.onmousemove=null;
    document.onmouseup=null;
};
</script>
</head>

<body>
<div id="div1">
</div>
<div id="div2">
asdf
</div>
</body>
</html>

拖拽

<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    new Drag(\'div1\');
    new Drag(\'div2\');
};

function Drag(id)
{
    var _this=this;
    
    this.disX=0;
    this.disY=0;
    this.oDiv=document.getElementById(id);
    
    this.oDiv.onmousedown=function ()
    {
        _this.fnDown();
    };
}

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 ()
    {
        _this.fnMove();
             
    };
    
    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\';
};

Drag.prototype.fnUp=function ()
{
    document.onmousemove=null;
    document.onmouseup=null;
};
</script>

拖拽封装

对象的继承

什么的继承

在原有基础上略做修改，得到一个新类

不形象原有类的基础

instanceof运算符

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var arr1=[1,2,3];

alert(arr1 instanceof Object);
</script>
</head>

<body>
</body>
</html>

instanceof

-查看对象是某个类的实例

使用继承

限制范围的拖拽类

构造函数的伪装

属性的继承

原理欺骗构造函数

call的使用

原型链

方法的继承

》》原理，复制方法

覆盖原型和方法复制