JS面向对象编程基础部分

来源：互联网发布：php safe mode 开关编辑：程序博客网时间：2024/04/30 06:48

游戏的分析：
（1）.看看如何通过按钮来控制mario的位置
（2）.设计相关的对象那个（Mario x,y）

要求：
1.mario碰到边界给一个提示；
2.mario可以去找另外一个物体

代码如下：（只实现上下左右移动功能）

html:<html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="mario.css"></link><script languange="javascript" type="text/javascript" src="Mario.js"></script></head><body><table border="1px" class="ControlCenter"><tr><td colspan="3">控制栏</td></tr><tr><td></td><td><input type="button" value="↑" onclick="mario1.move(4)"/></td><td></td></tr><tr><td><input type="button" value="←" onclick="mario1.move(3)"/></td><td>**</td><td><input type="button" value="→" onclick="mario1.move(1)"/></td></tr><tr><td></td><td><input type="button" value="↓" onclick="mario1.move(2)"/></td><td></td></tr></table><div class="gamediv"><img src="Mario.PNG" id="mario"style="left:20px;top:20px;"/></div></body></html>

***********************************************************************************************************8css代码:.ControlCenter{border:1px solid red;text-align:center;/*字对齐属性*/}.ControlCenter tr td{border:1px solid yellow;width:20px;height:10px;}.gamediv{width:300px;height:300px;background:blue;position:absolute;/*这边记得要用absolute绝对定位，不然在其内的img会以body定位*/}#mario{width:50px;height:50px;position:absolute;left:20px;top:20px;}

***********************************************************************************************************8JS代码：function mario(){this.x=0;this.y=0;this.move=function(direct){var mario=document.getElementById("mario");switch(direct){case 1://这时只能获取内联样式中的属性var left=mario.style.left;//获取的属性值是字符串类型，需要截取和转换left=parseInt(left.substr(0,left.length-2));//再转换回来mario.style.left=(left+10)+"px";break;case 2:var top=mario.style.top;top=parseInt(top.substr(0,top.length-2));mario.style.top=(top+10)+"px";break;case 3:var left=mario.style.left;left=parseInt(left.substr(0,left.length-2));mario.style.left=(left-10)+"px";break;case 4:var top=mario.style.top;top=parseInt(top.substr(0,top.length-2));mario.style.top=(top-10)+"px";break;}}}var mario1=new mario();

***********************************************************************************************************8

*构造函数：
基本用法：
function 类名（参数列表）{
this.属性值=参数值
}

举例：

//JSd代码：function person(name,age){this.name=name;this.age=age;}//即在创建对象的时候直接就可以给名字和年龄var p1=new person("小明",20);window.alert(p1.name);var p2=new person("小王",19);window.alert(p2.age);

2.在给一个对象初始化属性值的时候，也可以指定函数属性
举例：

//JSd代码：function jisuan(a,b,opr){if(opr=="+"){return a+b;}else if(opr=="-"){return a-b;}else if(opr=="*"){return a*b;}else{return a/b;}}function person(name,age,fun){this.name=name;this.age=age;this.myfun=fun;}var p1=new person("小王",20,jisuan);window.alert(p1.age);window.alert(p1.myfun(2,3,"+"));

3.创建对象的有一种形式
如果一个对象比较简单，我们可以直接创建：
如：
var dog={name:'小明',age:8};

举例：//JSd代码：var dog={name:'xiaoming',age:8,fun1:function(){window.alert("nihao");},fun2:function(){window.alert("OK");}};window.alert(dog.constructor);window.alert(dog.name+dog.age);dog.fun1();dog.fun2();

4.面向对象的进一步理解：

//JSd代码：var dog={    name:'xiaoming',    fun1:function(){window.alert("nihao");},    fun2:function(){window.alert("OK");}};//循环列出dog对象的所有属性和方法 对象名【‘属性名’】for(var key in dog){    window.alert(dog[key]);}//另外一个运用：document.write("************当前浏览器window对象有的属性和方法***************************<br/>");for(var key in window){    document.write(key+":"+window[key]+"</br>");}

5.面向对象编程的三大特性：
（1）.封装：
js提供有以下几种控制方法和属性的访问权限：
一。公开级别：对外公开；
二。私有级别：类本身可以访问，不对外公开；

举例：  //JSd代码：function person(name,agei,sali){this.name=name;//私有属性var age=agei;//公开属性var sal=sali;//私有属性//在类中我们如何定义公开的方法（特权方法），私有方法（内部方法）//如果我们希望操作私有的属性，则可用公开的方法实现this.show=function(){window.alert(age+" "+sal);};//私有方法，可以访问对象内部属性function show2(){window.alert(age+" "+sal);}}var p1=new person("xiaownag",18,5000);window.alert(p1.name);p1.show();//这个可以执行//p1.show2();这个没法执行

**
前面我们学习过，通过prototype给所有的对象添加方法，但是这种方式，不能取访问
私有变量和方法；

（2）继承：解决代码冗余的问题

举例：//JSd代码：//抽象出一个学生类，（即把中学生和小学生的共性取出）function Stu(name,age){this.name=name;this.age=age;this.show=function(){window.alert(this.name+this.age);}}function MidStu(name,age){this.stu=Stu;//这边类似于普通成员函数添加/*  this.stu=function (name,age){this.name=name;this.age=age;this.show=function(){window.alert(this.name+this.age);}}*/this.stu(name,age);//js实际上是通过对象冒充，来实现继承的；}function pipStu(name,age){this.stu=Stu;this.stu(name,age);}var midStu=new MidStu("xiaoming",20);window.alert(midStu.name);var pipStu=new pipStu("xiaowang",20);window.alert(pipStu.name);

PS:由于JS是动态语言，如果不执行，则不能实现继承效果；
可以通过对象冒充实现多继承；

**JS的重载和重写：
重载：js中不支持重载（即，不可以通过参数的个数来决定调用的哪个函数），
但是因为js本身支持可变参数，所以，可以看成是天然支持重载：
例如：

function abc(){    if(arguments.length==````){        ```````    }else if(){````}}

**重写：子类可以重新写函数，来覆盖父类中的某个方法；
例如：

//JSd代码：//抽象出一个学生类，（即把中学生和小学生的共性取出）function Stu(name,age){this.name=name;this.age=age;this.show=function(){window.alert(this.name+this.age);}}function pipStu(name,age){this.stu=Stu;this.stu(name,age);//实现重写this.show=function(){window.write("pipStu.show()");}}var midStu=new MidStu("xiaoming",20);window.alert(midStu.name);var pipStu=new pipStu("xiaowang",20);window.alert(pipStu.show());

(4)多态：
所谓多态，就是指一个引用类型在不同情况下的多种状态；
在JAVA中多态是通过指向父类的引用，来调用不同子类中实现的方法
JS实际上是无态的，是一种动态语言，一个变量的类型是在运行的
过程中由JS引擎来决定的，所以说JS天然支持多态；

举例：

  //JSd代码：function Food(name){    this.name=name;}function bone(name){    this.food=Food;    this.food(name);}function fish(name){    this.food=Food;    this.food(name);}function Animal(name){    this.name=name;}function cat(name){    this.animal=Animal;    this.animal(name);}function dog(name){    this.animal=Animal;    this.animal(name);}function Master(name){    this.name=name;    this.feed=function(animal,food){        window.alert(this.name+"给"+animal.name+"喂"+food.name);    }}var dog=new dog("小狗");var cat=new cat("小猫");var fish=new fish("小鱼");var bone=new bone("骨头");var master=new Master("小明");master.feed(dog,bone);master.feed(cat,fish);

(5)闭包：
解释：
1.闭包与gc有关联的；
2.闭包实际上是涉及到一个对象的属性，何时被gc的处理问题；
3.怎么样才能对对象的属性形成一个闭包呢：（如下）

举例：function A(){var i=0;function b(){window.alert(i++);}return b;}A();//此时内存中i空间需要被处理var c=A();//由于返回b给C，则不确定i什么时候还会被用，则不进行处理c();//输出0c();//输出1，证明i变量被闭包；

6.JS中的内部类
((1).javascript中本身有提供的一些，可以直接使用的类这种类就是内部类
主要有8种：
Object/number/String/Array/Math/Boolean/RegExp/Date

(2).内部类分类：
从使用上来看，分为静态类和动态类：
静态类：
   类名.属性名/方法；
比如：Math.abs(-12);//表示绝对值

动态类：
   var 对象名=new 动态类（）
   对象名.属性/方法

比如：//显示当前日期
   var nowdate=new Date();
   window.alert(nowdate.toLocalString());

1.Math类：提供常用的数学函数和常数：

//Math//返回绝对值window.alert(Math.abs(-12));//对一个数向下取整window.alert(Math.floor(4.5));//对一个数四舍五入window.alert(Math.ceil(4.5));//对一个数向上取整window.alert(Math.round(4.77));//返回一个大于0小于1的16位小数位的数字window.alert(Math.random());//返回一个0~100的数window.alert(Math.round(Math.random()));//求x,y中较小的数window.alert(Math.min(4,5));//求x,y中较大的数window.alert(Math.max(5,6));

2.Date类：
提供日期和时间操作：

//Date的常用方法//var date=new Date();window.alert(date.toLocaleString());//获得年份//出现兼容性问题，用getYear()会出问题document.write(date.getFullYear());//获得月份要加1（0~11）document.write(date.getMonth()+1);//获得一个月的某一天document.write(date.getDate());//获得一周中的某一天（0~6）星期天开始；document.write(date.getDay());//时document.write(date.getHours());//分document.write(date.getMinutes());//秒document.write(date.getSeconds());

3.String类：

//JSd代码：var str="abc12345";//获得字符串长度window.alert(str.length);//split 用于分隔为字符串数组；var str2="abc def oop";var arr=str2.split(" ");window.alert(arr);//substr提取从start下标开始的指定书目的字符var str3="abcdef";window.alert(str3.substr(1,3));//substring提取字符串中介于两个小标之间的字串，包括第一个数，但不包括最后面一个window.alert(str3.substring(1,3));//charAt（）返回指定位置的字符var str4="abcef";window.alert(str4.charAt(3));//indexOf()返回某个字符串值在该字串中首次出现的位置var str5="ab cd dd,tt";window.alert(str5.indexOf("ab",0));

4.Array类：
对数组进行操作；

var myarr=new Array();//动态添加数据myarr[0]="sp";myarr[1]=22；//输出元素window.alert(myarr.length+" "+myarr);myarr.pop();//出栈；window.alert(myarr.length+" "+myarr);myarr.push("abc");//入栈；window.alert(myarr.length+" "+myarr);

5.boolean类：动态类：
1.toString();
2.valueOf();

6.Number类：动态类
1.toString(radix);//radix表示几进制
var a=100;
a=a.toString();
2.toFixed(num);//把数字转为字符串，并保留num位小数

***************************************************
JS事件驱动：
1.原理图：（附件图事件监听原理图）
2.事件分类：
（1）.鼠标事件
（2）.键盘事件
（3）.HTML事件
（4）.其他事件

举例：
1.点击事件（获取鼠标坐标和当前时间）

<!--HTML代码--><body onclick="getMousePosition(event)"><input type="button" value="点击获取时间" onclick="getNowTime()"/></body>//JSd代码：function getNowTime(){var date=new Date();window.alert(date.toLocaleString());}function getMousePosition(e){window.alert("x= "+e.clientX+"y= "+e.clientY);}

2.通过修改内联style的属性来改变样式属性：

<!--HTML代码--><body><div class="colorDiv" id="colorDiv1" style="background-color:red;width:300px;height:300px;"></div><!--这边需要注意的是两个按钮绑定同一个事件处理函数--><!--通过传一个自身对象作为处理事件对象来判断当前事件对象--><input type="button" value="红色" onclick="setcolor(this)"/><input type="button" value="黑色" onclick="setcolor(this)"/></body>//JSd代码：function setcolor(e){var div=document.getElementById("colorDiv1");if(e.value=="红色"){div.style.backgroundColor="red";}else if(e.value=="黑色"){div.style.backgroundColor="black";}}

3.通过修改外部CSS的属性来改变样式属性：

<!--HTML代码--><body><div class="colorDiv" id="colorDiv1"></div><!--这边需要注意的是两个按钮绑定同一个事件处理函数--><!--通过传一个自身对象作为处理事件对象来判断当前事件对象--><input type="button" value="红色" onclick="setcolor(this),test(this)"/><input type="button" value="黑色" onclick="setcolor(this),test(this)"/></body>//JSd代码：function setcolor(e){//获取这个网页中的第几个css样式表文件（因为有可能引入多个CSS文件）（下标从0开始）//但是注意在不同浏览器下获取的方式有些不同，一般采用这两种//1：document.styleSheets[0].cssRules//2:document.styleSheets[0].rules//3：利用？ ：来实现兼容问题解决var cssRules=document.styleSheets[0].cssRules?document.styleSheets[0].cssRules:document.styleSheets[0].rules;//得到样式表后还需要通过遍历查找到对应选择器下的样式var style1;for(var i=0;i<cssRules.length;i++){window.alert("aa");//查找在样式表中通过selectorText来查找相应的选择器；if(cssRules[i].selectorText==".colorDiv"){style1=cssRules[i];}}if(e.value=="红色"){//根据具体选择器下的样式选择属性style1.style.backgroundColor="red";}else if(e.value=="黑色"){style1.style.backgroundColor="black";}}function test(e){window.alert("一个事件可以被多个事件函数监听");}

**
常用的几个事件：
window有三个小事件：
onload 页面打开；
onbeforeunload 关闭页面前
onunload 关闭页面
oncontexmenu 是否按右键跳出菜单
onselectstart 是否可选定页面信息

举例：<!--HTML代码--><body onload="testOnload()" onbeforeunLoad="testOnbeforeunload()" oncontextmenu="return testOncontextmenu()" onselectstart="return testOnselectstart()"><div>div</div><input type="text" onfocus="testOnfocus()" /></body>//JSd代码：function testOnload(){window.alert("测试onload方法");}function testOnfocus(){window.alert("测试onfocus方法");}//在IE下有用，其他浏览器不兼容function testOnbeforeunload(){window.alert("测试testOnbeforeunload方法");}function testOncontextmenu(){window.alert("测试testOncontextmenu方法");return false;}function testOnselectstart(){window.alert("测试testOnselectstart方法");return false;}

0 0