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里
<!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>
有人管他叫---命名空间
在公司里 把同一类 的方法包在一起
拖拽和继承
面向对象的拖拽
改写原有的拖拽
<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>
-查看对象是某个类的实例
使用继承
限制范围的拖拽类
构造函数的伪装
属性的继承
原理 欺骗构造函数
call的使用
原型链
方法的继承
》》原理， 复制方法
覆盖原型和方法复制
系统对象
什么是本地对象（非静态对象）
什么是本地对象
常用对象
object,Function ,Array, String, Boolean, Number, Dater, RegExp, Error
内置对象（静态对象）
什么是本地对象
-Global， Math
宿主对象（由浏览器提供的对象）
DOM , BOM