javascript之面向对象.ppt

《javascript之面向对象.ppt》由会员分享，可在线阅读，更多相关《javascript之面向对象.ppt（56页珍藏版）》请在三一办公上搜索。

1、,JavaScript-OOP,目录,什么是JavaScriptJavaScript的历史JavaScript体系JavaScript未来前景JavaScript基础部分JavaScript高级部分,什么是JavaScript,JavaScript的概念 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的可交互的脚本语言 JavaScript的语言特性 1.解释性 JavaScript是一门脚本语言，Write once,run anywhere。2.面向对象 JavaScript是一门基于对象的语言 3.简单性 JavaScript是一门

2、弱类型语言，语法与Java相似。4.动态性 JavaScript是一门脚本语言，能即时与客户端动态交互。5.跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关,JavaScript的历史,1992 年，Nombas公司开发了一种叫C-minus-minus的嵌入式脚本语言，而后改名为ScriptEase(第一个吃螃蟹的人)。1995年，工作于Netscape(网景)公司的Brendan Eich开发了一个叫做LiveScript的脚本语言，在随Netscape Navigator 2.0 正式版一起发布之前，正式更名为JavaScript。JavaScript1.0取得成功后，N

3、etscape公司随即在Netscape Navigator3.0中捆绑发布了JavaScript1.1版本，于此同时，微软也开始进军浏览器，在其IE3.0中发布了一个克隆版JavaScript，取名为Jscript。1997年，Netscape、SUN、Microsoft、Borland等公司联名向ECMA-TC39委员会提交了将JavaScript1.1作为脚本语言规范的草案得到采纳，并正式将此规范命名为ECMAScript.标准编号为ECMAScript-262.经过几年的发展，ISO/IEC（国际标准化组织及国际电工委员会）也采纳了ECMAScript标准。,版本演变史,发,JavaS

4、cript体系,ECMAScript,DOM,BOM,Event-Model,JavaScript,JavaScript现状,JavaScript框架有哪些？说到JavaScript不得不提JavaScript框架，如ExtJs、Jquery、YUI、Dojo、MooTools、Prototype、JavaScriptMVC等等。正由于有了这些框架，我们觉得编写JavaScript不再是梦靥，世界似乎变得更加美好了一些。JavaScript框架帮我们做了些什么？1.核心对象的封装和扩展 2.DOM CRUD的封装 3.事件机制的封装 4.Ajax封装 5.UI组件的封装 6.扩展动画效果(飞入

5、飞出、淡入淡出、拖拽),JavaScript未来前景,个人观点JavaScript诞生之初几乎无人问津，后来由于Ajax的兴起，JavaScript开始流行，虽然最近上升势头有所减弱，但至今一直占据着编程语言排行榜的前10位。而且由于HTML5对JavaScript缺陷的大幅扩充，以及ECMAScript 5.0即将问世，JavaScript未来应该是前途无量，大家拭目以待吧！面向对象编程语言一直是最受欢迎的语言类型，JavaScript也不例外。,JavaScript基础,JavaScript语法 JavaScript数据类型 JavaScript运算符 JavaScript流程控制语句 J

6、avaScript函数 JavaScript对象,JavaScript语法,变量名、函数名、运算符等大小写敏感变量弱类型每行代码结尾的分号可以省略，但不建议这么做变量可以不用初始化变量使用之前不需先声明,JavaScript数据类型,5种原始数据类型：Undefined Null Boolean Number String注：Undefined是派生自Null，所以alert(null=undefined);/trueNumber类型的表示法：var num=55;/10进制Var num=017;/8进制var num=0 x1f;/16进制浮点数精度丢失问题alert(0.1+0.2);/

7、0.30000000000000004解决办法：浮点数先升幂计算再降幂,JavaScript运算符,一元运算符位运算符布尔运算符加减运算符乘除运算符求模运算符关系运算符相等运算符三元运算符赋值运算符,JavaScript流程控制语句,If-elseswitchwhiledo-whileforwithlabel,JavaScript函数,函数可以没有返回值，默认返回Undefined函数参数可变长function doAdd(num1,num2)return num1+num2;alert(doAdd(10);,JavaScript函数,函数没有重载：function addNumber(num

8、1)return num1+100;function addNumber(num1,num2)return num1+num2;var result=addNumber(100);alert(result);/NaN,JavaScript函数,函数参数传递：function add(num)num+=10;return num;var count=20;var result=add(count);alert(count);/20alert(result);/30.,JavaScript函数,function setName(obj)obj.name=“Nicholas”;var persion

9、=new Object();setName(person);alert(obj.name);/Nicholas总结：对于基本数据类型参数，直接进行参数值copy;对于对象数据类型参数，先栈空间创建参数对象的副本，而两者都指向堆空间中的同一对象,JavaScript对象,Object对象：constructor:对象构造器 _proto_:指向其构造器的原型 hasOwnProperty(propertyName):用于检测当前对象是否含有指定属性(不包括原型对象的属性)isPrototypeOf(object):判定当前对象是否是传入对象的原型 propertyIsEnumable(prope

10、rtyName):判定给定属性是否能用for-in语句遍历Window、Document、Form，Frame、Navigator、String、Array、Date、Math,JavaScript高级部分,精通Function原型Prototype作用域链Scope-chain闭包JavaScript继承精通事件系统,精通Function,JavaScript函数可以嵌套,精通Function,函数可以作为返回值,精通Function,函数的“花式”调用,函数在解析期创建,函数在执行期创建，且这种方式创建的实质是匿名函数,JavaScript的整个执行过程分：1.标识符解析期2.初始化执行期

11、,精通Function,函数也是对象,New Function方式创建的Function对象的作用域总是指向顶级作用域Window对象,即其this总是指向Window,精通Function,函数对象的属性,精通Function,模拟静态属性,精通Function,函数“加壳”,精通Function,匿名函数,关键点：1.匿名函数要么赋值给变量，要么作为返回值，要么自运行，否则无意义。2.匿名函数可以有效避免全局变量污染，实现块级作用域。,精通Function,理解“this”,一句话总结：JavaScript中的this始终指向当前作用域链中的活动对象。,犀利的Prototype,理解pro

12、totype,关键点：1.每个对象都有一个_proto_属性，该属性始终指向其构造器对象的原型对象2.原型是针对“类”而言，实例对象没有prototype原型属性3.构造函数也是对象，函数也是对象4.构造器的原型的构造器等于自身,犀利的Prototype,使用prototype扩展对象,犀利的prototype,原型查找机制,作用域链Scope-chain,执行环境,Scope-chain,Window,活动对象,活动对象,Active-Object,Window,栈,入栈,创建执行环境标识符解析创建活动对象分配作用域链绑定this执行,作用域链Scope-chain,示例：var name=

13、“global”;function test()alert(name);/默认this指向window var name=“local”;alert(name);test();,第一次扫描：标识符解析Active-Object:name:undefinded,Window:name:undefined,第二次扫描：执行期Active-Object:name:”local”,Window:name:”global”,闭包,什么是闭包？如何构造闭包？闭包应用场景闭包带来的内存泄漏问题,什么是闭包,闭包的官方解释：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数）,

14、我的理解：所谓“闭包”，就是由在一个函数内部返回的一个变量，以及与被返回变量相关联的作用域链两者组成的对象集合，叫做闭包。,如何构造闭包,闭包构造的三部曲1.在函数A内部定义一个变量B；2.在函数A内部返回变量B3.通过调用A得到B的引用，并定义变量C将B引用赋值给C，最后通过C调用B，从而得到B返回的作用域链中未释放的对象及属性。,闭包应用场景,1.使用闭包代替全局变量2.实现缓存3.回调函数传参4.实现封装,使用闭包代替全局变量,实现缓存,回调函数传参,错误做法：,实现封装,使用闭包可以实现对象属性的封装，对象方法的封装同理。,闭包的经典案例,要求：点击每行时提示当前点击的是第几行,闭包的

15、经典案例,错误做法：,为什么变量i一直都是trs.length的值呢,闭包的经典案例,正确做法：,JavaScript继承,创建对象var person=new Object();person.name=“Eda”;person.age=25;person.sayHello=function()alert(name+“:”+age);,缺陷：会产生大量重复的代码。,JavaScript继承,工厂模式function createPerson(name,age)var o=new Object();o.name=name;o.age=age;o.sayHello=function()alert(

16、name+“:”+age);return o;,优点：实现了代码复用，解决了相似对象的创建问题。缺陷：创建出来的对象都是Object类型，没有解决对象识别问题，即怎么知道一个对象是什么类型,JavaScript继承,构造函数模式var Person=function(name,age)this.name=name;this.age=age;this.sayHello=function()alert(name+“:”+age);var person=new Person(“eda”,25);alert(person instanceof Person;/true,优点：解决相似对象的创建问题以及

17、对象识别问题；缺陷：对象的共用方法被重复创建,JavaScript继承,构造函数改进模式var Person=function(name,age)this.name=name;this.age=age;this.sayHello=sayHello;var sayHello=function()alert(this.name+“:”+this.age);,优点：解决了上个版本中的对象方法重复创建问题缺陷：对象方法暴露在全局作用域，性能不好，且没能很好体现面向对象的封装性,JavaScript继承,原型模式function Person()Person.prototype=constructor:

18、Person,name:”eda”,age:25,sayHello:function()alert(this.name+“:”+age);,优点：实现了对象属性和方法的共享缺陷：对象属性共享导致每个对象的同名属性指向的是同一个对象,JavaScript继承,构造函数和原型组合模式function Person(name,age)this.name=name;this.age=age;Person.prototype.sayHello=function()alert(this.name+“:”+this.age);function Employee()Employee.prototype=new

19、 Person();,优点：解决了对象属性的动态创建，而对象方法共享缺陷：原型的属性如果是引用类型，仍然存在属性共享问题 在子类的构造函数中无法向父类构造函数中传参,JavaScript继承,组合改进模式,优点：解决了相似对象创建问题，解决了对象识别问题，解决了原型共享本质带 来的缺陷，解决了子类构造函数内向父类构造函数传参问题。缺陷：两次调用父类构造函数，在创建大量对象的情况下，性能会有所损耗。,JavaScript继承,寄生组合模式,将父类的原型缓存到一个空白对象,将子类的构造器缓存到空白对象，然后重置子类的原型对象为该空白对象,优点：解决了上个版本的两次调用父类构造函数的问题，性能得到提升。YUI的JS继承就是采用这种模式。缺陷：暂无,JavaScript继承ExtJs的extend源码解读,JavaScript继承ExtJs的override源码解读,JavaScript继承ExtJs的apply源码解读,Thanks for all!,