温习javascript面向对象-优快云博客

本文深入探讨JavaScript面向对象编程，包括构造函数、原型继承、闭包、作用域、this关键字及类的扩展等内容，并通过具体示例展示如何实现继承。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Code:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript面向对象编程</title>
<scriptsrc="Scripts/jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
//functionanimal(name){
//this.name=name;
//this.age=0;
//}
//vara1=animal;
//alert(a1);//弹出整个函数体
//vara2=animal("dinglang");
//alert(a2);//弹出undefined
//vara3=newanimal();
//alert(a3);//弹出object
//vara4=newanimal;
//alert(a4);//弹出object
//求值
//alert(sum(1,3));//要求弹出结果为4
//alert(sum(1,3,5,4,7));//要求弹出结果为20
//根据java或者C#的编程经验，首先想到的是函数重载。
//functionsum(a,b){
//returna+b;
//}
//functionsum(a,b,c,d,e){
//returna+b+c+d+e;
//}
//不幸的是，javascript并不支持函数重载。如果照上面那么写，只有下面的那个函数才会生效
//javascript支持可变参数的函数
functionsum(){
varn=0;
for(vari=0;i<arguments.length;i++){
n+=arguments[i];
}
returnn;
}
//javascript高级知识--闭包
//函数里面嵌套函数，且在外部被引用了，所以这个对象i不会被垃圾回收机制清除,所以i递增
functionf1(){
vari=0;
varf2=function(){
i++;
alert(i);
}
returnf2;//f2对象指的是整个函数体
}
varf3=f1();//"f1()"就是指该函数的执行结果或者返回值--f2
//f3();//1
//f3();//2
//f3();//3
//作用域与this关键字
//varobj=newObject();
//obj.v="visaobject";
相当于这么写
//varobj2={v:"visaobject"};
//作用域Scope
varb1={v:"thisisb1"};
varb2={v:"thisisb2"};
functionb(x,y){
//alert(this.v+","+x+","+y);
}
b("ding","lang");//undefined,"ding","lang"
//调用b函数时，b函数中的this关键字指的是window对象.而Window对象中没有v对象，所以undefined
//window.b("ding","lang");//undefined,"ding","lang"--与b("ding","lang");意义相同
//b.call();//就等于b();
//call函数的第一个参数表示的是函数的上下文--表示b函数中的this所以this关键字=b1
//b.call(b1,"ding","lang");//thisisb1,ding,lang
//注意apply函数的用法：第一个参数表示的也是函数中的上下文。不过后面的参数要以数组的形式传递
//b.apply(b2,["ding","lang"]);thisisb1,ding,lang
//关于作用域，再补充一点
varb3={v:"thisisb3",
sayHello:function(){
alert(this.v);
}
}
//b3.sayHello();//thisisb3
//b3.sayHello.call(b1);//会调用b1对象中的sayHello函数--thisisb1
//for...in
//vararr=newArray();//new一个js数组，与c#、java等编程语言不同，可以不指定长度
//arr[0]=1;//赋值
//arr[1]=2;
//arr[2]=3;
//javascript支持直接定义赋值
vararr=newArray(1,2,3);
for(vari=0;i<arr.length;i++){
//alert(arr[i]);//弹出1，2，3
}
//注意：javascript中的for...in，看起来与C#或者java中的foreach类似，但是不同
for(varkeyinarr){
//alert(key);//弹出0，1，2key指的是键，而不是值。在C#的foreach中，“in”前的变量指的是值
//alert(arr[key]);//可以使用这种方式取值--key指的是键，也就是某个对象中包含的所有的对象，而不是值
}
//假如我没有firebug，想使用IE实现类似与firebug控制台中console.dir的功能，可以这样
for(varkeyinwindow){
//这样就能将window对象中，包含的全部对象迭代显示出来。也就实现了firebug中console.dir的功能
//document.getElementById("key").innerHTML+=(key+":"+window[key]+"</br>");
}
//对象的删除（释放内存--在extjs组件中常用）
//deleteb3.v;//删除b3对象中的v成员
//alert(b3.v);//undefined--因为v这个成员已经被删除了
//类的修改，扩展（重点，难点）
//1.假如我要实现一个简单的加法计算
//varnumOne=5;//如果直接这么定义，那么下面的numOne.add(8);执行会报错
//如果我这么写，下面调用就不会报错了(因为此时的numOne，是个类.相当于java或C#语言中原始的基本数据类型、包装类型)
varnumOne=newNumber(5);
numOne.add=function(numTwo){
returnthis+numTwo;
}
//alert(numOne.add);//undefined
//alert(numOne.add(8));//这样写看起来没错，但是会报错--numOne.addisnotafunction
varnumThree=newNumber(100);
//如果我现在想要给numThree对象中也加上add这么一个函数
//直接使用prototype这个特殊的属性来实现，给所有的Number类型实例都加入add函数
Number.prototype.add=function(numTwo){
returnthis+numTwo;
}
alert(numThree.add(200).add(300));//弹出600100+200+300=600
//说明所有的Number类型确实都具有了add这么一个函数超级延时绑定--类的扩展
//小例子--扩展String类，给所有的String类加上sayILoveYou
//String.prototype.sayILoveYou=function(){
//alert(this.toString()+",ILoveYou");
//}
//varstrOne="dinglang";
//strOne.sayILoveYou();
//javascript中的类的用法
//使用构造函数的方式，定义简单的Person类（javascript函数也是一个类）
functionPerson(name){
this.name=name;
this.age=20;
varyear=2010;//定义一个私有的成员sex
//this.sayHello=function(){
//alert(this.name+":今年"+this.age+"岁,HelloWold");
//可以直接在这里面定义sayHello成员函数（特权方法），但是每次实例化该类的时候都会重新去定义，所有还是选择用prototype属性的方式
//如果在sayHello函数中要使用year这个私有对象，就可以直接在此定义这个特权方法。这就是典型的“闭包”。
}
//如果使用了new关键字，说明Person就是一个类。否则的话，只是一个普通的函数
varp1=newPerson("丁浪");//new一个Person类的实例
varp2=newPerson("蔡世友");//注意：别按照java或者C#的习惯，写成了Personp=newPerson("XXX");
//给Person这个自定义的类，添加一个sayHello函数
Person.prototype.sayHello=function(){
alert(this.name+":今年"+this.age+"岁,HelloWold");
}
p1.sayHello();
p2.sayHello();
//实现javascript中的继承
functionclassA(name){
this.name=name;
this.showName=function(){
alert(this.name);
}
}
functionclassB(name){
//1)使用newMethod的方式实现继承
//this.newMethod=classA;
//this.newMethod(name);
//deletethis.newMethod;//释放对象
//2)调用claasA这个函数，并把他的上下文(作用域)指向this(也就是classB类的实例)
//这样也能实现继承效果（使用call或者apply）
classA.call(this,name);
//classA.apply(this,[name]);
}
objA=newclassA("操作系统");
objB=newclassB("组成原理");
objA.showName();//弹出“操作系统”
objB.showName();//弹出“组成原理”
})
</script>
</head>
<body>
<divid="key"></div>
</body>
</html>