知识点
- 数据类型
- 值类型和引用类型
- 值类型和引用类型的特征
- 值类型和引用类型做参数
- 对象的动态特性
- 给对象动态添加属性
- 对象属性的访问形式
- 逻辑中断
- ||
- &&
- 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
例：对象实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2 id="title">产品名称</h2>
<p id="desc">描述</p>
</body>
</html>
<script type="text/javascript">
//产品对象：名称、价格、描述
function Product(){
//名称
this.title = "iphone 7s";
//价格
this.price = 6700;
//图片
this.images = [
];
//描述
this.description = "手机中的吊炸天";
}
Product.prototype = {
buy: function () {
},
getDetail: function () {
}
}
window.onload = function () {
var iphone32 = new Product();
iphone32.title = "iphone 7s 闷骚金色";
iphone32.price = 4988;
//获取元素
var title = document.getElementById("title");
var desc = document.getElementById("desc");
/*绑定元素*/
title.innerHTML = iphone32.title;
desc.innerHTML = iphone32.description;
/*绑定事件*/
}
</script>
对象
新建对象：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的类型
<script type="text/javascript">
var obj = {
name:"就不告诉你",
age:12
}
obj.num = 24;
obj["func"] = function () {
console.log("添加成功");
}
obj["func"]();
obj[0] = function () {
console.log("ok1");
}
obj[0]();
obj[{}] = function () {
console.log("ok2");
}
obj[{}]();
</script>
逻辑中断
表达式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，当并未删除
<script type="text/javascript">
var obj = {
name:"hehe",
age:12
}
console.log(obj.name);//hehe
delete obj.name;
console.log(obj.name);//undefined
var num1 = 14;
num2 = 15;
var f1 = delete num1;//false
var f2 = delete num2;//true
console.log(f1);
console.log(f2);
//如果删除的是不存在的属性返回值也是true
console.log(delete obj.gender);//true
console.log(num1);//14
console.log(num2);//报错:num2 is not defined
</script>
异常处理
常见的异常分类
- 运行环境的多样性导致的异常（浏览器）
- 语法错误，代码错误
异常最大的特征，就是一旦代码出现异常，后面的代码就不会再执行
异常捕获
捕获异常，使用try-catch语句
try{
//这里写可能出现异常的代码
}catch(e){
//这里的e就是捕获的异常对象
//可以在这里写，出现异常后的处理代码
}
异常捕获语句执行的过程为：
- 代码正常运行, 如果在try中出现了错误, try 里面出现错误的语句后面的代码都不再执行, 直接跳转到 catch 中
- catch中处理错误信息
- 然后继续执行后面的代码
- 如果 try 中没有出现错误, 那么不走 catch 直接执行后面的代码
通过try-catch语句进行异常捕获之后，代码将会继续执行，而不会中断。
注意：
- 语法错误异常用try-catch语句无法捕获，因为在预解析阶段，语法错误会直接检测出来，而不会等到运行的时候才报错。
-
try-catch在一般日常开发中基本用不到，但是如果要写框架什么的，用的会非常多。因为这个会让框架变得健壮
抛出异常
如何手动的抛出异常呢？
案例：自己写的一个函数，需要一个参数，如果用户不传参数，此时想直接给用户抛出异常，就需要了解如何抛出异常。
<script type="text/javascript">
try{
a();
}catch(e){
console.dir(e);//a is not defined
console.log(typeof e);//object
}
//手动抛出异常
try{
throw "你的代码有问题！";
}catch(e){
console.log(e);
}
function add(num1,num2){
if(num1 == undefined || num2 == undefined){
throw {
errorMsg:"参数不对啊，傻吊",
errorCode:128
};
}else{
return num1+num2;
}
}
try{
add(0);
}catch(e){
console.log(e.errorMsg);
}
//异常不会语句的完整形式
</script>
抛出异常使用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 监视窗口可以查看对象成员
条件断点
<script type="text/javascript">
for(var i=1;i<=1000;i++){
console.log(i);
}
</script>
-
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();
