韩顺平 轻松搞定javascript第五章 面向对象编程2.ppt

《韩顺平 轻松搞定javascript第五章 面向对象编程2.ppt》由会员分享，可在线阅读，更多相关《韩顺平 轻松搞定javascript第五章 面向对象编程2.ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、高级软件人才实作培训专家高级软件人才实作培训专家!北京传智播客教育 轻松搞定轻松搞定javascript-面向对象编程面向对象编程2讲师：讲师：韩顺平韩顺平email:qq:2317702760高级软件人才实作培训专家高级软件人才实作培训专家!主讲 韩顺平内容介绍内容介绍 js面向对象编程-三大特征 高级软件人才实作培训专家高级软件人才实作培训专家!学习目标学习目标1.理解封装和继承,多态主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!银行账号银行账号1银行账号银行账号2银行账号银行账号3银行账号银行账号n不管是哪中账号不管是哪中账号,是谁的账号是谁的账号都必须包括都必须包括,余

2、额余额,账号号码账号号码.也必须包括也必须包括:取款取款,存款存款.账号类账号类 Accountjs js面向面向(基于基于)对象编程对象编程三大特征三大特征 抽象 再讲解面向对象编程的三大特征前,我们先了解什么叫抽象,在定义一个类时候，实际上就是把一类事物的共有的属性和行为提取出来，形成一个物理模型(模板)。这种研究问题的方法称为抽象。主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!封装-什么是封装 封装就是把抽象出的属性和对属性的操作封装在一起,属性被保护在内部,程序的其它部分只有通过被授权的操作(函数),才能对属性进行操作。js js面向面向(基于基于)对象编程对象编程三大

3、特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!封装-访问控制修饰符 电视机的开关,对音量,颜色,频道的控制是公开的,谁都可以操作 ,但是对机箱后盖,主机板的操作却不是公开的，一般是由专业维 修人员来玩。那么在js中如何实现这种类似的控制呢?请大家看一个小程序.(Encap1.js),不能 随便查看人的年龄,工资等隐私.js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!function Person(pname,age)this.name=pname;/公开属性(变量)var age=age;/

4、私有属性(变量)/私有方法.function fun1()window.alert(hello);/公开函数(特权函数)this.fun2=function()/可以访问所有成员window.alert(this.name+age);fun1();请思考输出什么结果，为什么?var p1=new Person(顺平,90);p1.fun2();window.alert(p1.name);/p1.fun1();/错误window.alert(p1.age);/错误 封装 js提供有以下几种控制方法和属性的访问权限:公开级别:对外公开 私有级别:类本身可以访问,不对外公开.js js面向面向(基于

5、基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!function Person(pname,page)this.name=pname;/公开属性(变量)var age=page;/私有属性(变量)/私有方法.function fun1()window.alert(hello);/公开函数(特权函数)this.fun2=function()/可以访问所有成员window.alert(this.name+age);fun1();var p1=new Person(顺平,90);/给所有对象添加公共方法 /不能调用私有变量和方法不能调用私有变量和方

6、法/原型法原型法Person.prototype.fun3=function()return“fun3()hello;/输出“fun3()hello”window.alert(p1.fun3();类名.prototype.函数名=function()这个也称为后置绑定.封装 从 prototype引出对构造函数模式创建对象的思考js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平l能不能给所有对象绑定一个属性值?高级软件人才实作培训专家高级软件人才实作培训专家!封装prototype的思考(摘选 阮一峰 网络文章 )4.构造函数模式的问题构造函数模式的问题构造函数方法很好

7、用，但是存在一个浪费内存的问题。请看，我们现在为Cat对象添加一个不变的属性type（种类），再添加一个方法eat（吃老鼠）。那么，原型对象Cat就变成了下面这样：function Cat(name,color)this.name=name;this.color=color;this.type=猫科动物;this.eat=function()alert(吃老鼠);还是采用同样的方法，生成实例：var cat1=new Cat(大毛,黄色);var cat2=new Cat(二毛,黑色);alert(cat1.type);/猫科动物cat1.eat();/吃老鼠 表面上好像没什么问题，但是实际上

8、这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。alert(cat1.eat=cat2.eat);/false能不能让type属性和eat()方法在内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。5.Prototype模式模式 Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。f

9、unction Cat(name,color)this.name=name;this.color=color;Cat.prototype.type=猫科动物;Cat.prototype.eat=function()alert(吃老鼠);然后，生成实例。var cat1=new Cat(大毛,黄色);var cat2=new Cat(二毛,黑色);alert(cat1.type);/猫科动物cat1.eat();/吃老鼠这时所有实例的type属性和eat()方法，其实都是一个内存地址，指向prototype对象，因此就提高了运行效率。alert(cat1.eat=cat2.eat);/true

10、js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!继承-为什么有?一个小问题,还是看个程序(Extends1.html)js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!继承可以解决代码复用继承可以解决代码复用,让我们的编程更加靠近人类思维让我们的编程更加靠近人类思维.当当多个类存在相同的属性多个类存在相同的属性(变量变量)和方法时和方法时,可以从这些类中抽象可以从这些类中抽象出父类出父类(比如刚才的比如刚才的Student),Student),在

11、父类中定义这些相同的属性在父类中定义这些相同的属性和方法，所有的子类不需要和方法，所有的子类不需要重新定义重新定义这些属性和方法这些属性和方法.js.js 中中没有没有extends extends 关键字，它可以通过如下方式实现关键字，它可以通过如下方式实现继承继承.1、对象冒充2、call及apply 继承-解决之道js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!对前面问题的解决(对象冒充.)，请看:function Stu(name,age)this.name=name;this.age=age;this.sho

12、w=function()window.alert(this.name+this.age);function MidStu(name,age)this.stu=Stu;/将Stu构造函数(类),赋给MidStu的属性 this.stuwindow.alert(Stu);/体现对象冒充this.stu(name,age);/这里相当于调用 Stu(name,age);完成初始化(这句话必须有，否则不能实现继承效果，js是动态语言体现.)this.payFee=function(sal)/这个是MidStu对象自己的函数window.alert(应付学费=+sal*0.8);function Pup

13、il(name,age)this.stu=Stu;this.stu(name,age);this.payFee=function(sal)window.alert(应付学费=+sal*0.5);var pupil1=new Pupil(xm,12);pupil1.show();pupil1.payFee(1000);var midStu1=new MidStu(xh,22);midStu1.show();midStu1.payFee(1000);window.alert(*);pupil1.show();window.alert(直接访问=+pupil1.name);继承-解决之道js js面

14、向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!对前面问题的解决(call/apply)了解即可，无需深入研究，请看:function Stu(name,age)this.name=name;this.age=age;this.show=function()window.alert(this.name+this.age);function MidStu(name,age)/Stu.call(this,name,age);/或者Stu.apply(this,name,age);this.payFee=function(sal)/这个

15、是MidStu对象自己的函数window.alert(应付学费=+sal*0.8);function Pupil(name,age)/Stu.call(this,name,age);Stu.apply(this,name,age);this.payFee=function(sal)window.alert(应付学费1=+sal*0.5);var pupil1=new Pupil(xm1,12);pupil1.show();pupil1.payFee(1000);var midStu1=new MidStu(xh4,22);midStu1.show();midStu1.payFee(1000);

16、window.alert(*);pupil1.show();继承-解决之道js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平l类名.call(对象名,参数,.)l类名.apply(对象名,参数1,.)高级软件人才实作培训专家高级软件人才实作培训专家!继承-小结 js 通过前面的方式可以实现多重继承 Object类是js所有类的基类.js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!简单的说简单的说:方法重载就是类的同一种功能的多种实现方式方法重载就是类的同一种功能的多种实现方式,到底采用哪到底采用

17、哪种方式种方式,取决于调用者给出的参数取决于调用者给出的参数。js不支持重载操作。因为Javascript 中的方法本身就是一个带可变参数的，通过在方法体内检测方法的参数情况，来实现重载的效果。【调用最后那个方法】覆盖，也称为改写，就是指子类中定义的方法替换掉父类的方法。（案例说明）方法重载(overloading)及覆盖(overriding)function Stu(name,age)this.name=name;this.age=age;this.show=function()window.alert(this.name+this.age);function MidStu(name,ag

18、e)this.stu=Stu;this.stu(name,age);/这句话必须有才能继承.this.payFee=function(sal)/这个是MidStu对象自己的函数window.alert(应付学费=+sal*0.8);this.show=function()window.alert(我是midstu的show);var midstu=new MidStu(顺平,90);midstu.show();函数覆盖案例function test1()window.alert(test1);function test1(var1)window.alert(test2);test1();/显示

19、?函数重载案例主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!function Person()this.test1=function()window.alert(Person test1);function Cat()this.test1=function()window.alert(Cat test1();var v=new Person();v.test1();v=new Cat();v.test1();多态的案例 多态-概念 所谓多态,就是指一个 变量在不同情况下的多种状态.js 实际上是无态的，是一种动态语言，一个变量的类型是在运行的过程中由js 引擎来决定的，所以说,

20、js天生就支持多态。js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!多态-经典案例 Master主人类主人类Fish鱼肉类鱼肉类Bone骨头类骨头类Food食物类食物类Animal动物类动物类Cat猫猫类猫猫类Dog狗狗类狗狗类多态有利于代码的维护和扩展，这里我们可以考虑，如果食物多态有利于代码的维护和扩展，这里我们可以考虑，如果食物 加入加入 桃子，动物加入桃子，动物加入 猴子，可以看到，猴子，可以看到，MasterMaster的的feedfeed函数不需要的变化。函数不需要的变化。js js面向面向(基于基于)对象编程对象编程三大特征三大特征主讲 韩顺平高级软件人才实作培训专家高级软件人才实作培训专家!