javascript面象对象PPT教学课件

2020/12/09
14
实现封装
• Java中的封装 Public class Student{
private int stuId; private String name; public int get… public String get… public void set… public void set… }
2020/12/09
19
存在的问题
• <script language="JavaScript" type="text/javascript">
• <!--
• //定义class1
• function class1(){
• //构造函数
•}
• //定义class1的成员
• class1.prototype={
• m1:function(){
• alert(1);
•}
•}
• //定义class2
• function class2(){
• //构造函数
•}
• //让class2继承于class1
• class2.prototype=class1.prototype;
• //给class2重复定义方法method
Javascript如何模仿？
2020/12/09
15
静态属性的封装
• 节省内存 • 单例 Javascript 如何实现多个对象共享某一个对象
呢？ 私有静态属性？从作用出发 公有静态属性？从作用出发
2020/12/09
16
小结
• 实现一个类对象计数器，记录某一类一共 创建了多少个对象？
2020/12/09
17
继承
• Java中类的继承
extends
Javascript中如何实现呢？
public class Monitor
extends Student{
}
2020/12/09
18
实现方式一
• 通过拷贝一个类的prototype到另外一个类来实现继承 • fucntion class1(){ • //构造函数 •} • function class2(){ • //构造函数 •} • class2.prototype=class1.prototype; • class2.prototype.moreProperty1=”xxx”; • class2.prototype.moreMethod1=function(){ • //方法实现代码 •} • var obj=new class2();
2020/12/09
11
对象的易变性
Javascript 比较灵活，使用了其他语言不具备的技术
特点1.为函数添加属性
function method(){}; method.typeName=“方法” 特点2.对实例化后的对象进行修改和扩展 var 张三=new Student(); var 李四=new Student(); 张三.detail=function(){}; 李四.like=function()(); 同一个类型生成的对象有不同的方法
2020/12/09
12
小结
• 创建一个student类，包含两个属性学员学 号、学员姓名，使用两种方式？
2020/12/09
13
封装
• 为了实现信息隐藏的技术
降低对获取信息的细节的依赖
分析事例：
第2种操作形式你对产生报表信息的内部细节 形成了依赖，如果内部实现发生变化，你 必须重新学习整个系统并从头开始。同时 信息隐藏原则有助于减轻两个参与者之间 的依赖性。
2020/12/09
5
练习
• 通过外部的变量，动态生成方法
2020/12/09
6
类的定义
• Javascript没有类的概念，它认为所有数据 都是对象，那怎么样来让他模仿java中的类
的型式，实现代码的复用？ • 两种方式
1.函数构建 2.原型构建
2020/12/09
7
函数构建
• function Class(){ //this代表通过函数构建的对象 this.field=值;
• class2.prototype.method=function(){
9
原型的概念
• 照猫画虎 • 电影霍元甲
2020/12/09
10
电影霍元甲
• Var 霍元甲={ 籍贯：天津，
武术技能：迷宗拳
} • Var 电影霍元甲=function(){}; 电影霍元甲.prototype=霍元甲;
var 李连杰的霍元甲=new 电影霍元甲(); alert(李连杰的霍元甲.籍贯); //显示天津 alert(李连杰的霍元甲.武术技能);//显示迷宗拳 var 李连杰的霍元甲.武术技能=李家拳 alert(李连杰的霍元甲.武术技能);//显示李家拳 类似于类中的重写
Javascript面向对象编程
2020/12/09
1
课程目标
• 1.掌握javascript 封装、继承、多态 • 2.分析javascript面象对象编程实现无刷新
列表组件
2020/12/09
2
相关回顾
•1.javascript变量类型？
• a.原始类型(不区分整数和浮点数)
类型转换方式
b.数组类型
c.日期类型
d.空类型 null
e.未定义类型 undef{属性：值，属性：值}
“值”可以是以上类型的任意一种
2020/12/09
3
• 函数类型
1.定义型式
相关回顾
2.作用 a.行为的封装
3.使有的方式
a.直接调用
(1)匿名函数
b.存储在变量
2020/12/09cd..作作为为参对数象的的传构递造器
4
匿名函数
在函数内部的变量，在外部不能够访问,比较安全不容易被分析 • (function (){
alert(“test!”); })(); • (function (a,b){
return a+b; })(3,5); • (function(){
return function(a,b){return a+b}; })();
} • Var object=new Class(); • object.field //查看值
2020/12/09
8
原型对象
• 每一个对象都有一个prototype属性 很类似于子类中父类的作用
父与子的关系 对象中prototype的作用
对象与对象构建的参照的原理 什么是参照的原型呢？
2020/12/09