韩顺平javascript面向对象基于对象笔记汇总.docx
- 文档编号:13703760
- 上传时间:2023-06-16
- 格式:DOCX
- 页数:15
- 大小:193.26KB
韩顺平javascript面向对象基于对象笔记汇总.docx
《韩顺平javascript面向对象基于对象笔记汇总.docx》由会员分享,可在线阅读,更多相关《韩顺平javascript面向对象基于对象笔记汇总.docx(15页珍藏版)》请在冰点文库上搜索。
韩顺平javascript面向对象基于对象笔记汇总
Js面向(基于)对象编程
一、⊙澄清概念
js中基于对象==js面向对象
js中没有类class,但是它取了一个新的名字叫原型对象,因此,类==原型对象
二、⊙为什么需要对象
问题提出:
/*
张老太养了两只猫:
一只名字叫小白,今年3岁,白色,还有一只叫小花,今年10岁,花色。
请编写一个程序,当用户输入小猫的名字时,就显示该猫的名字,年龄,颜色。
如果用户输入小猫的名字错误时,则显示张老太没有这只猫猫。
*/
//传统方法比较麻烦
cat1_name="小白";
varcat1_age=3;
varcat1_color="白色";
//解决办法,把猫的属性集中,创建一种新的数据类(原型对象/类
//用面向对象的方法来解决上面的问题
//这里就是一个类cat类
functioncat({
}
//如果这样用
//cat(//函数
varcat1=newcat(//类
//这时cat1就是一个对象(实例
cat1.name="小白";
cat1.age=3;
cat1.color="白色";
//从上面的代码我们可以看出
//1.js中的对象的属性可以动态添加
//2.属性没有限制
window.alert(cat1.name+cat1.age+cat1.color+cat.hobby;
三、⊙类(原型对象和对象的区别和联系
(1类是抽象的,概念,代表类事物
(2对象是具体的,体表一个实体
(3对象是以类(原型对象为模板创建起来的实体
四、⊙创建对象的方式有五种
(1工厂方法—使用newObject创建对象并添加相关属性.
(2使用构造函数来定义类(原型对象.
(3使用prototype
(4构造函数及原型混合方式.
(5动态原型方式.
目前我们先讲使用构造函数来定义类(原型对象,然后再创建对象实例.
基本语法:
function类名/原型对象({
}
创建对象:
var对象名=new类名(
现在对对象特别说明:
1.js中一切都是对象
functionPerson({}
window.alert(Person.constructor;
vara=newPerson(;
window.alert(a.constructor;//a对象实例的构造函数
window.alert(typeofa;//a的类型是什么
varb=123;
window.alert(b.constructor;
window.alert(typeofb;
varc="123";
window.alert(c.constructor;
window.alert(typeofc;
//思考:
如何判断一个对象实例是不是Person类型?
if(ainstanceofPerson{
window.alert("a是Person1";
}
if(a.constructor==Person{
window.alert("a是Person2";
}
五、⊙补充说明(全局变量与局部变量的区别
//全局变量
varabc=89;
functiontest({
//在函数里,如果不带var,则表示使用全局的abc变量
//如果带var,则表示在test(中,定义了一个新的abc变量(局部变量
abc=900;
}
test(;
window.alert(abc;
访问对象的属性有两种方法:
(1普通方式
对象名.属性名
(2动态访问
对象名[“属性名”]
functionperson({}
varp1=newperson(;
p1.name="阿华";
window.alert(p1.name;//普通方式
window.alert(p1["name"];
varval="na"+"me";
window.alert(p1[val];//动态方式
对象引用问题的说明(图
js还提供一种方式,主动释放对象内存
delete对象名.属性、;//这样就会立即释放对象的这个属性的空间
六、⊙this
◇问题的提出:
functionPerson({};
varp1=newPerson(;
p1.name="老韩";
p1.age=30;
window.alert(p1.name+""+p1.age;
varp2=newPerson(;
window.alert(p2.name;//这里会输出什么呢?
(undefine;
这里我们可以看到window.alert(p2.name会输出undefined
在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性
[比如:
当我们创建一个Person对象后,就希望该对象自动拥有name和age属性,这又怎么办?
]
◇使用this来解决
functionPerson({
this.name="abc";
this.age=30;
}
varp1=newPerson(;
varp2=newPerson(;
window.alert(p1.name+""+p2.name;
◇可能有人会这样去思考问题
//***有些同学可能会这么想:
functionPerson({
varname="abc";//私有的,只能在内部使用
varage=30;//私有的,只能在内部使用
this.name2="abc2";//this.name2表示name2这个属性是公开的
this.show=function({//函数这就是Person类里面的一个公开的方法
window.alert("name"+name+"age"+age;
}
functionshow2({//这就是Person类里面的一个私有的方法,只能在类内部使用,
//如要一定要使用,只能通过公开方法(特权方法来调用私有方法来实现
window.alert("show2("+name+"age"+age;
}
}
varp1=newPerson(;
p1.show(;
//p1.show2(;//这里会报错
//window.alert(p1.name+""+p1.age;//错误的
记住一句话:
哪个对象实例调用this所有的函数,那么this就代表哪个对象实例
This注意事项:
This不能放在类的外部使用,否则调用就变成window调用了
◇对象---成员函数
给一个对象添加(指定函数的几种方式
1.通用常用方式:
functionPerson({
this.name="abc";
this.age=30;
this.show=function({
window.alert("name:
"+this.name+""+"age:
"+this.age;
}
}
varp1=newPerson(;
p1.show(;
2.方式二:
functionPerson({
this.name="abc";
this.age=30;
}
functionshow1({
window.alert("name:
"+this.name+""+"age:
"+this.age;
}
window.alert(show1;//这个解释下面的p2.show=show2的疑惑.这个输出的是上面
//的函数代码.(构造函数
varp2=newPerson(;
p2.show=show1;//记住不要加括号
p2.show(;
3.方式三:
functionPerson({
this.name="abc";
this.age=30;
}
varp3=newPerson(;
p3.show=functionshow2({
window.alert("name:
"+this.name+""+"age:
"+this.age;
}
p3.show(;
加强思考题看它们会输出什么?
题1.
functionPerson({
this.name="abc";
this.age=30;
}
functionshow1({
window.alert("name:
"+this.name;
}
varp2=newPerson(;
p2.show=show1;
show1(;//注意思考会输出什么?
提示谁调用它.this就代表谁
答案:
name:
空白(undefined
题2.
functionPerson({
this.name="abc";
this.age=30;
}
Varname="abc2";
functionshow1({
window.alert("name:
"+this.name;
}
varp2=newPerson(;
p2.show=show1;
show1(;
答案:
nane:
abc2
4.方式四:
前几种方法有一个问题,那就是以上对象独占函数代码,这样如果对象过多,则会影响效率,js设计者,给我们提供了别一个方法,原型法:
这样多个对象可以共享函数代码,代码如下:
functiondog({
}
//使用prototype去绑定一个函数给shout
dog.prototype.shout=function({
window.alert('小狗';
}
vardog1=newdog(;
dog1.shout(;
vardog2=newdog(;
dog2.shout(;//ok
window.alert(dog1.shout==dog2.shout;//返回true
//扩展
vardog3=newdog(;
vardog4=newdog(;
vardog5=dog4;
window.alert(dog3==dog4;//false不是同一个地址
window.alert(dog4==dog5;//true
对代码原理说明图:
补讲==号的作用
1.当==的两边都是字符串的时候,则比较内容相等否。
2.如==的两边都是数字的时候,则数的大小是否相等。
3.如==的两边是对象或对象中的函数属性,则比较地址是否相等。
六、加深对类和对象的认识
如何给类添加方法(如何给某类型的所有对象添加方法)
//创建Person实例
/*
functionPerson({
}
varP1=newPerson(;
P1.name="sp";
window.alert(P1.name;
*/
//初步体验Object类,通过Object直接创建对象//Object超类
/*
varP1=newObject(;
P1.name="abc";
window.alert(P1.name;
window.alert(P1.constructor;
*/
/*
vari=newNumber(10;
//我们可以给类添加方法.
Number.prototype.add=function(a{
returnthis+a;
}
window.alert(i.add(10.add(30;
varb=90;
window.alert(b.add(40;
*/
/*
请思考给js的Array对象扩展一个find(val方法,当一个Array对象调用该方法
时候,如果能找到val则返回其下标,否则返回-1;
*/
//体验一下array;
vararr=newArray(3
arr[0]="George"
arr[1]="John"
arr[2]="Thomas"
//遍历该数组
for(vari=0;i
document.write('name:
'+arr[i]+" ";
}
document.write("
";
//使用array的方法,我们颠倒顺序
arr.reverse(;
for(vari=0;i
document.write('name:
'+arr[i]+" ";
}
//现在我们一起看看如何给所有array对象添加一个方法find(val;
Array.prototype.find=function(val{
//遍历数组this
for(vari=0;i
if(val==this[i]{
returni;
}
}
return-1;
}
document.write("下标为"+arr.find("Thomas";
document.write("下标为"+arr.find("jime";
◇闭包
这个知识点,在讲到封装的时候再说!
◇成员函数的细节
4.成员函数的参数可以是多个
Function函数名(参数......){
}
5.成员函数可以返回值,也可以没有,但是有的话,最多只有一个
Function函数名(参数列表{
语句;//函数主体
return返回值;
}
6.js中不支持函数的重载,具体案例
functiontest(a,b{
window.alert("hello";
}
functiontest(a{
window.alert(a;
}
functiontest(a,b{
window.alert(a+""+b;
}
//test(23;
window.test(3,"hello";
结论:
1.js在调用一个函数的时候,是根据函数名来调用的,如果有多个函数名相同,则认最后那一个函数.
2.直接定义一个函数或者变量,实际上这些函数和变量就是全局函数和全局变量(本质上他们是属于window对象的
◆面向对象综合案例
游戏的分析:
1.看看如何通过按钮来控制mario的位置
2.设计相关的对象(Mariox,y......
基本代码给大家:
要求:
1.mario碰到边界给一个提示
2.mario可以去找另外一个物体
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 顺平 javascript 面向 对象 基于 笔记 汇总