中山大学Web2.0俱乐部研讨会 - 2012.05.05

1. - SYSU Web2.0 Club -
By 张津华
http://rolfzhang.com/

2. 目录
1. 什么是对象
2. JS面向对象的特点 - SYSU Web2.0 Club -
3. 继承范式
4. 最佳实践
5. Q&A

3. 1. 什么是对象
- SYSU Web2.0 Club -

4. - SYSU Web2.0 Club -
什么是苹果？
OR
什么是对象
特点
继承范式
最佳实践
Q&A

5. - SYSU Web2.0 Club -
什么是对象？
什么是对象 状态 行为 对象
特点
继承范式
最佳实践
可以吃的 砸牛顿
Q&A
红色的 送给师妹
1.5元 自己咬一口
…… ……

6. - SYSU Web2.0 Club -
什么是面向对象？
面向对象是一种思维方式，
什么是对象
关注于对象状态的变化和对象间的交互
特点
继承范式 程序 != 数据结构+算法
最佳实践
Q&A
OOA OOD OOP

7. - SYSU Web2.0 Club -
面向对象编程（OOP）
What?
什么是对象
三大特性：封装、继承、多态
特点
继承范式
Why?
易理解、易维护、易扩展
最佳实践
Q&A
How？
别急，往下看~

8. 2. JS面向对象的特点
- SYSU Web2.0 Club -

9. - SYSU Web2.0 Club -
JS是一门面向对象编程语言
不是神马“基于对象”
什么是对象
一切皆对象
特点
继承范式 基于原型，而非基于类型
最佳实践
具有面向对象语言的三大特性
Q&A

10. - SYSU Web2.0 Club -
一切皆对象
Number、String、Boolean、
Function、Array 都是对象
什么是对象
特点
继承范式 除了undefined、null，一切皆对象
最佳实践
Q&A
基本类型、引用类型

11. - SYSU Web2.0 Club -
在JavaScript中创建一个对象很简单
什么是对象
特点
继承范式
最佳实践
Q&A

12. - SYSU Web2.0 Club -
在JavaScript中，Object其实就是一个
散列表（Map），属性名就是key，值就
是value
什么是对象
特点
继承范式
最佳实践
Q&A

13. - SYSU Web2.0 Club -
构造函数创建对象
什么是对象
特点
继承范式
最佳实践
Q&A
记得要用new哟~

14. - SYSU Web2.0 Club -
基于原型的继承
题外话，继承是有害的……
什么是对象 如果构造函数个原型对象A，则由该构
特点
造函数创建的对象实例都必然复制于A。
继承范式
最佳实践
Q&A “依葫芦画瓢”：
瓢.prototype = 某个葫芦

15. - SYSU Web2.0 Club -
原型链
JavaScript中，每个对象都有一个隐性的
__proto__原型，而__proto__也是一个
什么是对象 对象，也会有隐性的原型，因此就形成了
特点
一条原型链，链的尽头是原生对象Object
继承范式
最佳实践
Q&A

16. - SYSU Web2.0 Club -
Prototype
对象的原型是隐性的，而构造函数的原
型是显性的，也就是它的prototype属性
什么是对象
特点
继承范式
最佳实践
Q&A

17. - SYSU Web2.0 Club -
对象不受原型的限制
可以随时随意进行修改
什么是对象
特点
继承范式
最佳实践
Q&A
hasOwnProperty方法

18. - SYSU Web2.0 Club -
多态性
动态语言 – 无类型限制
什么是对象
过于灵活 – 需要警惕
特点
继承范式
面向接口编程 – 自行约束
最佳实践
Q&A
is A vs Like

19. 3. 继承范式
- SYSU Web2.0 Club -

20. - SYSU Web2.0 Club -
各种各样的继承范式
原型方式（Prototypal）
什么是对象 伪类方式（Pseudoclassical）
特点 拷贝继承（jQuery.extend）
继承范式
Klass方式（John Resig、《 JS Patterns 》）
最佳实践
Q&A
其他 ……

21. - SYSU Web2.0 Club -
原型方式
最能体现JavaScript基于“原型链”的继承原理
什么是对象
特点
继承范式
最佳实践
Q&A

22. - SYSU Web2.0 Club -
原型方式（普通对象）
ECMAScript 5th 已经默认实现了
什么是对象
特点
继承范式
最佳实践
Q&A

23. - SYSU Web2.0 Club -
伪类方式
看起来更像传统Class的继承
什么是对象
特点
继承范式
最佳实践
Q&A
此处有问题

24. - SYSU Web2.0 Club -
伪类方式
使用空函数作为中介，可以减少调用父
类构造函数的开销
什么是对象
特点
继承范式
最佳实践
Q&A
constructor 默认指向构造函数

25. - SYSU Web2.0 Club -
伪类方式
进一步封装继承方法
什么是对象
特点
继承范式
最佳实践
Q&A

26. - SYSU Web2.0 Club -
伪类方式
伪类继承方法的使用
什么是对象
特点
继承范式
最佳实践
Q&A

27. - SYSU Web2.0 Club -
其他方法
自主学习，
什么是对象
作为课后作业啦~
特点
继承范式
最佳实践
Q&A

28. 4. 最佳实践
- SYSU Web2.0 Club -

29. - SYSU Web2.0 Club -
再次声明一下：
什么是对象
面向对象是一种思维方式
特点
继承范式
最佳实践
千万别以为面向对象就是
Q&A 继承、组合、子类、父类……

30. - SYSU Web2.0 Club -
从简单的做起
尽量少用全局变量，
使用一个变量作为“命名空间”,如：
什么是对象
var APP = {}；
特点
继承范式
最佳实践
逻辑与数据分离
Q&A APP.config 保存配置参数
APP.data 存储全局数据
APP.msg 存放显示文本（国际化）

31. - SYSU Web2.0 Club -
从简单的做起
低耦吅高内聚
什么是对象
模块化
特点
面向接口
继承范式
最佳实践
单一职责
Q&A

32. - SYSU Web2.0 Club -
深入一点的话题
设计模式
什么是对象
特点 MVC
继承范式
最佳实践
Q&A
看个小栗子~ O(∩_∩)O

33. 5. Q&A
- SYSU Web2.0 Club -

34. {Thank You}
- SYSU Web2.0 Club -
By 张津华
2012.5.5