javascript面向对象复习

javascript是web前端中比较热门的脚本语言，要学的很好，那肯定要付出很多时间和经历。记录笔记是一个比较好的学习惯，翻开以前的笔记，发现此刻的你与和以前的你有多大的进步。闲话少说，还是看看笔记吧！

## 面向对象的概念

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 字节

4. 绘图练习:

* var arr = [ 1, 2, 3 ];

* var o = { name: ‘张三’, age: 19, children: [ {name:’张1′}, {name: ‘张2’} ] };

* var node = { nodeName: ‘DIV’, childrenNodes: [], parentNode: null }