JavaScript之面向对象.ppt

JavaScript OOP 目录 什么是JavaScriptJavaScript的历史JavaScript体系JavaScript未来前景JavaScript基础部分JavaScript高级部分 什么是JavaScript JavaScript的概念JavaScript是一种基于对象 Object 和事件驱动 EventDriven 并具有安全性能的可交互的脚本语言JavaScript的语言特性1 解释性JavaScript是一门脚本语言 Writeonce runanywhere 2 面向对象JavaScript是一门基于对象的语言3 简单性JavaScript是一门弱类型语言 语法与Java相似 4 动态性JavaScript是一门脚本语言 能即时与客户端动态交互 5 跨平台性JavaScript是依赖于浏览器本身 与操作环境无关 JavaScript的历史 1992年 Nombas公司开发了一种叫C minus minus的嵌入式脚本语言 而后改名为ScriptEase 第一个吃螃蟹的人 1995年 工作于Netscape 网景 公司的BrendanEich开发了一个叫做LiveScript的脚本语言 在随NetscapeNavigator2 0正式版一起发布之前 正式更名为JavaScript JavaScript1 0取得成功后 Netscape公司随即在NetscapeNavigator3 0中捆绑发布了JavaScript1 1版本 于此同时 微软也开始进军浏览器 在其IE3 0中发布了一个克隆版JavaScript 取名为Jscript 1997年 Netscape SUN Microsoft Borland等公司联名向ECMA TC39委员会提交了将JavaScript1 1作为脚本语言规范的草案得到采纳 并正式将此规范命名为ECMAScript 标准编号为ECMAScript 262 经过几年的发展 ISO IEC 国际标准化组织及国际电工委员会 也采纳了ECMAScript标准 版本演变史 发 JavaScript体系 ECMAScript DOM BOM Event Model JavaScript JavaScript现状 JavaScript框架有哪些 说到JavaScript不得不提JavaScript框架 如ExtJs Jquery YUI Dojo MooTools Prototype JavaScriptMVC等等 正由于有了这些框架 我们觉得编写JavaScript不再是梦靥 世界似乎变得更加美好了一些 JavaScript框架帮我们做了些什么 1 核心对象的封装和扩展2 DOMCRUD的封装3 事件机制的封装4 Ajax封装5 UI组件的封装6 扩展动画效果 飞入飞出 淡入淡出 拖拽 JavaScript未来前景 个人观点JavaScript诞生之初几乎无人问津 后来由于Ajax的兴起 JavaScript开始流行 虽然最近上升势头有所减弱 但至今一直占据着编程语言排行榜的前10位 而且由于HTML5对JavaScript缺陷的大幅扩充 以及ECMAScript5 0即将问世 JavaScript未来应该是前途无量 大家拭目以待吧 面向对象编程语言一直是最受欢迎的语言类型 JavaScript也不例外 JavaScript基础 JavaScript语法JavaScript数据类型JavaScript运算符JavaScript流程控制语句JavaScript函数JavaScript对象 JavaScript语法 变量名 函数名 运算符等大小写敏感变量弱类型每行代码结尾的分号可以省略 但不建议这么做变量可以不用初始化变量使用之前不需先声明 JavaScript数据类型 5种原始数据类型 UndefinedNullBooleanNumberString注 Undefined是派生自Null 所以alert null undefined trueNumber类型的表示法 varnum 55 10进制Varnum 017 8进制varnum 0 x1f 16进制浮点数精度丢失问题alert 0 1 0 2 0 30000000000000004解决办法 浮点数先升幂计算再降幂 JavaScript运算符 一元运算符位运算符布尔运算符加减运算符乘除运算符求模运算符关系运算符相等运算符三元运算符赋值运算符 JavaScript流程控制语句 If elseswitchwhiledo whileforwithlabel JavaScript函数 函数可以没有返回值 默认返回Undefined函数参数可变长functiondoAdd num1 num2 returnnum1 num2 alert doAdd 10 JavaScript函数 函数没有重载 functionaddNumber num1 returnnum1 100 functionaddNumber num1 num2 returnnum1 num2 varresult addNumber 100 alert result NaN JavaScript函数 函数参数传递 functionadd num num 10 returnnum varcount 20 varresult add count alert count 20alert result 30 JavaScript函数 functionsetName obj obj name Nicholas varpersion newObject setName person alert obj name Nicholas总结 对于基本数据类型参数 直接进行参数值copy 对于对象数据类型参数 先栈空间创建参数对象的副本 而两者都指向堆空间中的同一对象 JavaScript对象 Object对象 constructor 对象构造器 proto 指向其构造器的原型hasOwnProperty propertyName 用于检测当前对象是否含有指定属性 不包括原型对象的属性 isPrototypeOf object 判定当前对象是否是传入对象的原型propertyIsEnumable propertyName 判定给定属性是否能用for in语句遍历Window Document Form Frame Navigator String Array Date Math JavaScript高级部分 精通Function原型Prototype作用域链Scope chain闭包JavaScript继承精通事件系统 精通Function JavaScript函数可以嵌套 精通Function 函数可以作为返回值 精通Function 函数的 花式 调用 函数在解析期创建 函数在执行期创建 且这种方式创建的实质是匿名函数 JavaScript的整个执行过程分 1 标识符解析期2 初始化执行期 精通Function 函数也是对象 NewFunction方式创建的Function对象的作用域总是指向顶级作用域Window对象 即其this总是指向Window 精通Function 函数对象的属性 精通Function 模拟静态属性 精通Function 函数 加壳 精通Function 匿名函数 关键点 1 匿名函数要么赋值给变量 要么作为返回值 要么自运行 否则无意义 2 匿名函数可以有效避免全局变量污染 实现块级作用域 精通Function 理解 this 一句话总结 JavaScript中的this始终指向当前作用域链中的活动对象 犀利的Prototype 理解prototype 关键点 1 每个对象都有一个 proto 属性 该属性始终指向其构造器对象的原型对象2 原型是针对 类 而言 实例对象没有prototype原型属性3 构造函数也是对象 函数也是对象4 构造器的原型的构造器等于自身 犀利的Prototype 使用prototype扩展对象 犀利的prototype 原型查找机制 作用域链Scope chain 执行环境 Scope chain Window 活动对象 活动对象 Active Object Window 栈 入栈 创建执行环境 标识符解析 创建活动对象 分配作用域链 绑定this 执行 作用域链Scope chain 示例 varname global functiontest alert name 默认this指向windowvarname local alert name test 第一次扫描 标识符解析 Active Object name undefinded Window name undefined 第二次扫描 执行期 Active Object name local Window name global 闭包 什么是闭包 如何构造闭包 闭包应用场景闭包带来的内存泄漏问题 什么是闭包 闭包的官方解释 所谓 闭包 指的是一个拥有许多变量和绑定了这些变量的环境的表达式 通常是一个函数 我的理解 所谓 闭包 就是由在一个函数内部返回的一个变量 以及与被返回变量相关联的作用域链两者组成的对象集合 叫做闭包 如何构造闭包 闭包构造的三部曲1 在函数A内部定义一个变量B 2 在函数A内部返回变量B3 通过调用A得到B的引用 并定义变量C将B引用赋值给C 最后通过C调用B 从而得到B返回的作用域链中未释放的对象及属性 闭包应用场景 1 使用闭包代替全局变量2 实现缓存3 回调函数传参4 实现封装 使用闭包代替全局变量 实现缓存 回调函数传参 错误做法 实现封装 使用闭包可以实现对象属性的封装 对象方法的封装同理 闭包的经典案例 要求 点击每行时提示当前点击的是第几行 闭包的经典案例 错误做法 为什么变量i一直都是trs length的值呢 闭包的经典案例 正确做法 JavaScript继承 创建对象varperson newObject person name Eda person age 25 person sayHello function alert name age 缺陷 会产生大量重复的代码 JavaScript继承 工厂模式functioncreatePerson name age varo newObject o name name o age age o sayHello function alert name age returno 优点 实现了代码复用 解决了相似对象的创建问题 缺陷 创建出来的对象都是Object类型 没有解决对象识别问题 即怎么知道一个对象是什么类型 JavaScript继承 构造函数模式varPerson function name age this name name this age age this sayHello function alert name age varperson newPerson eda 25 alert personinstanceofPerson true 优点 解决相似对象的创建问题以及对象识别问题 缺陷 对象的共用方法被重复创建 JavaScript继承 构造函数改进模式varPerson function name age this name name this age age this sayHello sayHello varsayHello function alert this name this age 优点 解决了上个版本中的对象方法重复创建问题缺陷 对象方法暴露在全局作用域 性能不好 且没能很好体现面向对象的封装性 JavaScript继承 原型模式functionPerson Person prototype constructor Person name eda age 25 sayHello function alert this name age 优点 实现了对象属性和方法的共享缺陷 对象属性共享导致每个对象的同名属性指向的是同一个对象 JavaScript继承 构造函数和原型组合模式functionPerson name age this name name this age age Person prototype sayHello function alert this name this age functionEmployee Employee prototype newPerson 优点 解决了对象属性的动态创建 而对象方法共享缺陷 原型的属性如果是引用类型 仍然存在属性共享问题在子类的构造函数中无法向父类构造函数中传参 JavaScript继承 组合改进模式 优点 解决了相似对象创建问题 解决了对象识别问题 解决了原型共享本质带来的缺陷 解决了子类构造函数内向父类构造函数传参问题 缺陷 两次调用父类构造函数 在创建大量对象的情况下 性能会有所损耗 JavaScript继承 寄生组合模式 将父类的原型缓存到一个空白对象 将子类的构造器缓存到空白对象 然后重置子类的原型对象为该空白对象 优点 解决了上个版本的两次调用父类构造函数的问题 性能得到提升 YUI的JS继承就是采用这种模式 缺陷 暂无 JavaScript继承 ExtJs的extend源码解读 JavaScript继承 ExtJs的override源码解读 JavaScript继承 ExtJs的apply源码解读 Thanksforall