《javascript面向对象编程.ppt》由会员分享,可在线阅读,更多相关《javascript面向对象编程.ppt(50页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、成都传智播客 成都传智播客成都传智播客-助你成为高薪程序员助你成为高薪程序员1 1、20102010年年7 7月,传智播客在成都设立分中心(传智播客成都分中月,传智播客在成都设立分中心(传智播客成都分中心),心),EasyJFEasyJF开源创始人蔡世友老师任首席讲师,开源创始人蔡世友老师任首席讲师,7 7月月8 8日,成都传日,成都传智播客智播客JavaEE+3GJavaEE+3G就业班第一期正式开课。就业班第一期正式开课。2 2、20102010年年9 9月,成都传智播客推出月,成都传智播客推出先就业后付款先就业后付款,毕业后,毕业后没有从没有从事软件开发、月薪未达指定数额,则退还全部学费
2、事软件开发、月薪未达指定数额,则退还全部学费的优惠政策,广的优惠政策,广受学员好评。受学员好评。3 3、20102010年年1111月,第一期学员毕业,在仅一个月的时间里,全部月,第一期学员毕业,在仅一个月的时间里,全部学员顺利就业学员顺利就业(工作地为工作地为成都成都),如愿走上软件开发工程师的岗位,如愿走上软件开发工程师的岗位,月薪平均月薪平均30003000以上,有个别学员甚至拿到以上,有个别学员甚至拿到4K4K、K K。4 4、20112011年年2 2月,成都传智携手月,成都传智携手CSDNCSDN推出推出“黑马训练营黑马训练营”课程,并课程,并作如下承诺:作如下承诺:“不用花一分钱
3、即可入学、不就业不还学费、就业不不用花一分钱即可入学、不就业不还学费、就业不做软件开发不还学费做软件开发不还学费”,让学员,让学员“就业后靠自己的能力逐步偿还学就业后靠自己的能力逐步偿还学费费”。成都传智播客 JavascriptJavascript面向对象编程面向对象编程 讲师:蔡世友讲师:蔡世友Email:成都传智播客 Javascript的重要性l使用率使用率、在web应用中,涉及到前端界面编程基本上都要用到javascript语言;2、Web2.0及Ajax推动了javascript语言。3、随着大量的c/s应用转向b/s,富客户端技术的不断推广,javascript语言的应用范围还将
4、不断加大;ljavascript的特点的特点简单动态基于对象(面向对象)成都传智播客 Javascript面向对象概述Javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。他具有面向对象语言所特有的各种特性,比如封装、继承及多态等。但对于大多数人说,我们只把javascript做为一个函数式语言,只把他用于一些简单的前端数据输入验证以及实现一些简单的页面动态效果等,我们没能完全把握动态语言的各种特性。在很多优秀的Ajax框架中,比如ExtJS、JQuery等,大量使用了javascript的面向对象
5、特性,要使用好ext技术,javascript的高级特性,面向对象语言特性是我们必须完全把握的。成都传智播客 Javascript的相关知识lJavascript的发展历程lJavascript的三大组成部分lECMAScript语法数据类型语句关键字保留字操作符对象lDOM(Document Object Model)lBOM(Browser Object Model)lJavaScript灵活特性探讨灵活特性探讨成都传智播客 Javascript中的数据类型l基本数据类型基本数据类型数字(Numbers)字符串(Strings)布尔Boolean特殊值(null、undefined、NaN
6、)。l对象类型对象类型Object 对象属于复杂的数据类型,对象下面可以包含基本类型、对象、函数等,数组是一种对象类型。对于javascript来说,可以说一切都是对象,包括类!。var c=new Object();成都传智播客 程序流程控制l顺序结构顺序结构 lif条件选择语句条件选择语句 lswitch选择语句选择语句 lwhile循环语句循环语句 ldo while语句语句 lfor循环语句循环语句 lbreak与与continue语句语句 成都传智播客 for.in循环语句for(变量 in 集合或对象)执行语句块var as=1,4,5,6,output=;for(var x in
7、 as)output+=x=+asx;alert(output);var as=id:5,name:test;for(var x in as)output+=x+=+asx;alert(output);成都传智播客 逻辑运算符&逻辑与,当左右两边操作数都为true时,返回值为true,否则返回false。|逻辑或,当左右两边操作数都为false时,返回其中第一个不为false的值或者false。!逻辑非,当操作数为true时,返回值为false,否则返回true。注意:在逻辑运算中,0、false、null、undefined、NaN均表示false。成都传智播客 函数的定义及调用定义一个函数
8、的格式如下:function 函数名(参数列表)程序代码return 表达式;var msg=全局变量;function square(x,y)var sum;sum=x*x+y*y;return sum;function show()var msg=局部变量;alert(msg);/var sum;alert(sum=+sum);sum=square(2,3);alert(sum=+sum);show();undefinedalert(sum=+square(2,3);对函数进行调用的几种方式:函数名(传递给函数的参数1,传递给函数的参数2,.)变量=函数名(传递给函数的参数1,传递给函数的
9、参数2,.)对于有返回值的函数调用,也可以在程序中直接使用返回的结果,例如:alert(sum=“+square(2,3);不指定任何函数值的函数,返回undefined。成都传智播客 函数的参数可变性(arguments)function sum()var s=0;for(var i=0;iarguments.length;i+)s+=argumentsi;return s;sum(1,2);sum(3,4,5);最多255个。通过函数对象的length可以返回函数希望提供的参数个数。成都传智播客 使用Function类创建函数l创建动态函数的基本语法格式:var varName=new F
10、unction(argument1,.,lastArgument);l说明:所有的参数都必须是字符串型的,最后的参数必须是这个动态函数的功能程序代码。l例子:var square=new Function(x,y,var sum;sum=x*x+y*y;return sum;);alert(square(3,2);var alsoDoSquare =doAdd;alert(alsoDoSquare(3,2);成都传智播客 闭包(closure)Javascript闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁。这样在
11、执行完var c=a()后,变量c实际上是指向了函数b,b中用到了变量i,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个我们通常所谓的“闭包”。function a()var i=0;function b()alert(+i);return b;var c=a();c();闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。成都传智播客
12、函数的作用域及this1、在函数或方法中可以使用this来引用函数所在的当前对象2、当没有明确指定函数的当前对象时,作用域为window3、可以使用call及apply来动态改变函数执行的作用域var b1=v:this is b1;var b2=v:this is b2;function b(d)alert(this.v);b();/输出:window.b();/输出:b.call(b1);/输出:b.apply(b2);/输出:成都传智播客 JavaScript中的系统函数(Global类)lencodeURI及encodeURIComponent方法返回对一个URI字符串编码后的结果。l
13、decodeURI及decodeURIComponent()方法将一个已编码的URI字符串解码成最初始的字符串并返回。lparseInt方法将一个字符串按指定的进制转换成一个整数,语法格式为:parseInt(numString,radix)。如果没有指定第二个参数,则前缀为 0 x 的字符串被视为十六进制,前缀为 0 的字符串被视为八进制,所有其他字符串都被视为是十进制。lparseFloat方法将一个字符串转换成对应的小数。lisNaN方法用于检测parseInt和parseFloat方法的返回值是否为NaN。lescape方法返回对一个字符串进行编码后的结果字符串。所有空格、标点、重音符
14、号以及任何其他非 ASCII 字符都用%xx 编码替换,其中xx等于表示该字符的Unicode编码的十六进制数,字符值大于255的字符以%uxxxx格式存储。lunescape 方法将一个用escape方法编码的结果字符串解码成原始字符串并返回。leval 方法将其中的参数字符串作为一个JavaScript表达式执行。成都传智播客 JavaScript的内部类动态对象使用“对象实例名.成员”的格式来访问其属性和方法。静态对象直接使用“对象名.成员”的格式来访问其属性和方法。lObject类(对象)lNumber类(对象)lString类(对象)lMath类(对象)lDate类(对象)ltoSt
15、ring方法 成都传智播客 Object类Object类是所有javascript类的基类,提供了一种创建自定义对象的简单方式,不需要程序员再定义构造函数。主要属性:constructor-对象的构造函数prototype-获得类的prototype对象,static性质主要方法:hasOwnProperty(property)是否属于本类定义的属性isPrototypeOf(object)是否是指定类的prototypepropertyIsEnumerable(property)是否可例举的属性toString()返回对象对应的字符串valueOf()返回对象对应的原始类型值function
16、 getAttributeValue(attr)alert(personattr);var person=new Object();person.name=zs;person.age=18;getAttributeValue(name);getAttributeValue(age);成都传智播客 Number类Number类代表数据类,包含一些静态的成员及数值处理的方法。静态属性:MAX_VALUE、MIN_VALUE、NEGATIVE_INFINITY、POSITIVE_INFINITY、NaN主要方法:toFixed(n)取小数位数,自动四舍五入toPrecision(n)是否是指定类的p
17、rototypepropertyIsEnumerable(property)是否可例举的属性toString()返回对象对应的字符串valueOf()返回对象对应的原始类型值var oNumberObject=new Number(99);alert(oNumberObject.toFixed(2);/outputs“99.00”成都传智播客 String类llength属性lanchor、big、bold、fontcolor、link等方法lcharAt方法注意:一个字符串中的第一个字符的索引位置为0,依次类推。lcharCodeAt方法注意:返回的结果是字符的unicode编码。lconc
18、at方法,连接字符串lindexOf方法及lastIndexOf方法lmatch、search方法lreplace、split方法lslice方法说明:str1.slice(0)和str1.slice(0,-1)都是返回整个字符串。lsubstr、substring方法substring方法返回的内容不包含结束位置的字符。ltoLowerCase、toUpperCase 方法 成都传智播客 Math类属性:lE,代表数学常数e,约等于 2.718。lLN10,代表10的自然对数,约等于 2.302。lLN2,代表2的自然对数,约等于 0.693。lPI,代表数学常数的值,约等于 3.14159
19、。lSQRT1-2,代表2 的平方根分之一,约等于0.707。lSQRT2,代表2 的平方根,约等于1.414。方法:abs方法,返回数字的绝对值。sin、cos方法,分别返回数字的正弦、余弦值。asin、acos方法,分别返回数字的反正弦、反余弦值。random方法,返回介于 0 和 1 之间的伪随机数Math对象是一个静态类,不能使用new关键字创建对象实例,应直接使用“对象名.成员”的格式来访问其属性或方法,例如,var num=Math.random();成都传智播客 Date类ltoGMTString方法,返回Date对象实例所表示的日期的字符串形式,该字符串使用格林尼治标准时间(G
20、MT)格式,例如,“05 Jan 1996 00:00:00 GMT”。lgetYear、getMonth、getDate、getDay方法lgetHours、getMinutes、getSeconds、getMilliseconds方法lgetTime方法,返回自1970年1月1日0点0分0秒算起,至Date对象实例代表的时间为止的毫秒数。var current_time=new Date();var strDate=current_time.getYear()+年;strDate+=current_time.getMonth()+月;strDate+=current_time.getDat
21、e()+日;strDate+=current_time.getHours()+:;strDate+=current_time.getMinutes()+:;strDate+=current_time.getSeconds();alert(strDate);l构造方法:Date()、Date(dateVal)、Date(year,month,date,hours,minutes,seconds,ms)lparse方法,分析一个表示日期时间的字符串,返回它所表示的时间值,该值以自1970年1月1日0点0分0秒算起的毫秒值表示。parse方法属于一个静态方法。成都传智播客 toString方法toS
22、tring 方法是JavaScript中的所有内部对象的一个成员方法,它的主要作用就是将对象中的数据转换成某种格式的字符串来表示,具体的转换方式取决于对象的类型。举例:var x=328;alert(hex=“+x.toString(16)+bin=“+x.toString(2);成都传智播客 Array类三种构造方法:lArray()lArray(4)lArray(3.5,abc,3)数组排序例子:var arr=new Array();arr0=3.5;arr1=abcarr2=3;arr.sort();var x,str=;for(x in arr)str+=x+:“+arrx+n;al
23、ert(str);成都传智播客 Array类的属性及方法length获得数组的长度;concat连接数组;join把数组转换成字符串;pop弹出一个元素;push放入一个元素;reverse颠倒数据中的元素顺序;shift移出第一个元素;slice截取数组;sort排序数组;unshift在前面追加元素;成都传智播客 用对象的方式实现数组function MyArray()this.length=arguments.length;for(var i=0;ithis.length;i+)thisi=argumentsi;var str=;var arr=new MyArray(4,3.5,abc
24、);for(var i=0;iarr.length;i+)str+=arri+n;alert(str);function MyArray(size)this.length=size;for(var i=0;isize;i+)thisi=;var arr=new MyArray(2);arr0=3;arr1=abc;arr2=4;var x,str=;for(x in arr)str+=x+:+arrx+n;alert(str);成都传智播客 用户自定义类及对象、工厂方法使用new Object创建对象并添加相关属性;、使用构造函数来定义类。、使用prototype、构造函数及原型混合方式、动态
25、原型方式实例实例Car类(对象)属性:color-颜色doors门的个数price价格drivers-司机方法:showColor显示出车的颜色成都传智播客 typeof及instanceof 运算符delete操作符用来删除一个对象的指定成员。typeof xxstring返回xx对象的类型或undefined。var d=7.5;alert(typeof d);alert(typeof d2);alert(typeof new Object();alert(typeof Object);xx instanceof 类名,返回boolean类型:var o=new String(ab);al
26、ert(o instanceof String);alert(o instanceof Number);alert(o instanceof Object);成都传智播客 delete及void 操作符delete操作符用来删除一个对象的指定成员。var d=new Object();d.p1=this is p1;alert(d.p1);delete d.p1;alert(d.p1);delete只能删除用户自义的成员。只能删除用户自义的成员。delete d.toString;alert(d.toString();void 用来把任意数字转换为undefined。var d=new Obj
27、ect();alert(void(d);运用场景:Click Me成都传智播客 类的修改1、prototype详解2、给已有类添加新方法3、重新定义类的方法4、超级后置绑定prototype是Function对象的一个属性,当我们访问对象的一个成员时,先在对象内部找,如果找不到,则到对象所在类的prototype对象中找。成都传智播客 封装封装:封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏。javascript中,通过闭包可以实现封装,看代码例子。涵盖了javascript公有成员定义、私有成员定义、特权方法定义的简单示例!
28、1.2./定义一个javascript类 3.function JsClass(privateParam/*/,publicParam)/构造函数 4.var priMember=privateParam;/私有变量 5.this.pubMember=publicParam;/公共变量 6./定义私有方法 7.function priMethod()8.return priMethod();9.10./定义特权方法 11./特权方法可以访问所有成员 12.this.privilegedMethod=function()13.var str=这是特权方法,我调用了n;14.str+=私有变量:+
29、priMember+n;15.str+=私有方法:+priMethod()+n;16.str+=公共变量:+this.pubMember+n;17.str+=公共方法:+this.pubMethod();18.19.return str;20.21.22./添加公共方法 23./不能调用私有变量和方法 24.JsClass.prototype.pubMethod=function()25.return pubMethod();26.27.28./使用 JsClass的实例 29.JsObject=new JsClass(priMember,pubMember);30.31./alert(JsO
30、bject.pubMember);/弹出pubMember信息 32./alert(JsObject.priMember);/弹出undefined信息 33./alert(JsObject.pubMethod();/弹出pubMethod信息 34./alert(JsObject.priMethod();/弹出对象不支持此属性或方法的错误 35.alert(JsObject.privilegedMethod();36.成都传智播客 继承面向对象编程(OOP)语言的一个主要功能就是“继承”。继承是指这样一种能力:它可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展。1
31、、对象冒充2、call及apply3、原型链4、混合方式成都传智播客 继承-对象冒充function classA(name)this.name=name;this.showName=function()alert(this.name);function classB(name)this.newMethod=classA;this.newMethod(name);obj=new classA(hero);objB=new classB(dby);obj.showName();/print hero objB.showName();/print dby 说明classB 继承了classA的方法
32、.对象冒充可以实现多重继承 例如 function classz()this.newMethod=classX;this.newMethod();delete this.newMethod;但是如果classX和classY有相同的属性或者方法,classY具有高优先级.成都传智播客 继承-call方法call方法使与经典的对象冒充法就相近的方法,它的第一个参数用作this的对象,其他参数都直接传递给函数自身.function sayName(perfix)alert(perfix+this.name);obj=new Object();obj.name=hero;sayName.call(o
33、bj,hello,);function classA(name)this.name=name;this.showName=function()alert(this.name);function classB(name)classA.call(this,name);objB=new classB(bing);objB.showName();/说明classB继承classA的showName方法成都传智播客 继承-apply方法aplly()方法有2个参数,一个用作this对象,一个使传递给函数的参数数组.function sayName(perfix)alert(perfix+this.nam
34、e);obj=new Object();obj.name=hero;sayName.aplly(obj,new Array(hello,);成都传智播客 继承-原型链prototype对象的任何属性和方法都会被传递给对应类的所有实例,原型链就是用这种方式来显现继承.function classA()classA.prototype.name=hero;classA.prototype.showName=function()alert(this.name)function classB()classB.prototype=new classA();objb=new classB()objb.sh
35、owName();/print hero 说明b继承了a的方法这里需要注意 调用classA的构造函数时,没有给它传递参数,这是原型链的标准做法,确保函数的构造函数没有任何参数.并且 子类的所有属性和方法,必须出现在prototype属性被赋值后,应为在它之前赋的值会被删除.因为对象的prototype属性被替换成了新对象,添加了新方法的原始对象将被销毁.成都传智播客 继承-混和方式就是用冒充方式 定义构造函数属性,用原型法定义对象方法.function classA(name)this.name=name;classA.prototype.showName=function()alert(t
36、his.name)function classB(name)classA.call(this,name);classB.prototype=new classA();classB.prototype.showName1=function()alert(this.name+*);obj=new classB(hero);obj.showName();obj.showName1();在classB的构造函数中通过调用call方法 继承classA中的name属性,用原型链来继承classA的showName方法.成都传智播客 javascript中的方法重载探讨方法重载(overloading)及
37、覆盖(overriding)Javascript 中的方法本身就是一个带可变参数的,不支持重载操作。但我们可以在方法体内自由检测方法的参数情况,来实现重载的效果。(使用可变参数或arguments 来模拟重载的示例)。覆盖,也称为改写,就是指子类中定义的方法替换掉父类的方法成都传智播客 javascript中多态性(polymorphisn)探讨多态性(polymorphisn):是允许你将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作。简单的说,就是一句话:允许将子类类型的指针赋值给父类类型的指针。多态是为了实现另一个目
38、的接口重用!多态的作用,就是为了类在继承和派生的时候,保证使用“家谱”中任一类的实例的某一属性时的正确调用。var a=a1,a2,a3;成都传智播客 结束语结束语热烈欢迎热烈欢迎大家到成都传智播客免费大家到成都传智播客免费领取领取JavaJava学习视频光盘;学习视频光盘;热烈欢迎大家到成都传智播客教学热烈欢迎大家到成都传智播客教学现场免费试听现场免费试听JavaJava及及3G3G课程!课程!热烈欢迎各软件公司到热烈欢迎各软件公司到成都成都传智传智播客预定和招聘软件开发人才!播客预定和招聘软件开发人才!成都传智播客 成都传智播客成都传智播客-助你成为高薪程序员助你成为高薪程序员1 1、20
39、102010年年7 7月,传智播客在成都设立分中心(传智播客成都分中月,传智播客在成都设立分中心(传智播客成都分中心),心),EasyJFEasyJF开源创始人蔡世友老师任首席讲师,开源创始人蔡世友老师任首席讲师,7 7月月8 8日,成都传日,成都传智播客智播客JavaEE+3GJavaEE+3G就业班第一期正式开课。就业班第一期正式开课。2 2、20102010年年9 9月,成都传智播客推出月,成都传智播客推出先就业后付款先就业后付款,毕业后,毕业后没有从没有从事软件开发、月薪未达指定数额,则退还全部学费事软件开发、月薪未达指定数额,则退还全部学费的优惠政策,广的优惠政策,广受学员好评。受学
40、员好评。3 3、20102010年年1111月,第一期学员毕业,在仅一个月的时间里,全部月,第一期学员毕业,在仅一个月的时间里,全部学员顺利就业学员顺利就业(工作地为工作地为成都成都),如愿走上软件开发工程师的岗位,如愿走上软件开发工程师的岗位,月薪平均月薪平均30003000以上,有个别学员甚至拿到以上,有个别学员甚至拿到4K4K、K K。4 4、20112011年年2 2月,成都传智携手月,成都传智携手CSDNCSDN推出推出“黑马训练营黑马训练营”课程,并课程,并作如下承诺:作如下承诺:“不用花一分钱即可入学、不就业不还学费、就业不不用花一分钱即可入学、不就业不还学费、就业不做软件开发不
41、还学费做软件开发不还学费”,让学员,让学员“就业后靠自己的能力逐步偿还学就业后靠自己的能力逐步偿还学费费”。成都传智播客 20102010年年7 7月月8 8日,传智播客成都隆重开班日,传智播客成都隆重开班!成都传智播客开班现场成都传智播客 20102010年年7 7月月8 8日,传智播客成都隆重开班日,传智播客成都隆重开班!张孝祥老师在成都传智上课成都传智播客 成都传智播客教学现场成都传智播客教学现场!张孝祥老师在成都传智播客上课成都传智播客 成都传智播客教学现场成都传智播客教学现场!传智播客学员正在听课成都传智播客 成都传智播客教学现场成都传智播客教学现场!成都传智主讲教师蔡世友老师在上课成都传智播客 成都传智播客教学现场成都传智播客教学现场!蔡世友老师在andorid课堂上指导学生实战成都传智播客 成都传智播客师资团队成都传智播客师资团队!成都传智播客 成都传智播客师资团队成都传智播客师资团队!成都传智播客 成都传智播客观摩及出师项目展示成都传智播客观摩及出师项目展示!成都传智播客观摩及出师项目展示成都传智播客观摩及出师项目展示!l成都传智播客
限制150内