面向对象--高级

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 {100px; height:100px; background:red; position:absolute;}
#div2 {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 {100px; height:100px; background:red; position:absolute;}
#div2 {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的使用

原型链

方法的继承

》》原理，复制方法

覆盖原型和方法复制

系统对象

什么是本地对象（非静态对象）

什么是本地对象

常用对象

object,Function ,Array, String, Boolean, Number, Dater, RegExp, Error

内置对象（静态对象）

什么是本地对象

-Global， Math

宿主对象（由浏览器提供的对象）

DOM , BOM