javascript面向对象编程.ppt

成都传智播客 Javascript面向对象编程 讲师 蔡世友Email caishiyou 成都传智播客 Javascript的重要性 使用率 在web应用中 涉及到前端界面编程基本上都要用到javascript语言 2 Web2 0及Ajax推动了javascript语言 3 随着大量的c s应用转向b s 富客户端技术的不断推广 javascript语言的应用范围还将不断加大 javascript的特点简单动态基于对象 面向对象 成都传智播客 Javascript面向对象概述 Javascript是一种面向 基于 对象的动态脚本语言 是一种基于对象 Object 和事件驱动 EventDriven 并具有安全性能的脚本语言 他具有面向对象语言所特有的各种特性 比如封装 继承及多态等 但对于大多数人说 我们只把javascript做为一个函数式语言 只把他用于一些简单的前端数据输入验证以及实现一些简单的页面动态效果等 我们没能完全把握动态语言的各种特性 在很多优秀的Ajax框架中 比如ExtJS JQuery等 大量使用了javascript的面向对象特性 要使用好ext技术 javascript的高级特性 面向对象语言特性是我们必须完全把握的 成都传智播客 Javascript的相关知识 Javascript的发展历程Javascript的三大组成部分ECMAScript语法 数据类型 语句 关键字 保留字 操作符 对象DOM DocumentObjectModel BOM BrowserObjectModel JavaScript灵活特性探讨 成都传智播客 Javascript中的数据类型 基本数据类型数字 Numbers 字符串 Strings 布尔Boolean特殊值 null undefined NaN 对象类型Object对象属于复杂的数据类型 对象下面可以包含基本类型 对象 函数等 数组是一种对象类型 对于javascript来说 可以说一切都是对象 包括类 varc newObject 成都传智播客 程序流程控制 顺序结构if条件选择语句switch选择语句while循环语句dowhile语句for循环语句break与continue语句 成都传智播客 for in循环语句 for 变量in集合或对象 执行语句块 varas 1 4 5 6 output for varxinas output x as x alert output varas id 5 name test for varxinas output x as x alert output 成都传智播客 逻辑运算符 逻辑与 当左右两边操作数都为true时 返回值为true 否则返回false 逻辑或 当左右两边操作数都为false时 返回其中第一个不为false的值或者false 逻辑非 当操作数为true时 返回值为false 否则返回true 注意 在逻辑运算中 0 false null undefined NaN均表示false 成都传智播客 函数的定义及调用 定义一个函数的格式如下 function函数名 参数列表 程序代码return表达式 varmsg 全局变量 functionsquare x y varsum sum x x y y returnsum functionshow varmsg 局部变量 alert msg varsum alert sum sum sum square 2 3 alert sum sum show undefined alert sum square 2 3 对函数进行调用的几种方式 函数名 传递给函数的参数1 传递给函数的参数2 变量 函数名 传递给函数的参数1 传递给函数的参数2 对于有返回值的函数调用 也可以在程序中直接使用返回的结果 例如 alert sum square 2 3 不指定任何函数值的函数 返回undefined 成都传智播客 函数的参数可变性 arguments functionsum vars 0 for vari 0 i最多255个 通过函数对象的length可以返回函数希望提供的参数个数 成都传智播客 使用Function类创建函数 创建动态函数的基本语法格式 varvarName newFunction argument1 lastArgument 说明 所有的参数都必须是字符串型的 最后的参数必须是这个动态函数的功能程序代码 例子 varsquare newFunction x y varsum sum x x y y returnsum alert square 3 2 varalsoDoSquare doAdd alert alsoDoSquare 3 2 成都传智播客 闭包 closure Javascript闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量 键值对 而这些键值对是不会随上一级函数的执行完成而销毁 这样在执行完varc a 后 变量c实际上是指向了函数b b中用到了变量i 再执行c 后就会弹出一个窗口显示i的值 第一次为1 这段代码其实就创建了一个闭包 为什么 因为函数a外的变量c引用了函数a内的函数b 就是说 当函数a的内部函数b被函数a外的一个变量引用的时候 就创建了一个我们通常所谓的 闭包 functiona vari 0 functionb alert i returnb varc a c 闭包的作用就是在a执行完并返回后 闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源 因为a的内部函数b的执行需要依赖a中的变量 成都传智播客 函数的作用域及this 1 在函数或方法中可以使用this来引用函数所在的当前对象2 当没有明确指定函数的当前对象时 作用域为window3 可以使用call及apply来动态改变函数执行的作用域 varb1 v thisisb1 varb2 v thisisb2 functionb d alert this v b 输出 window b 输出 b call b1 输出 b apply b2 输出 成都传智播客 JavaScript中的系统函数 Global类 encodeURI及encodeURIComponent方法返回对一个URI字符串编码后的结果 decodeURI及decodeURIComponent 方法将一个已编码的URI字符串解码成最初始的字符串并返回 parseInt方法将一个字符串按指定的进制转换成一个整数 语法格式为 parseInt numString radix 如果没有指定第二个参数 则前缀为 0 x 的字符串被视为十六进制 前缀为 0 的字符串被视为八进制 所有其他字符串都被视为是十进制 parseFloat方法将一个字符串转换成对应的小数 isNaN方法用于检测parseInt和parseFloat方法的返回值是否为NaN escape方法返回对一个字符串进行编码后的结果字符串 所有空格 标点 重音符号以及任何其他非ASCII字符都用 xx编码替换 其中xx等于表示该字符的Unicode编码的十六进制数 字符值大于255的字符以 uxxxx格式存储 unescape方法将一个用escape方法编码的结果字符串解码成原始字符串并返回 eval方法将其中的参数字符串作为一个JavaScript表达式执行 成都传智播客 JavaScript的内部类 动态对象使用 对象实例名 成员 的格式来访问其属性和方法 静态对象直接使用 对象名 成员 的格式来访问其属性和方法 Object类 对象 Number类 对象 String类 对象 Math类 对象 Date类 对象 toString方法 成都传智播客 Object类 Object类是所有javascript类的基类 提供了一种创建自定义对象的简单方式 不需要程序员再定义构造函数 主要属性 constructor 对象的构造函数prototype 获得类的prototype对象 static性质主要方法 hasOwnProperty property 是否属于本类定义的属性isPrototypeOf object 是否是指定类的prototypepropertyIsEnumerable property 是否可例举的属性toString 返回对象对应的字符串valueOf 返回对象对应的原始类型值 functiongetAttributeValue attr alert person attr varperson newObject 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 是否是指定类的prototypepropertyIsEnumerable property 是否可例举的属性toString 返回对象对应的字符串valueOf 返回对象对应的原始类型值 varoNumberObject newNumber 99 alert oNumberObject toFixed 2 outputs 99 00 成都传智播客 String类 length属性anchor big bold fontcolor link等方法charAt方法注意 一个字符串中的第一个字符的索引位置为0 依次类推 charCodeAt方法注意 返回的结果是字符的unicode编码 concat方法 连接字符串indexOf方法及lastIndexOf方法match search方法replace split方法slice方法说明 str1 slice 0 和str1 slice 0 1 都是返回整个字符串 substr substring方法substring方法返回的内容不包含结束位置的字符 toLowerCase toUpperCase方法 成都传智播客 Math类 属性 E 代表数学常数e 约等于2 718 LN10 代表10的自然对数 约等于2 302 LN2 代表2的自然对数 约等于0 693 PI 代表数学常数 的值 约等于3 14159 SQRT1 2 代表2的平方根分之一 约等于0 707 SQRT2 代表2的平方根 约等于1 414 方法 abs方法 返回数字的绝对值 sin cos方法 分别返回数字的正弦 余弦值 asin acos方法 分别返回数字的反正弦 反余弦值 random方法 返回介于0和1之间的伪随机数 Math对象是一个静态类 不能使用new关键字创建对象实例 应直接使用 对象名 成员 的格式来访问其属性或方法 例如 varnum Math random 成都传智播客 Date类 toGMTString方法 返回Date对象实例所表示的日期的字符串形式 该字符串使用格林尼治标准时间 GMT 格式 例如 05Jan199600 00 00GMT getYear getMonth getDate getDay方法getHours getMinutes getSeconds getMilliseconds方法getTime方法 返回自1970年1月1日0点0分0秒算起 至Date对象实例代表的时间为止的毫秒数 varcurrent time newDate varstrDate current time getYear 年 strDate current time getMonth 月 strDate current time getDate 日 strDate current time getHours strDate current time getMinutes strDate current time getSeconds alert strDate 构造方法 Date Date dateVal Date year month date hours minutes seconds ms parse方法 分析一个表示日期时间的字符串 返回它所表示的时间值 该值以自1970年1月1日0点0分0秒算起的毫秒值表示 parse方法属于一个静态方法 成都传智播客 toString方法 toString方法是JavaScript中的所有内部对象的一个成员方法 它的主要作用就是将对象中的数据转换成某种格式的字符串来表示 具体的转换方式取决于对象的类型 举例 varx 328 alert hex x toString 16 bin x toString 2 成都传智播客 Array类 三种构造方法 Array Array 4 Array 3 5 abc 3 数组排序例子 vararr newArray arr 0 3 5 arr 1 abc arr 2 3 arr sort varx str for xinarr str x arr x n alert str 成都传智播客 Array类的属性及方法 length 获得数组的长度 concat 连接数组 join 把数组转换成字符串 pop 弹出一个元素 push 放入一个元素 reverse 颠倒数据中的元素顺序 shift 移出第一个元素 slice 截取数组 sort 排序数组 unshift 在前面追加元素 成都传智播客 用对象的方式实现数组 functionMyArray this length arguments length for vari 0 i functionMyArray size this length size for vari 0 i 成都传智播客 用户自定义类及对象 工厂方法 使用newObject创建对象并添加相关属性 使用构造函数来定义类 使用prototype 构造函数及原型混合方式 动态原型方式 实例Car类 对象 属性 color 颜色doors 门的个数price 价格drivers 司机方法 showColor 显示出车的颜色 成都传智播客 typeof及instanceof运算符 delete操作符用来删除一个对象的指定成员 typeofxx string返回xx对象的类型或undefined vard 7 5 alert typeofd alert typeofd2 alert typeofnewObject alert typeofObject xxinstanceof类名 返回boolean类型 varo newString ab alert oinstanceofString alert oinstanceofNumber alert oinstanceofObject 成都传智播客 delete及void操作符 delete操作符用来删除一个对象的指定成员 vard newObject d p1 thisisp1 alert d p1 deleted p1 alert d p1 delete只能删除用户自义的成员 deleted toString alert d toString void用来把任意数字转换为undefined vard newObject alert void d 运用场景 ClickMe 成都传智播客 类的修改 1 prototype详解2 给已有类添加新方法3 重新定义类的方法4 超级后置绑定 prototype是Function对象的一个属性 当我们访问对象的一个成员时 先在对象内部找 如果找不到 则到对象所在类的prototype对象中找 成都传智播客 封装 封装 封装 也就是把客观事物封装成抽象的类 并且类可以把自己的数据和方法只让可信的类或者对象操作 对不可信的进行信息隐藏 javascript中 通过闭包可以实现封装 看代码例子 涵盖了javascript公有成员定义 私有成员定义 特权方法定义的简单示例 1 2 定义一个javascript类3 functionJsClass privateParam publicParam 构造函数4 varpriMember privateParam 私有变量5 this pubMember publicParam 公共变量6 定义私有方法7 functionpriMethod 8 return priMethod 9 10 定义特权方法11 特权方法可以访问所有成员12 this privilegedMethod function 13 varstr 这是特权方法 我调用了 n 14 str 私有变量 priMember n 15 str 私有方法 priMethod n 16 str 公共变量 this pubMember n 17 str 公共方法 this pubMethod 18 19 returnstr 20 21 22 添加公共方法23 不能调用私有变量和方法24 JsClass prototype pubMethod function 25 return pubMethod 26 27 28 使用JsClass的实例29 JsObject newJsClass priMember pubMember 30 31 alert JsObject pubMember 弹出pubMember信息32 alert JsObject priMember 弹出undefined信息33 alert JsObject pubMethod 弹出pubMethod信息34 alert JsObject priMethod 弹出 对象不支持此属性或方法 的错误35 alert JsObject privilegedMethod 36 成都传智播客 继承 面向对象编程 OOP 语言的一个主要功能就是 继承 继承是指这样一种能力 它可以使用现有类的所有功能 并在无需重新编写原来的类的情况下对这些功能进行扩展 1 对象冒充2 call及apply3 原型链4 混合方式 成都传智播客 继承 对象冒充 functionclassA name this name name this showName function alert this name functionclassB name this newMethod classA this newMethod name obj newclassA hero objB newclassB dby obj showName printheroobjB showName printdby说明classB继承了classA的方法 对象冒充可以实现多重继承例如functionclassz this newMethod classX this newMethod deletethis newMethod 但是如果classX和classY有相同的属性或者方法 classY具有高优先级 成都传智播客 继承 call方法 call方法使与经典的对象冒充法就相近的方法 它的第一个参数用作this的对象 其他参数都直接传递给函数自身 functionsayName perfix alert perfix this name obj newObject obj name hero sayName call obj hello functionclassA name this name name this showName function alert this name functionclassB name classA call this name objB newclassB bing objB showName 说明classB继承classA的showName方法 成都传智播客 继承 apply方法 aplly 方法有2个参数 一个用作this对象 一个使传递给函数的参数数组 functionsayName perfix alert perfix this name obj newObject obj name hero sayName aplly obj newArray hello 成都传智播客 继承 原型链 prototype对象的任何属性和方法都会被传递给对应类的所有实例 原型链就是用这种方式来显现继承 functionclassA classA prototype name hero classA prototype showName function alert this name functionclassB classB prototype newcla