01_JS面向对象

知识点

• 数据类型
• 值类型和引用类型
• 值类型和引用类型的特征
• 值类型和引用类型做参数
• 对象的动态特性
• 给对象动态添加属性
• 对象属性的访问形式
• 逻辑中断
• ||
• &&
• delete关键字
• 异常处理
• JS复习
• 循环、分支、break和continue
• 调试工具的使用
• 条件断点
• DOM基本操作
• 函数声明三种方式

数据类型

• 基本数据类型
  string number boolean

• 复杂数据类型（引用类型）
  Array Date Object RegExp String Number Boolean
  Object function
  String Number Date 首字母大写的都是构造函数

• 如何获取一个数据的数据类型
  使用关键字 typeof
  typeof返回值为string类型

• 两个空的类型
  null
  undefined

例：对象实例

    
    


    
产品名称
    
描述

对象

新建对象：new

var now = new Date();

值类型和引用类型

• 值类型：
  　　存储的就是数据本身的变量就是值类型
  　　例如：string 、number、boolean、undefined、null
  　　值类型是存储在栈（stack）中的简单数据，也就是说，它们的值直接存储在变量访问的位置。

var num = 10;
var str = "hello JS";
var flag = true;
var un = undefined;
var nu = null;

上面定义的这些值类型的数据在内存中的存储如下:

• 引用类型：
  　　存储的数据在内存中的地址，数据在内存中单独存储就是引用数据类型
  　　例如：object、数组、函数
  　　存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。

var arr = [1, 2, 3];
var p1 = {name:"张三", age:18};
var p2 = {
    name:"李四",
    age:50,
    son:{
        name:"李小一",
        age:18
    }
};
var p3 = {
    name:"王五",
    age:50,
    children:[
        {
            name:"王小一",
            age:20
        },
        {
            name:"王小二",
            age:15
        },
        {
            name:"王小三",
            age:12
        }
    ]
}

上面定义的这些引用类型的数据在内存中的存储如下:

值类型和引用类型的特征

值类型和引用类型的赋值

值类型赋值，直接将值复制一份

var num1 = 10;
var num2 = num1;

上面两句代码，在内存中的体现为：

• var num1 = 10;表示变量num1存储的是数字10
• 将数据拷贝一份，也就是将10拷贝一份，这个时候内存中有两个10
• 将拷贝的10赋值给num2

引用类型赋值，是将地址复制一份

var p = {name:"张三", age:19};
var p1 = p;

上面两句代码，在内存中的体现为：

• var p = {name:"张三", age:19};,p中存储的是对象的地址
• 赋值就是将变量p中存储的数据，也就是地址拷贝一份, 然后将该数据赋值给p1
• 此时内存中只有 1 个对象，变量p和p1同时指向这个对象

**问题: **利用p1修改的name属性会影响到p中的name

值类型和引用类型做参数

考虑如下情况：输出结果是多少？

function foo(num){
    num++;
}
var a = 1;
foo(a);
console.log(a);

继续考虑如下情况：输出结果是多少？

function foo(o){
    o.age++;
}
var p = {name:"张三", age:19};
foo(p);

console.log(p.age);

总结：
　　在调用函数的时候，传参的过程其实就是用实参给形参赋值的过程
　　当参数为值类型的时候，函数内和函数外的两个变量完全不同，仅仅只是存的值一样而已，修改时互不影响
　　当参数为引用类型的时候，函数内和函数外的两个变量不同，但是共同指向同一个对象，在函数内修改对象数据时会影响外部

扩展：
考虑如下情况：输出结果是多少？

function foo(o){
    o = {name:"张三", age:18};
}
var p;
foo(p);

console.log(p.age);

上面的报错，因为p为undefined

对象的动态特性

• 给对象动态添加属性
  当一个对象需要某个属性的时候，可以用两种方式为其添加属性
• 直接使用对象名.属性名 = 值这种形式，为对象添加对应的属性。
• 使用关联数组语法对象名["属性名"] = 值这种形式，为对象添加对应的属性

//o是一个没有任何自定义属性的对象
var o = {};

//现在想让他拥有name age gender等属性
//直接使用 对象名.属性名 = 值
o.name = "张三";



//使用 对象名["属性名"] = 值
o["age"] = 18;



//可以通过打印查看效果
console.log(o.name);
console.log(o.age);

注意：
当要动态的为一个对象添加属性的时候，必须使用关联数组的方式。

//接收到了用户的输入
var str = prompt("请输入属性名");

o = {};
//o.str = "这是一个新属性"; //这么写是不对的，会给对象新增一个str属性
//正确的写法如下
o[str]="这是一个新属性";

• 对象属性的访问形式
• 点语法：对象名.属性名
• 关联数组：对象名[属性名]

var o = {
    name:"张三",
    sayHello:function(){
        console.log("你好，我叫"+ this.name);
    }
};

//点语法
console.log(o.name);

//关联数组语法
console.log(o["name"]);

//这两种用法同样适用于方法
o.sayHello();
o["sayHello"]();

//可以对这个对象的属性进行遍历，如果是值就打印，如果是方法就调用
for(var k in o){
    if ( typeof o[ k ] == 'function' ) {
        o[ k ]();
    } else {
        console.log( 'log: ' + o[ k ] );
    }
}

动态特性key的类型

逻辑中断

表达式1 || 表达式2
如果表达式1为true，返回表达式1
如果表达式1为false，返回表达式2

var num = 0||2;
console.log(num);//2

表达式1 && 表达式2
如果表达式1为真
　　判断表达式2，为真则返回表达式2，为假则返回表达式1
如果表达式1为假
　　则直接返回表达式2

delete关键字

• 可以用来删除对象的属性。
• 删除未使用var声明的变量。

delete 变量名;

返回值：删除是否成功

• 如果删除的是不存在的属性返回值也是true
• 如果删除的属性存在原型当中，那么返回true，当并未删除

异常处理

常见的异常分类

• 运行环境的多样性导致的异常（浏览器）
• 语法错误，代码错误

异常最大的特征，就是一旦代码出现异常，后面的代码就不会再执行

异常捕获

捕获异常，使用try-catch语句

try{
    //这里写可能出现异常的代码
}catch(e){
    //这里的e就是捕获的异常对象
    //可以在这里写，出现异常后的处理代码
}

异常捕获语句执行的过程为：

• 代码正常运行, 如果在try中出现了错误, try 里面出现错误的语句后面的代码都不再执行, 直接跳转到 catch 中
• catch中处理错误信息
• 然后继续执行后面的代码
• 如果 try 中没有出现错误, 那么不走 catch 直接执行后面的代码

通过try-catch语句进行异常捕获之后，代码将会继续执行，而不会中断。
注意：

• 语法错误异常用try-catch语句无法捕获，因为在预解析阶段，语法错误会直接检测出来，而不会等到运行的时候才报错。
• try-catch在一般日常开发中基本用不到，但是如果要写框架什么的，用的会非常多。因为这个会让框架变得健壮

抛出异常

如何手动的抛出异常呢？

案例：自己写的一个函数，需要一个参数，如果用户不传参数，此时想直接给用户抛出异常，就需要了解如何抛出异常。

抛出异常使用throw关键字，语法如下：

throw 异常对象;

异常对象一般是用new Error("异常消息"), 也可以使用任意对象

function test(para){
    if(para == undefined){
        throw new Error("请传递参数");
        //这里也可以使用自定义的对象
        throw {"id":1, msg:"参数未传递"};
    }
}

try{
    test();
}catch(e){
    console.log(e);
}

异常的传递机制

function f1 () {
    f2(); // f1 称为调用者, 或主调函数, f2 称为被调用者, 或被调函数
}

function f2 () {
    f3();
}

function f3() {
    throw new Error( 'error' );
}
f1();

当在被调函数内发生异常的时候，异常会一级一级往上抛出。

异常捕获语句的完整模式

异常捕获语句的完整模式为try-catch-finally

try {
    //可能出现错误的代码
} catch ( e ) {
    //如果出现错误就执行
} finally {
    //结束 try 这个代码块之前执行, 即最后执行
}

finally中的代码，不管有没有发生异常，都会执行。一般用在后端语言中，用来释放资源，JavaScript中很少会用到

注意：语法异常try..catch..无法捕获

---

---

JS复习

JS中的循环

• for
• while
• do..while
• for..in

JS中分支

• if..else..
• switch..case..

break和continue

continue跳出本次循环，继续下次循环， continue下面的代码不在执行
break终止循环。

调试工具的使用

开启调试窗口

windows 平台: f12

调试窗口介绍

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

调试工具的使用

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

设置断点技巧

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

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

条件断点

• add conditional breakpointer

  
  
  

• 设置条件：i==985

  
  
  
  
  

  按下回车，刷新页面，当i==985的时候才会进入断点

• 激活/取消激活断点

  
  
  

• 出现异常暂停

  
  
  

DOM基本操作

增删改查

获取元素操作

• getElementById
• getElementsByTagName
• getElementsByClassName

元素节点操作

• appendChild
• insertBefore
• removeChild
• replaceChild
• cloneNode
• createElement
• createTextNode（创建文本节点）

属性节点操作

• getAttribute
• setAttribute
• removeAttribute

常用DOM属性

• className
• innerHTML
• innerText/textContent value
• children

Function

函数声明

• 基本的函数声明方式

function funcName(){
    //函数体
}

• 函数表达式
  在使用函数表达式声明函数的时候，function后面可以跟函数名
  但是这个函数名只限在内部使用，在外部无法访问。

var funcName1 = function name1(){
    //函数体
}

• new Function

var func1 = new Function();