数据类型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01_数据类型</title> 6 </head> 7 <body> 8 <!-- 9 1. 分类 10 * 基本(值)类型 11 * String: 任意字符串 12 * Number: 任意的数字 13 * boolean: true/false 14 * undefined: undefined 15 * null: null 16 * 对象(引用)类型 17 * Object: 任意对象 18 * Function: 一种特别的对象(可以执行) 19 * Array: 一种特别的对象(数值下标, 内部数据是有序的) 20 2. 判断 21 * typeof: 22 * 可以判断: undefined/ 数值 / 字符串 / 布尔值 / function 23 * 不能判断: null与object object与array 24 * instanceof: 25 * 判断对象的具体类型 26 * === 27 * 可以判断: undefined, null 28 --> 29 30 <script type="text/javascript"> 31 //1. 基本 32 // typeof返回数据类型的字符串表达 33 var a 34 console.log(a, typeof a, typeof a==='undefined',a===undefined ) // undefined 'undefined' true true 35 console.log(undefined==='undefined') // 值和类型不能全等，类型/值和类型/值才能判断全等 36 a = 4 37 console.log(typeof a==='number') //true 38 a = 'atguigu' 39 console.log(typeof a==='string') //true 40 a = true 41 console.log(typeof a==='boolean') //true 42 a = null 43 console.log(typeof a, a===null) // 'object' true 44 45 console.log('-----------------') 46 //2. 对象 47 var b1 = { 48 b2: [1, 'abc', console.log], 49 b3: function () { 50 console.log('b3') 51 return function () { 52 return 'xfzhang' 53 } 54 } 55 } 56 57 console.log(b1 instanceof Object, b1 instanceof Array) // true false 58 console.log(b1.b2 instanceof Array, b1.b2 instanceof Object) // true true 59 console.log(b1.b3 instanceof Function, b1.b3 instanceof Object) // true true 60 61 console.log(typeof b1.b2, '-------') // 'object' 62 console.log(b1.b2 instanceof Array) // true 63 console.log(b1.b2 instanceof Object)// true 64 65 console.log(typeof b1.b3==='function') // true 66 67 console.log(typeof b1.b2[2]==='function') //true 68 b1.b2[2](4) 69 console.log(b1.b3()()) 70 71 72 73 /*var obj = { 74 name: 'Tom', 75 age: 12 76 } 77 function test () { 78 var a = 3 79 } 80 var arr = [3, 'abc'] 81 arr[1]*/ 82 83 </script> 84 </body> 85 </html>
1.
判断
* typeof:
* 可以判断: undefined/ 数值 / 字符串 / 布尔值 / function
* 不能判断: null与object object与array
* instanceof:
* 判断对象的具体类型
* ===
* 可以判断: undefined, null
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01_相关问题</title> 6 </head> 7 <body> 8 <!-- 9 1. undefined与null的区别? 10 * undefined代表定义未赋值 11 * nulll定义并赋值了, 只是值为null 12 2. 什么时候给变量赋值为null呢? 13 * 初始赋值, 表明将要赋值为对象 14 * 结束前, 让对象成为垃圾对象(被垃圾回收器回收) 15 3. 严格区别变量类型与数据类型? 16 * 数据的类型 17 * 基本类型 18 * 对象类型 19 * 变量的类型(变量内存值的类型) 20 * 基本类型: 保存就是基本类型的数据（就是那个数据值） 21 * 引用类型: 保存的是地址值 22 --> 23 24 <script type="text/javascript"> 25 26 // 实例: 实例对象 27 // 类型: 类型对象 28 function Person (name, age) {// 构造函数 类型 29 this.name = name 30 this.age = age 31 } 32 var p = new Person('tom', 12) // 根据类型创建的实例对象 33 34 // Person('jack', 12) 35 36 // 1. undefined与null的区别? 37 var a 38 console.log(a) // undefined 39 a = null 40 console.log(a) // null 41 42 //起始 43 var b = null // 初始赋值为null, 表明将要赋值为对象 44 //确定对象就赋值 45 b = ['atguigu', 12] 46 //最后 47 b = null // 让b指向的对象成为垃圾对象(被垃圾回收器回收) 48 // b = 2 49 50 var c = function () { //c保存的是一个内存地址，不是对象，他去引用这个地址 51 52 } 53 54 console.log(typeof c) // 'function' 55 56 </script> 57 </body> 58 </html>
1.
* 变量的类型(变量内存值的类型)
* 基本类型: 保存就是基本类型的数据（就是那个数据值）
* 引用类型: 保存的是地址值
数据，变量，内存
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02_数据_变量_内存</title> 6 </head> 7 <body> 8 <!-- 9 1. 什么是数据? 10 * 存储在内存中代表特定信息的'东东', 本质上是0101... 11 * 数据的特点: 可传递, 可运算 12 * 一切皆数据 13 * 内存中所有操作的目标: 数据 14 * 算术运算 15 * 逻辑运算 16 * 赋值 17 * 运行函数 18 2. 什么是内存? 19 * 内存条通电后产生的可储存数据的空间(临时的) 20 * 内存产生和死亡: 内存条(电路版)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失 21 * 一块小内存的2个数据 22 * 内部存储的数据 23 * 地址值 24 * 内存分类 25 * 栈: 全局变量/局部变量 26 * 堆: 对象 27 3. 什么是变量? 28 * 可变化的量, 由变量名和变量值组成 29 * 每个变量都对应的一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据 30 4. 内存,数据, 变量三者之间的关系 31 * 内存用来存储数据的空间 32 * 变量是内存的标识 33 --> 34 <script type="text/javascript"> 35 36 var age = 18 37 console.log(age) 38 39 var obj = {name: 'Tom'} 40 console.log(obj.name) 41 42 function fn () { 43 var obj = {name: 'Tom'} // obj是局部变量，在栈内存，{name: 'Tom'}是对象，在堆内存中 44 } // fn函数名是在栈内存（全局）， 而函数的对象内容是在堆内存中 45 46 var a = 3 47 var b = a //a变量保存的值复制一份给b 48 var b = a + 2 //a 49 50 51 </script> 52 </body> 53 </html>
重要
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02_关于引用变量赋值问题</title> 6 </head> 7 <body> 8 <!-- 9 关于引用变量赋值问题 10 * 2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据 11 * 2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象 12 --> 13 <script type="text/javascript"> 14 var obj1 = {name: 'Tom'} 15 var obj2 = obj1 //将obj1的数据复制给obj2(或将对象地址值复制) 16 obj2.age = 12 17 console.log(obj1.age) // 12 18 function fn (obj) { 19 obj.name = 'A' // 重置对象的属性 20 } 21 fn(obj1) 22 console.log(obj2.name) //A 23 24 25 var a = {age: 12} 26 var b = a //让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象 27 a = {name: 'BOB', age: 13} //a的地址值变了，不和b的地址值一样了 28 29 console.log(b.age, a.name, a.age) // 12 Bob 13 30 b.age = 14 31 console.log(b.age, a.name, a.age) // 14 Bob 13 32 33 function fn2 (obj) { 34 obj = {age: 15} //obj新建了一个内存地址，obj的地址变了 35 } 36 fn2(a) //将a的地址值复制给形参obj,a的地址值没有变 37 38 console.log(a.age) //13 a的地址值没有变 39 40 41 42 43 </script> 44 </body> 45 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02_内存管理</title> 6 </head> 7 <body> 8 <!-- 9 问题: JS引擎如何管理内存? 10 1. 内存生命周期 11 * 分配小内存空间, 得到它的使用权 12 * 存储数据, 可以反复进行操作 13 * 释放小内存空间 14 2. 释放内存 15 * 局部变量: 函数执行完自动释放 16 * 对象: 成为垃圾对象==>垃圾回收器回收 17 --> 18 <script type="text/javascript"> 19 var a = 3 20 var obj = {} 21 obj = undefined 22 23 function fn () { 24 var b = {} 25 } 26 27 fn() //函数执行， 变量b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收 28 </script> 29 </body> 30 </html>
对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03_对象</title> 6 </head> 7 <body> 8 <!-- 9 1. 什么是对象? 10 * 多个数据的封装体 11 * 用来保存多个数据的容器 12 * 一个对象代表现实中的一个事物 13 2. 为什么要用对象? 14 * 统一管理多个数据 15 3. 对象的组成 16 * 属性: 属性名(字符串)和属性值(任意)组成 17 * 方法: 一种特别的属性(属性值是函数) 18 4. 如何访问对象内部数据? 19 * .属性名: 编码简单, 有时不能用 20 * ['属性名']: 编码麻烦, 能通用 21 --> 22 <script type="text/javascript"> 23 var p = { 24 name: 'Tom', 25 age: 12, 26 setName: function (name) { 27 this.name = name 28 }, 29 setAge: function (age) { 30 this.age = age 31 } 32 } 33 34 p.setName('Bob') 35 p['setAge'](23) 36 console.log(p.name, p['age']) // Bob 23 37 38 39 40 </script> 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03_相关问题</title> 6 </head> 7 <body> 8 <!-- 9 问题: 什么时候必须使用['属性名']的方式? 10 1. 属性名包含特殊字符: - 空格 11 2. 属性名不确定 12 --> 13 <script type="text/javascript"> 14 var p = {} 15 //1. 给p对象添加一个属性: content type: text/json 16 // p.content-type = 'text/json' //不能用 17 p['content-type'] = 'text/json' 18 console.log(p['content-type']) //text/json 19 20 //2. 属性名不确定 21 var propName = 'myAge' 22 var value = 18 23 // p.propName = value //不能用 24 p[propName] = value //传递了实参 25 console.log(p[propName]) //18 26 console.log(p) //content-type: "text/json" myAge: 18 27 28 29 </script> 30 </body> 31 </html>
函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04_函数</title> </head> <body> <!-- 1. 什么是函数? * 实现特定功能的n条语句的封装体 * 只有函数是可以执行的, 其它类型的数据不能执行 2. 为什么要用函数? * 提高代码复用 * 便于阅读交流 3. 如何定义函数? * 函数声明 * 表达式 4. 如何调用(执行)函数? * test(): 直接调用 * obj.test(): 通过对象调用 * new test(): new调用 * test.call/apply(obj): 临时让test成为obj的方法进行调用 --> <script type="text/javascript"> /* 编写程序实现以下功能需求: 1. 根据年龄输出对应的信息 2. 如果小于18, 输出: 未成年, 再等等! 3. 如果大于60, 输出: 算了吧! 4. 其它, 输出: 刚好! */ function showInfo (age) { if(age<18) { console.log('未成年, 再等等!') } else if(age>60) { console.log('算了吧!') } else { console.log('刚好!') } } showInfo(17) showInfo(20) showInfo(65) function fn1 () { //函数声明 console.log('fn1()') } var fn2 = function () { //表达式 console.log('fn2()') } fn1() fn2() var obj = {} function test2 () { this.xxx = 'ag' } // obj.test2() 不能直接, 根本就没有 test2.call(obj) //相当于 obj.test2() // 可以让一个函数成为指定任意对象的方法进行调用 console.log(obj.xxx) //ag console.log(obj); //{xxx: "ag"} </script> </body> </html>
1.
如何调用(执行)函数?
* test(): 直接调用
* obj.test(): 通过对象调用
* new test(): new调用
* test.call/apply(obj): 临时让test成为obj的方法进行调用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>06_IIFE</title> 6 </head> 7 <body> 8 <!-- 9 1. 理解 10 * 全称: Immediately-Invoked Function Expression 立即执行函数 11 2. 作用 12 * 隐藏实现 13 * 不会污染外部(全局)命名空间 14 * 用它来编码js模块 15 --> 16 <script type="text/javascript"> 17 (function () { //匿名函数自调用 18 var a = 3 19 console.log(a + 3) 20 })() 21 var a = 4 22 console.log(a) 23 24 ;(function () { 25 var a = 1 26 function test () { 27 console.log(++a) 28 } 29 window.$ = function () { // 向外暴露一个全局函数 30 return { 31 test: test 32 } 33 } 34 })() 35 36 $().test() //2 1. $是一个函数 2. $执行后返回的是一个对象 37 38 39 </script> 40 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>07_函数中的this</title> 6 </head> 7 <body> 8 <!-- 9 1. this是什么? 10 * 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window 11 * 所有函数内部都有一个变量this 12 * 它的值是调用函数的当前对象 13 2. 如何确定this的值? 14 * test(): window 15 * p.test(): p 16 * new test(): 新创建的对象 17 * p.call(obj): obj 18 --> 19 20 <script type="text/javascript"> 21 function Person(color) { 22 console.log(this) 23 this.color = color; 24 this.getColor = function () { 25 console.log(this) 26 return this.color; 27 }; 28 this.setColor = function (color) { 29 console.log(this) 30 this.color = color; 31 }; 32 } 33 34 Person("red"); //this是谁? window 35 36 var p = new Person("yello"); //this是谁? p 37 38 p.getColor(); //this是谁? p 39 40 var obj = {}; 41 p.setColor.call(obj, "black"); //this是谁? obj 42 43 var test = p.setColor; 44 test(); //this是谁? window 45 46 function fun1() { 47 function fun2() { 48 console.log(this); 49 } 50 51 fun2(); //this是谁? window 52 } 53 fun1(); 54 </script> 55 </body> 56 </html>
1. this是什么?
* 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
* 所有函数内部都有一个变量this
* 它的值是调用函数的当前对象
2. 如何确定this的值?
* test(): window
* p.test(): p
* new test(): 新创建的对象
* p.call(obj): obj
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05_回调函数</title> 6 </head> 7 <body> 8 <button id="btn">测试点击事件</button> 9 <!-- 10 1. 什么函数才是回调函数? 11 1). 你定义的 12 2). 你没有调 13 3). 但最终它执行了(在某个时刻或某个条件下) 14 2. 常见的回调函数? 15 * dom事件回调函数 ==>发生事件的dom元素 16 * 定时器回调函数 ===>window 17 18 * ajax请求回调函数(后面讲) 19 * 生命周期回调函数(后面讲) 20 --> 21 <script type="text/javascript"> 22 document.getElementById('btn').onclick = function () { // dom事件回调函数 23 alert(this.innerHTML) 24 } 25 26 //定时器 27 // 超时定时器 28 // 循环定时器 29 setTimeout(function () { // 定时器回调函数 30 31 alert('到点了'+this) 32 }, 2000) 33 34 /*var a = 3 35 alert(window.a) 36 window.b = 4 37 alert(b)*/ 38 </script> 39 40 </body> 41 </html>