【js高级】01_基础总结深入

西西歪歪西歪

已于 2022-02-28 17:21:32 修改

阅读量131

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

于 2022-02-27 19:24:54 首次发布

本文链接：https://blog.csdn.net/weixin_58214412/article/details/123168616

版权

JavaScript 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

1.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_数据类型</title>
</head>
<body>
<!--
1. 分类
  * 基本(值)类型
    * String: 任意字符串
    * Number: 任意的数字
    * boolean: true/false
    * undefined: undefined
    * null: null
  * 对象(引用)类型
    * Object: 任意对象
    * Function: 一种特别的对象(可以执行)
    * Array: 一种特别的对象(数值下标, 内部数据是有序的)
2. 判断
  * typeof:
    * 可以判断: undefined/ 数值 / 字符串 / 布尔值 / function
    * 不能判断: null与object  object与array
  * instanceof:
    * 判断对象的具体类型
  * ===
    * 可以判断: undefined, null
-->

<script type="text/javascript">
  //1. 基本
  // typeof返回数据类型的字符串表达
  var a
  console.log(a, typeof a, typeof a==='undefined',a===undefined )  // undefined 'undefined' true true
  console.log(undefined==='undefined')
  a = 4
  console.log(typeof a==='number')
  a = 'atguigu'
  console.log(typeof a==='string')
  a = true
  console.log(typeof a==='boolean')
  a = null
  console.log(typeof a, a===null) // 'object'

  console.log('-----------------')
  //2. 对象
  var b1 = {
    b2: [1, 'abc', console.log],
    b3: function () {
      console.log('b3')
      return function () {
        return 'xfzhang'
      }
    }
  }

  console.log(b1 instanceof Object, b1 instanceof Array) // true  false
  console.log(b1.b2 instanceof Array, b1.b2 instanceof Object) // true true
  console.log(b1.b3 instanceof Function, b1.b3 instanceof Object) // true true

  console.log(typeof b1.b2, '-------') // 'object'

  console.log(typeof b1.b3==='function') // true

  console.log(typeof b1.b2[2]==='function')
  b1.b2[2](4)
  console.log(b1.b3()())



  /*var obj = {
    name: 'Tom',
    age: 12
  }
  function test () {
    var a = 3
  }
  var arr = [3, 'abc']
  arr[1]*/

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_相关问题</title>
</head>
<body>
<!--
1. undefined与null的区别?
  * undefined代表定义未赋值
  * nulll定义并赋值了, 只是值为null
2. 什么时候给变量赋值为null呢?
  * 初始赋值, 表明将要赋值为对象
  * 结束前, 让对象成为垃圾对象(被垃圾回收器回收)
3. 严格区别变量类型与数据类型?
  * 数据的类型
    * 基本类型
    * 对象类型
  * 变量的类型(变量内存值的类型)
    * 基本类型: 保存就是基本类型的数据
    * 引用类型: 保存的是地址值
-->

<script type="text/javascript">

  // 实例: 实例对象
  // 类型: 类型对象
  function Person (name, age) {// 构造函数  类型
    this.name = name
    this.age = age
  }
  var p = new Person('tom', 12) // 根据类型创建的实例对象

  // Person('jack', 12)

  // 1. undefined与null的区别?
  var a
  console.log(a)  // undefined
  a = null
  console.log(a) // null

  //起始
  var b = null  // 初始赋值为null, 表明将要赋值为对象
  //确定对象就赋值
  b = ['atguigu', 12]
  //最后
  b = null // 让b指向的对象成为垃圾对象(被垃圾回收器回收)
  // b = 2

  var c = function () {

  }

  console.log(typeof c) // 'function'

</script>
</body>
</html>

2.数据_变量_内存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_数据_变量_内存</title>
</head>
<body>
<!--
1. 什么是数据?
  * 存储在内存中代表特定信息的'东东', 本质上是0101...
  * 数据的特点: 可传递, 可运算
  * 一切皆数据
  * 内存中所有操作的目标: 数据
    * 算术运算
    * 逻辑运算
    * 赋值
    * 运行函数
2. 什么是内存?
  * 内存条通电后产生的可储存数据的空间(临时的)
  * 内存产生和死亡: 内存条(电路板)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
  * 一块小内存的2个数据
     * 内部存储的数据
     * 地址值
  * 内存分类
    * 栈: 全局变量/局部变量
    * 堆: 对象
3. 什么是变量?
  * 可变化的量, 由变量名和变量值组成
  * 每个变量都对应的一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据
4. 内存,数据, 变量三者之间的关系
  * 内存用来存储数据的空间
  * 变量是内存的标识
-->
<script type="text/javascript">

  var age = 18
  console.log(age)

  var obj = {name: 'Tom'}
  console.log(obj.name)

  function fn () {
    var obj = {name: 'Tom'}
  }

  var a = 3
  var b = a + 2


</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关于赋值和内存的问题</title>
</head>
<body>
<!--
  问题: var a = xxx, a内存中到底保存的是什么?
    * xxx是基本数据, 保存的就是这个数据
    * xxx是对象, 保存的是对象的地址值
    * xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)
-->
<script type="text/javascript">
  var a = 3
  a = function () {

  }

  var b = 'abc'
  a = b
  b = {}
  a = b



</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_关于引用变量赋值问题</title>
</head>
<body>
<!--
关于引用变量赋值问题
  * 2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据
  * 2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象
-->
<script type="text/javascript">
  var obj1 = {name: 'Tom'}
  var obj2 = obj1
  obj2.age = 12
  console.log(obj1.age)  // 12
  function fn (obj) {
    obj.name = 'A'
  }
  fn(obj1)
  console.log(obj2.name) //A


  var a = {age: 12}
  var b = a
  a = {name: 'BOB', age: 13}
  b.age = 14
  console.log(b.age, a.name, a.age) // 14 Bob 13

  function fn2 (obj) {
    obj = {age: 15}
  }
  fn2(a)

  console.log(a.age) // 13




</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_关于数据传递问题</title>
</head>
<body>
<!--
问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递
  * 理解1: 都是值(基本/地址值)传递
  * 理解2: 可能是值传递, 也可能是引用传递(地址值)
-->
<script type="text/javascript">
  var a = 3
  function fn (a) {
    a = a +1
  }
  fn(a) // 3
  console.log(a)

  function fn2 (obj) {
    console.log(obj.name)
  }
  var obj = {name: 'Tom'}
  fn2(obj)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_内存管理</title>
</head>
<body>
<!--
问题: JS引擎如何管理内存?
1. 内存生命周期
  * 分配小内存空间, 得到它的使用权
  * 存储数据, 可以反复进行操作
  * 释放小内存空间
2. 释放内存
  * 局部变量: 函数执行完自动释放
  * 对象: 成为垃圾对象==>垃圾回收器回收
-->
<script type="text/javascript">
  var a = 3
  var obj = {}
  obj = undefined

  function fn () {
    var b = {}
  }

  fn() // b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收
</script>
</body>
</html>

3.对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_对象</title>
</head>
<body>
<!--
1. 什么是对象?
  * 多个数据的封装体
  * 用来保存多个数据的容器
  * 一个对象代表现实中的一个事物
2. 为什么要用对象?
  * 统一管理多个数据
3. 对象的组成
  * 属性: 属性名(字符串)和属性值(任意)组成
  * 方法: 一种特别的属性(属性值是函数)
4. 如何访问对象内部数据?
  * .属性名: 编码简单, 有时不能用
  * ['属性名']: 编码麻烦, 能通用
-->
<script type="text/javascript">
  var p = {
    name: 'Tom',
    age: 12,
    setName: function (name) {
      this.name = name
    },
    setAge: function (age) {
      this.age = age
    }
  }

  p.setName('Bob')
  p['setAge'](23)
  console.log(p.name, p['age'])



</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_相关问题</title>
</head>
<body>
<!--
问题: 什么时候必须使用['属性名']的方式?
  1. 属性名包含特殊字符: - 空格
  2. 属性名不确定
-->
<script type="text/javascript">
  var p = {}
  //1. 给p对象添加一个属性: content type: text/json
  // p.content-type = 'text/json' //不能用
  p['content-type'] = 'text/json'
  console.log(p['content-type'])

  //2. 属性名不确定
  var propName = 'myAge'
  var value = 18
  // p.propName = value //不能用
  p[propName] = value
  console.log(p[propName])


</script>
</body>
</html>

4.函数

<!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 = 'atguigu'
  }
  // obj.test2()  不能直接, 根本就没有
  test2.call(obj) // obj.test2()   // 可以让一个函数成为指定任意对象的方法进行调用
  console.log(obj.xxx)

</script>
</body>
</html>

5.回调函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_回调函数</title>
</head>
<body>
<button id="btn">测试点击事件</button>
<!--
1. 什么函数才是回调函数?
  1). 你定义的
  2). 你没有调
  3). 但最终它执行了(在某个时刻或某个条件下)
2. 常见的回调函数?
  * dom事件回调函数 ==>发生事件的dom元素
  * 定时器回调函数 ===>window

  * ajax请求回调函数(后面讲)
  * 生命周期回调函数(后面讲)
-->
<script type="text/javascript">
  document.getElementById('btn').onclick = function () { // dom事件回调函数
    alert(this.innerHTML)
  }

  //定时器
    // 超时定时器
    // 循环定时器
  setTimeout(function () { // 定时器回调函数

    alert('到点了'+this)
  }, 2000)

  /*var a = 3
  alert(window.a)
  window.b = 4
  alert(b)*/
</script>

</body>
</html>

6.IIFE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_IIFE</title>
</head>
<body>
<!--
1. 理解
  * 全称: Immediately-Invoked Function Expression
2. 作用
  * 隐藏实现
  * 不会污染外部(全局)命名空间
  * 用它来编码js模块
-->
<script type="text/javascript">
  (function () { //匿名函数自调用
    var a = 3
    console.log(a + 3)
  })()
  var a = 4
  console.log(a)

  ;(function () {
    var a = 1
    function test () {
      console.log(++a)
    }
    window.$ = function () { // 向外暴露一个全局函数
      return {
        test: test
      }
    }
  })()

  $().test() // 1. $是一个函数 2. $执行后返回的是一个对象


</script>

</body>
</html>

7.函数中的的this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07_函数中的this</title>
</head>
<body>
<!--
1. this是什么?
  * 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
  * 所有函数内部都有一个变量this
  * 它的值是调用函数的当前对象
2. 如何确定this的值?
  * test(): window
  * p.test(): p
  * new test(): 新创建的对象
  * p.call(obj): obj
-->

<script type="text/javascript">
  function Person(color) {
    console.log(this)
    this.color = color;
    this.getColor = function () {
      console.log(this)
      return this.color;
    };
    this.setColor = function (color) {
      console.log(this)
      this.color = color;
    };
  }

  Person("red"); //this是谁? window

  var p = new Person("yello"); //this是谁? p

  p.getColor(); //this是谁? p

  var obj = {};
  p.setColor.call(obj, "black"); //this是谁? obj

  var test = p.setColor;
  test(); //this是谁? window

  function fun1() {
    function fun2() {
      console.log(this);
    }

    fun2(); //this是谁? window
  }
  fun1();
</script>
</body>
</html>