1. 空对象
```
var o = null;
// 空对象, 存特点是只有变量 o 没有对象数据
```
# 值类型与引用类型的存储特征
1. 内存逻辑结构( 画图 )
2. 赋值
```
var num = 123;
var num2 = num;
```
* 值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量.
* `var num = 123` 表示变量中存储的数字是 123.
* 然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数组
* 将拷贝数据赋值给 `num2`
* 其特点是在内存中有**两个数据副本**.
* 练习: var o = { name: '张三' };, var obj = o;
3. 引用类型的赋值
```
var o = { name: '张三' };
var obj = o;
```
* 赋值就是将 变量 o 中存储的数据拷贝一份, 然后将该数据赋值给 obj
* 内存中有 1 分数据
* 问题: 利用 obj 修改的 name 属性会影响到 o 中的 name
# 深拷贝与浅拷贝
1. 什么是深拷贝, 什么是浅拷贝
* 如果拷贝的时候, 将数据的所有引用结构都拷贝一份, 那么数据在内存中独立就是深拷贝
* 如果拷贝的时候, 只针对当前对象的属性进行拷贝, 而属性是引用类型这个不考虑, 那么就是浅拷贝
* 拷贝: 复制一份. 指将对象数据复制.
* 在讨论深拷与浅拷的时候一定要保证对象的属性也是引用类型.
2. 代码的封装
* 利用面向对象的思想, 一般会让对象带有一个 copy 的方法, 来完成自己的拷贝
* 如果需要将一个对象封装成浅拷贝
* this 在函数( 方法 )内部, 表示调用该函数( 方法 )的对象.
## 中午面试题
1. onload 与 jq 中 read 的区别
2. 类型转换( 在 js 中唯一一个 自己不等于自己的 就是 NaN )
# 对象的动态特性
1. 在 js 中, 一格对象需要属性, 就可以 利用 `对象.属性名 = 值` 的方式 为其添加. 只要赋值成功, 对象就新增了属性.
2. 对象属性的访问形式
* 点语法: `o.name`
* 关联数组: `o[ name ]`
3. 曾经使用
```
function mix( obj1, obj2 ) {
for ( var k in obj2 ) {
obj1[ k ] = obj2[ k ];
}
}
```
4. 凡是需要给对象动态添加成员的时候, 必须使用关联数组的语法
```
// 利用关联数组的语法, 访问其 name 属性, 调用其 sayHello 方法
var o = {
name: '张三',
sayHello: function () {
console.log( '你好, 我叫 ' + this.name );
}
};
// console.log( o.name );
console.log( o[ 'name' ] );
// o.sayHello();
o[ 'sayHello' ]();
```
# 作为参数参数
1. 作为函数的参数, 就是将 参数的数据拷贝一份 传递给函数的定义中的参数
```
function foo( num ) {}
var a = 123;
foo( a );
```
* 函数在调用的时候, 首先需要将参数中的数据拷贝一份. 即 数字 123 拷贝一份.
* 跳转到函数的定义中( 函数体 ), 再次之前完成了 参数的赋值, 即 num = 123.
* 正式的进入函数内, 准备执行函数中的每一句话.
2. 值类型作为函数参数传递的特征, 函数内与函数外是两个不同的变量, 仅仅是值相等而已.
3. 引用类型作为函数参数传递的特征, 函数内与函数外是两个不同的变量, 但是指向同一个对象.
* 因此在函数内部允许修改函数外部的对象的数据
# 构造函数的作用
## 构造函数是干什么用的
1. 初始化数据的
2. 在 js 给对象添加属性用的, 初始化属性值用
## 创建对象的过程
1. 代码: `var p = new Person();`.
2. 首先运算符 new 创建了一个对象. 它类似于 `{}`, 是一个'没有任何成员'的对象.
* 使用 new 创建对象, 对象的类型就是创建它的构造函数名.
* 使用 {} 无论如何都是 Object 类型, 相当于 `new Object`.
3. 然后调用构造函数 为其初始化成员
* 构造函数在调用的一开始, 有一个赋值操作, 即 this = 刚刚创建出来的对象.
* 因此在构造函数中 this 表示刚刚创建出来的对象.
4. 在构造函数中 利用 对象的 动态特性 为对象添加成员.
### 作业:
```
function Person( name, age, gender ) {
this.name = name;
this.age = age;
this.gender = gender;
}
var p = new Person( '张三', 19, '男' );
```
# 异常
## 异常的概念
异常就是程序在运行过程中出现的错误.
在 js 中出现异常后, 浏览器会给出一段错误码, 就是错误消息. 错误消息由错误类型与错误信息构成
## 如何处理异常
就是要出现异常后还能继续执行. 异常最大的特征是 一旦代码出现异常其后的代码就不再执行.
常见的异常有两大类:
1. 运行环境的多样性
2. 语法错误, 代码错误
### try-catch 语法
即尝试这么做, 如果出现错误捕获错误
```
...
try {
可能出现错误的代码
} catch( e ) {
处理错误的代码
}
...
```
1. 代码正常运行, 如果在 try 中出现了错误, try 里面出现错误的语句后面的代码都不再执行, 直接跳转到 catch 中
2. catch 中处理错误信息
3. 然后继续执行后面的代码
4. 如果 try 中没有出现错误, 那么不走 catch 直接执行后面的代码
## 如何抛出异常
```
throw 对象
```
1. throw 是抛出异常的语法, 其后跟一个对象, 即错误消息对象
2. 一般该对象使用 `new Error( '错误消息' )` 来创建. 也支持任意的对象.
```
function showMessage ( msg ) {
// 要显示一段文本, 所以我做一个限制
if ( typeof msg !== 'string' ) {
throw new Error( '传入的参数不是一个字符串' );
}
// 是正常的
console.log( msg );
}
```
## 补充
1. try-catch 语法的最终结构是 try-catch-finally
```
try {
可能出现错误的代码
} catch ( e ) {
如果出现错误就执行
} finally {
结束 try 这个代码块之前执行, 即最后执行
}
```
2. 层级传递
```
function f1 () {
f2(); // f1 称为调用者, 或调用函数, f2 称为被调用者, 或被调用函数
}
function f2 () {
f3();
}
function f3() {
throw new Error( 'error' );
}
f1();
```
# dom 操作
## 绘制 DOM 树
```
<!doctype html>
<html>
<head>
<title>测试</title>
</head>
<body>
<!-- 测试 -->
<div>
你好我是一个 <span style="color: red">div</span> 标签</div>
</body>
</html>
```
## 任何一个 DOM 树结构的结论
1. 所谓的 DOM 操作, 操作的是什么?
2. 一般DOM树结构
```
父节点
兄弟节点
当前节点
属性节点
子节点
兄弟节点
```