面向对象

面向对象的概念

1. 面向对象就是使用对象. 面向对象开发就是使用对象开发.
2. 面向过程就是以过程的方式开发. 面向对象是对面向过程的封装.

面向对象的特性

1. 抽象性
2. 封装性
3. 继承性

抽象性

所谓的抽象性就是: 如果需要用一个对象描述一个数据, 需要抽取这个对象的核心数据

1. 提出需要的核心属性与方法
2. 不在特定环境下无法明确对象的具体意义

封装性

对象是将数据与功能组合到一起, 即封装

1. js 对象就是 键值对的集合
   • 键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
   • 如果键值是函数, 那么就称为方法
2. 对象就是将属性与方法封装起来
3. 方法是将过程封装起来

继承性

所谓继承就是自己没有, 别人有. 拿过来为自己所用, 并成为自己的东西

1. 传统继承基于模板
2. js 继承基于对象

一个简单的继承模式: 混入( mix )

function mix ( o1, o2 ) {
    for ( var k in o2 ) {
        o1[ k ] = o2[ k ];
    }
}

在 jquery 中将该方法命名为 extend.

使用对象进行编程

1. 首先看是否有内置对象, 或第三方提供对象
2. 如果没有自己定义

需求:

创建一个 div 标签, 并设置其样式, 加入页面中

1. 传统的处理办法
2. 使用面向对象的方式进行思考的办法

中级代码

function DivTag() {
    this.DOM = document.createElement( 'div' );
    this.appendTo = function ( node ) {
        node.appendChild( this.DOM );
        return this;
    };

    this.css = function ( option ) {
        for ( var k in option ) {
            this.DOM.style[ k ] = option[ k ];
        }
        return this;
    }
}

调试工具的使用

开启调试窗口

windows 平台: f12

调试窗口介绍

1. 指针: 选择页面中的元素
2. 手机: 使用移动端界面调试
3. Elements: 查看页面 DOM 树
4. Console: 控制台(注意, 控制台与该页面是一个整体, 在控制台中的任何操作, 会影响到页面)
5. Source: 代码调试

调试工具的使用

1. 逐过程运行, 一次运行一个函数
2. 单步运行(逐步运行), 一次运行一句, 如果是函数, 进入函数体内运行
3. 继续运行. 从当前状态运行下去, 直到出现断点, 如果没有断点则运行结束

设置断点技巧

1. 逐步与逐过程混合
2. 断点加继续运行
3. 条件断点(右键添加 add contitional breakpoint)

利用 watch 监视窗口可以查看对象成员

字符编码

1. ascii 码表
   • 128 刚好 7 个二进制位, 0 ~ 127
   • 基本的 控制字符
   • 数字 48, ..., 57
   • 英文字母: 97, ... 65, ...
   • 标点符号:
2. 双字节字符
3. unicode. 使用两个字节表示一个字符
4. utf-8. 统一转换格式, 与 ascii 重合部分使用 1 个字节, 汉字使用 3 个字节

答疑

1. 字符占几个字节
   • 需要考虑编码:
     • ascii 码: 一个英文字母, 数字, (英文)标点符号, 英文字母都是一个字节( 7 个二进制位 )
     • 双字节字符: 与 ascii 码重合的都是 一个字节, 其余的独有字符 2 个字节( gb2312 )
     • unicode 编码( utf-16 ): 任何字符都是 两个字节
     • utf-8 编码: 与 ascii 重合的都是 1 个字节, 汉子 3 个字节
   • 比特: byte
     • 补充: 一般表示字节和字的时候是考虑 字节 ( byte )是 8 个二进制位, 字( word ) 是一个字符
   • 位就是位置, 一个字节有 8 个二进制位, 表示 第2 位, 就是一个字节中转换成 8 个二进制位表示的时候, 第二个 01
   • 1: 1, 2: 10, 3: 11, 4: 100, ..., 255: 11111111
   • 二进制数字: 11 -> 00000011
2. 上下文: 你好吗? 所谓的上下文就是环境. 97
3. 有什么用
   • 凡是定义变量就要开辟内存
   • var num; // 不开辟内存. 声明
   • var num = 123; // 4 个字节
   • var num = [ 1, 2, 3 ]; // 将 数据存储在一个单独的内存中, 该数组的地址给变量存起来
   • var num = '123'; // 3 字节