JS基础深入总结

数据类型

 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>

判断

* 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 <!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>

如何调用(执行)函数?

* 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>

posted @ 2020-04-25 15:44 全情海洋阅读(188) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

全情海洋

JS基础深入总结

公告