javascript中如何实现封装,继承和多态,并有详细的示例.ppt

1,JavaScript与OOP,欢迎交流:lifenote,2,目标,Function对象的apply方法自定义对象封装继承多态,3,apply(),Javascript的每个Function对象中有一个apply方法语法：function.apply(thisObj,argArray)功能：可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。用来模拟多态另外一个相似的方法function.call(thisObj,arg1,arg2,.argN),4,示例,functionObject1(name)=name;this.fun1=function()alert(这是第一个方法。);this.fun2=function()alert(这是第二个方法。);functionObject2(name)Object1.apply(this,name);varo2=newObject2(中华人民共和国);o2.fun1();o2.fun2();alert();,5,基本概念,自定义对象根据JS的对象扩展机制，用户可以自定义JS对象，这与Java语言有类似的地方。如：Math、Date、String等原型（prototype）通过prototype可以为对象在运行期间添加新的属性和方法。,6,创建对象(1),对象初始化器方式语法objectName=property1:value1,property2:value2,propertyN:valueN,method1:function(arguments),其中：property是对象的属性，value则是对象的值，值可以是字符串、数字或对象三者之一。,7,示例,varUsers=name:中国,register:function(i)alert(注册了+i+次);Users.register(3);alert(U);,8,创建对象(2),构造函数方式编写一个构造函数，并通过new方式来创建对象，构造函数本可以带有构造参数。可以在对象中定义私有成员、实例成员和类成员,9,示例,/订单构造函数functionOrder(date,total)this.date=date;this.total=total;this.calc=function(name)alert(name+正在统计+this.date+下的订单,总数为+this.total);varo=newOrder(newDate(),10);o.calc(李赞红);,10,对象属性的定义,私有属性私有属性只能在构造函数内部定义与使用。实例属性必须在对象实例化后才能使用prototype方式，语法格式：functionNpertyName=valuethis方式，语法格式：pertyName=value类属性直接通过类名去使用语法格式：functionNpertyName=value,11,示例,functionCustomer()=北大青鸟;/对象属性varbrowser=(document.all?IE:FireFox);/私有属性Ctotype.theBrowser=browser;/对象属性Cpany=北大青鸟教育集团;/类属性/Testalert(Cpany);varc=newCustomer();alert(+rn+c.theBrowser);,12,对象方法的定义,私有方法私有方法只能在对象内部使用实例方法实例方法必须在对象实例化后才能使用语法与对象属性相同类方法类方法可以直接通过类名去使用,13,示例,functionMiss()varyou=function()alert(“Missyou”);/私有方法this.me=function()alert(“missme”);/对象方法/对象方法Mtotype.he=function()alert(misshim);/类方法Miss.she=function()alert(missshe);Miss.she();varm=newMiss();m.me();m.he();,14,小结,15,动态删除属性和方法,对于已经实例化的对象，我们可以动态增加和删除它的属性与方法语法:动态删除对象属性pertyName动态删除对象方法deleteobj.methodName,16,理解几个常用的方法(1),类的创建模型varClass=create:function()returnfunction()this.initialize.apply(this,arguments);说明:1.使用Class.create()可以创建任何对象2.自定义对象中必须实现initialize方法,该方法相当于JAVA中的构造方法,此处体现了多态特征,17,理解几个常用的方法(2),$()方法var$=function(id)returnstring=typeofid?document.getElementById(id):id;说明通过$(“id”)访问在框架jquery,prototype中都有类似的定义.,18,理解几个常用的方法(3),继承模拟varExtend=function(desc,src)for(varpropertyinsrc)descproperty=srcproperty;Ototype.extend=function(obj)Extend.apply(this,this,obj);vars=newStudent(1,李赞红,30);vars2=newStudent();s2.extend(s);s2.getInfo();s2.reading();,19,典型的对象定义-Student,varClass=create:function()returnfunction()this.initialize.apply(this,arguments);varStudent=Class.create();Student.MAX_AGE=100;Student.MIN_AGE=1;,20,Stotype=initialize:function(id,name,age)this.id=id;=name;thiskiss=这是描述性信息;if(age=Student.MIN_AGE,21,测试vars=newStudent(1,“杨过,30);s.getInfo();s.reading();,22,抽象类,抽象方法抽象方法就可以看作该类中没有定义的方法，但已经通过this指针使用了,抽象方法必须在子类中实现.这个和传统的语言(如JAVA)不同抽象类如果类中定义了抽象方法,该类就是抽象类,不能实例化,只能作为父类使用,23,继承,继承一个类派生出另一个类在javascript中,继承依赖于下面的两个方法:varExtend=function(desc,src)for(varpropertyinsrc)descproperty=srcproperty;returndesc;Ototype.extend=function(obj)returnExtend.apply(this,this,obj);,24,定义抽象类,varBase=Class.create();Btotype=initialize:function(),/此方法必须myFun:function()this.oninit();/该方法未实现,myMethod:function()alert(这是mymethod方法);,25,子类,varSub=Class.create();Stotype=(newBase().extend(oninit:function()alert(中华人民共和国););/Testvars=newSub();s.myFun();/该方法从Base中继承s.myMethod();/该方法从Base中继承,26,继承与多态示例,本示例定义一个抽象类动物类,所有动物都能行走,但不同类型的动物行走的方式不同,所以,将具体行走的方法放到子类实现鸟类和鱼类.,27,基础代码,/类创建模型varClass=create:function()returnfunction()this.initialize.apply(this,arguments);/模拟继承varExtend=function(desc,src)for(varmemberinsrc)descmember=srcmember;returndesc;/动态为Object添加extend方法,用来完成继承Ototype.extend=function(obj)returnExtend.apply(this,this,obj);,28,抽象类动物类,/动物类varAnimal=Class.create();/为动物添加抽象方法Atotype=/初始函数,相当于构造方法initialize:function(name)=name;,walking:function()this.abstractWalking();/相当于抽象方法,不需要任何实现,等子类去实现;,29,子类鸟类与鱼类,/鸟类(子类)varBird=Class.create();Btotype=(newAnimal().extend(abstractWalking:function()alert(鸟靠翅膀飞着走路,名称:+););/鱼类(子类)varFish=Class.create();Ftotype=(newAnimal().exten