- SYSU Web2.0 Club -

 By 张津华

http://rolfzhang.com/
目录


1. 什么是对象
2. JS面向对象的特点   - SYSU Web2.0 Club -


3. 继承范式
4. 最佳实践
5. Q&A
1. 什么是对象
           - SYSU Web2.0 Club -
- SYSU Web2.0 Club -
                       什么是苹果?



                            OR
什么是对象

  特点

继承范式

最佳实践

  Q&A
- SYSU Web2.0 Club -
                       什么是对象?



什么是对象                  状态     行为      对象
  特点

继承范式

最佳实践
                       可以吃的   砸牛顿
  Q&A
                       红色的    送给师妹
                       1.5元   自己咬一口
                       ……     ……
- SYSU Web2.0 Club -
                       什么是面向对象?

                       面向对象是一种思维方式,
什么是对象
                       关注于对象状态的变化和对象间的交互
  特点

继承范式                      程序 != 数据结构+算法
最佳实践

  Q&A

                        OOA   OOD     OOP
- SYSU Web2.0 Club -
                       面向对象编程(OOP)

                       What?
什么是对象
                           三大特性:封装、继承、多态
  特点

继承范式
                       Why?
                           易理解、易维护、易扩展
最佳实践

  Q&A
                       How?
                           别急,往下看~
2. JS面向对象的特点
               - SYSU Web2.0 Club -
- SYSU Web2.0 Club -
                        JS是一门面向对象编程语言
                                  不是神马“基于对象”



什么是对象
                        一切皆对象
        特点

 继承范式                   基于原型,而非基于类型
 最佳实践
                        具有面向对象语言的三大特性
   Q&A
- SYSU Web2.0 Club -
                        一切皆对象

                        Number、String、Boolean、
                        Function、Array 都是对象
什么是对象

        特点

 继承范式                   除了undefined、null,一切皆对象

 最佳实践

   Q&A
                        基本类型、引用类型
- SYSU Web2.0 Club -
                        在JavaScript中创建一个对象很简单




什么是对象

        特点

 继承范式

 最佳实践

   Q&A
- SYSU Web2.0 Club -
                        在JavaScript中,Object其实就是一个
                        散列表(Map),属性名就是key,值就
                        是value

什么是对象

        特点

 继承范式

 最佳实践

   Q&A
- SYSU Web2.0 Club -
                        构造函数创建对象




什么是对象

        特点

 继承范式

 最佳实践

   Q&A




                                   记得要用new哟~
- SYSU Web2.0 Club -
                        基于原型的继承
                                   题外话,继承是有害的……



什么是对象                   如果构造函数个原型对象A,则由该构
        特点
                        造函数创建的对象实例都必然复制于A。
 继承范式

 最佳实践

   Q&A                  “依葫芦画瓢”:
                            瓢.prototype = 某个葫芦
- SYSU Web2.0 Club -
                        原型链

                        JavaScript中,每个对象都有一个隐性的
                        __proto__原型,而__proto__也是一个
什么是对象                   对象,也会有隐性的原型,因此就形成了
        特点
                        一条原型链,链的尽头是原生对象Object
 继承范式

 最佳实践

   Q&A
- SYSU Web2.0 Club -
                        Prototype
                        对象的原型是隐性的,而构造函数的原
                        型是显性的,也就是它的prototype属性
什么是对象

        特点

 继承范式

 最佳实践

   Q&A
- SYSU Web2.0 Club -
                        对象不受原型的限制
                                 可以随时随意进行修改

什么是对象

        特点

 继承范式

 最佳实践

   Q&A



                        hasOwnProperty方法
- SYSU Web2.0 Club -
                        多态性

                        动态语言 – 无类型限制
什么是对象
                        过于灵活 – 需要警惕
        特点

 继承范式
                        面向接口编程 – 自行约束
 最佳实践

   Q&A

                              is A   vs   Like
3. 继承范式
          - SYSU Web2.0 Club -
- SYSU Web2.0 Club -
                        各种各样的继承范式

                        原型方式(Prototypal)
什么是对象                   伪类方式(Pseudoclassical)
   特点                   拷贝继承(jQuery.extend)
   继承范式
                        Klass方式(John Resig、《 JS Patterns 》)
 最佳实践

   Q&A
                        其他 ……
- SYSU Web2.0 Club -
                        原型方式
                         最能体现JavaScript基于“原型链”的继承原理



什么是对象

   特点

   继承范式

 最佳实践

   Q&A
- SYSU Web2.0 Club -
                        原型方式(普通对象)
                            ECMAScript 5th 已经默认实现了



什么是对象

   特点

   继承范式

 最佳实践

   Q&A
- SYSU Web2.0 Club -
                        伪类方式
                               看起来更像传统Class的继承



什么是对象

   特点

   继承范式

 最佳实践

   Q&A

                                       此处有问题
- SYSU Web2.0 Club -
                        伪类方式
                           使用空函数作为中介,可以减少调用父
                           类构造函数的开销


什么是对象

   特点

   继承范式

 最佳实践

   Q&A

                               constructor 默认指向构造函数
- SYSU Web2.0 Club -
                        伪类方式
                               进一步封装继承方法



什么是对象

   特点

   继承范式

 最佳实践

   Q&A
- SYSU Web2.0 Club -
                        伪类方式
                               伪类继承方法的使用



什么是对象

   特点

   继承范式

 最佳实践

   Q&A
- SYSU Web2.0 Club -
                        其他方法


                        自主学习,
什么是对象
                        作为课后作业啦~
   特点

   继承范式

 最佳实践

   Q&A
4. 最佳实践
          - SYSU Web2.0 Club -
- SYSU Web2.0 Club -
                        再次声明一下:



什么是对象
                        面向对象是一种思维方式
   特点

 继承范式

   最佳实践
                          千万别以为面向对象就是
   Q&A                    继承、组合、子类、父类……
- SYSU Web2.0 Club -
                        从简单的做起

                        尽量少用全局变量,
                        使用一个变量作为“命名空间”,如:
什么是对象
                              var APP = {};
   特点

 继承范式

   最佳实践
                        逻辑与数据分离
   Q&A                    APP.config   保存配置参数
                          APP.data     存储全局数据
                          APP.msg      存放显示文本(国际化)
- SYSU Web2.0 Club -
                        从简单的做起

                        低耦吅高内聚

什么是对象
                          模块化
   特点
                          面向接口
 继承范式

   最佳实践
                          单一职责
   Q&A
- SYSU Web2.0 Club -
                        深入一点的话题

                         设计模式
什么是对象

   特点                    MVC
 继承范式

   最佳实践

   Q&A
                           看个小栗子~ O(∩_∩)O
5. Q&A
         - SYSU Web2.0 Club -
{Thank You}

              - SYSU Web2.0 Club -

By 张津华

2012.5.5

Javascript面向对象

  • 1.
    - SYSU Web2.0Club - 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.0Club - 什么是苹果? OR 什么是对象 特点 继承范式 最佳实践 Q&A
  • 5.
    - SYSU Web2.0Club - 什么是对象? 什么是对象 状态 行为 对象 特点 继承范式 最佳实践 可以吃的 砸牛顿 Q&A 红色的 送给师妹 1.5元 自己咬一口 …… ……
  • 6.
    - SYSU Web2.0Club - 什么是面向对象? 面向对象是一种思维方式, 什么是对象 关注于对象状态的变化和对象间的交互 特点 继承范式 程序 != 数据结构+算法 最佳实践 Q&A OOA OOD OOP
  • 7.
    - SYSU Web2.0Club - 面向对象编程(OOP) What? 什么是对象 三大特性:封装、继承、多态 特点 继承范式 Why? 易理解、易维护、易扩展 最佳实践 Q&A How? 别急,往下看~
  • 8.
    2. JS面向对象的特点 - SYSU Web2.0 Club -
  • 9.
    - SYSU Web2.0Club - JS是一门面向对象编程语言 不是神马“基于对象” 什么是对象 一切皆对象 特点 继承范式 基于原型,而非基于类型 最佳实践 具有面向对象语言的三大特性 Q&A
  • 10.
    - SYSU Web2.0Club - 一切皆对象 Number、String、Boolean、 Function、Array 都是对象 什么是对象 特点 继承范式 除了undefined、null,一切皆对象 最佳实践 Q&A 基本类型、引用类型
  • 11.
    - SYSU Web2.0Club - 在JavaScript中创建一个对象很简单 什么是对象 特点 继承范式 最佳实践 Q&A
  • 12.
    - SYSU Web2.0Club - 在JavaScript中,Object其实就是一个 散列表(Map),属性名就是key,值就 是value 什么是对象 特点 继承范式 最佳实践 Q&A
  • 13.
    - SYSU Web2.0Club - 构造函数创建对象 什么是对象 特点 继承范式 最佳实践 Q&A 记得要用new哟~
  • 14.
    - SYSU Web2.0Club - 基于原型的继承 题外话,继承是有害的…… 什么是对象 如果构造函数个原型对象A,则由该构 特点 造函数创建的对象实例都必然复制于A。 继承范式 最佳实践 Q&A “依葫芦画瓢”: 瓢.prototype = 某个葫芦
  • 15.
    - SYSU Web2.0Club - 原型链 JavaScript中,每个对象都有一个隐性的 __proto__原型,而__proto__也是一个 什么是对象 对象,也会有隐性的原型,因此就形成了 特点 一条原型链,链的尽头是原生对象Object 继承范式 最佳实践 Q&A
  • 16.
    - SYSU Web2.0Club - Prototype 对象的原型是隐性的,而构造函数的原 型是显性的,也就是它的prototype属性 什么是对象 特点 继承范式 最佳实践 Q&A
  • 17.
    - SYSU Web2.0Club - 对象不受原型的限制 可以随时随意进行修改 什么是对象 特点 继承范式 最佳实践 Q&A hasOwnProperty方法
  • 18.
    - SYSU Web2.0Club - 多态性 动态语言 – 无类型限制 什么是对象 过于灵活 – 需要警惕 特点 继承范式 面向接口编程 – 自行约束 最佳实践 Q&A is A vs Like
  • 19.
    3. 继承范式 - SYSU Web2.0 Club -
  • 20.
    - SYSU Web2.0Club - 各种各样的继承范式 原型方式(Prototypal) 什么是对象 伪类方式(Pseudoclassical) 特点 拷贝继承(jQuery.extend) 继承范式 Klass方式(John Resig、《 JS Patterns 》) 最佳实践 Q&A 其他 ……
  • 21.
    - SYSU Web2.0Club - 原型方式 最能体现JavaScript基于“原型链”的继承原理 什么是对象 特点 继承范式 最佳实践 Q&A
  • 22.
    - SYSU Web2.0Club - 原型方式(普通对象) ECMAScript 5th 已经默认实现了 什么是对象 特点 继承范式 最佳实践 Q&A
  • 23.
    - SYSU Web2.0Club - 伪类方式 看起来更像传统Class的继承 什么是对象 特点 继承范式 最佳实践 Q&A 此处有问题
  • 24.
    - SYSU Web2.0Club - 伪类方式 使用空函数作为中介,可以减少调用父 类构造函数的开销 什么是对象 特点 继承范式 最佳实践 Q&A constructor 默认指向构造函数
  • 25.
    - SYSU Web2.0Club - 伪类方式 进一步封装继承方法 什么是对象 特点 继承范式 最佳实践 Q&A
  • 26.
    - SYSU Web2.0Club - 伪类方式 伪类继承方法的使用 什么是对象 特点 继承范式 最佳实践 Q&A
  • 27.
    - SYSU Web2.0Club - 其他方法 自主学习, 什么是对象 作为课后作业啦~ 特点 继承范式 最佳实践 Q&A
  • 28.
    4. 最佳实践 - SYSU Web2.0 Club -
  • 29.
    - SYSU Web2.0Club - 再次声明一下: 什么是对象 面向对象是一种思维方式 特点 继承范式 最佳实践 千万别以为面向对象就是 Q&A 继承、组合、子类、父类……
  • 30.
    - SYSU Web2.0Club - 从简单的做起 尽量少用全局变量, 使用一个变量作为“命名空间”,如: 什么是对象 var APP = {}; 特点 继承范式 最佳实践 逻辑与数据分离 Q&A APP.config 保存配置参数 APP.data 存储全局数据 APP.msg 存放显示文本(国际化)
  • 31.
    - SYSU Web2.0Club - 从简单的做起 低耦吅高内聚 什么是对象 模块化 特点 面向接口 继承范式 最佳实践 单一职责 Q&A
  • 32.
    - SYSU Web2.0Club - 深入一点的话题 设计模式 什么是对象 特点 MVC 继承范式 最佳实践 Q&A 看个小栗子~ O(∩_∩)O
  • 33.
    5. Q&A - SYSU Web2.0 Club -
  • 34.
    {Thank You} - SYSU Web2.0 Club - By 张津华 2012.5.5