JavaScript核心高级内容复习1

本节概述

数据类型的分类和判断

  • 基本(值)类型
    • Number ----- 任意数值 -------- typeof
    • String ----- 任意字符串 ------ typeof
    • Boolean ---- true/false ----- typeof
    • undefined — undefined ----- typeof/===
    • null -------- null ---------- ===
  • 对象(引用)类型
    • Object ----- typeof/instanceof
    • Array ------ instanceof
    • Function ---- typeof

数据,变量, 内存的理解

  • 什么是数据?
    • 在内存中可读的, 可传递的保存了特定信息的’东东’
    • 一切皆数据, 函数也是数据
    • 在内存中的所有操作的目标: 数据
  • 什么是变量?
    • 在程序运行过程中它的值是允许改变的量
    • 一个变量对应一块小内存, 它的值保存在此内存中
  • 什么是内存?
    • 内存条通电后产生的存储空间(临时的)
    • 一块内存包含2个方面的数据
      • 内部存储的数据
      • 地址值数据
    • 内存空间的分类
      • 栈空间: 全局变量和局部变量
      • 堆空间: 对象
  • 内存,数据, 变量三者之间的关系
    • 内存是容器, 用来存储不同数据
    • 变量是内存的标识, 通过变量我们可以操作(读/写)内存中的数据

对象的理解和使用

  • 什么是对象?
    • 多个数据(属性)的集合
    • 用来保存多个数据(属性)的容器
  • 属性组成:
    • 属性名 : 字符串(标识)
    • 属性值 : 任意类型
  • 属性的分类:
    • 一般 : 属性值不是function 描述对象的状态
    • 方法 : 属性值为function的属性 描述对象的行为
  • 特别的对象
    • 数组: 属性名是0,1,2,3之类的索引
    • 函数: 可以执行的
  • 如何操作内部属性(方法)
    • .属性名

函数的理解和使用

  • 什么是函数?
    • 用来实现特定功能的, n条语句的封装体
    • 只有函数类型的数据是可以执行的, 其它的都不可以
  • 为什么要用函数?
    • 提高复用性
    • 便于阅读交流
  • 函数也是对象
    • instanceof Object===true
    • 函数有属性: prototype
    • 函数有方法: call()/apply()
    • 可以添加新的属性/方法
  • 函数的3种不同角色
    • 一般函数 : 直接调用
    • 构造函数 : 通过new调用
    • 对象 : 通过.调用内部的属性/方法
  • 函数中的this
    • 显式指定谁: obj.xxx()
    • 通过call/apply指定谁调用: xxx.call(obj)
    • 不指定谁调用: xxx() : window
    • 回调函数: 看背后是通过谁来调用的: window/其它
  • 匿名函数自调用:
    (function(w, obj){
      //实现代码
    })(window, obj)
    
    • 专业术语为: IIFE (Immediately Invoked Function Expression) 立即调用函数表达式
  • 回调函数的理解
    • 什么函数才是回调函数?
      • 你定义的
      • 你没有调用
      • 但它最终执行了(在一定条件下或某个时刻)
    • 常用的回调函数
      • dom事件回调函数
      • 定时器回调函数
      • ajax请求回调函数(后面讲解)
      • 生命周期回调函数(后面讲解)

    详情讲解

数据类型1:

<!--
1. 分类(2大类)
  * 基本()类型
    * Number: 任意数值
    * String: 任意文本
    * Boolean: true/false
    * undefined: undefined
    * null: null
  * 对象(引用)类型
    * Object: 任意对象
    * Array: 特别的对象类型(下标/内部数据有序)
    * Function: 特别的对象类型(可执行)
2. 判断
  * typeof:
    * 可以区别: 数值, 字符串, 布尔值, undefined, function
    * 不能区别: null与对象, 一般对象与数组
  * instanceof
    * 专门用来判断对象数据的类型: Object, Array与Function
  * ===
    * 可以判断: undefinednull
-->

<script type="text/javascript">
  // typeof: 返回的是数据类型的字符串表达形式
  //1. 基本类型
  var a
  console.log(a, typeof a, a===undefined) // undefined 'undefined' true
  console.log(a===typeof a) // false

  a = 3
  console.log(typeof a === 'number')
  a = 'atguigu'
  console.log(typeof a === 'string')
  a = true
  console.log(typeof a === 'boolean')

  a = null
  console.log(a===null) // true
  console.log(typeof a) // 'object'

  console.log('--------------------------------')

  //2. 对象类型
  var b1 = {
    b2: [2, 'abc', console.log],
    b3: function () {
      console.log('b3()')
    }
  }
  console.log(b1 instanceof Object, typeof b1) // true 'object'
  console.log(b1.b2 instanceof Array, typeof b1.b2) // true 'object'
  console.log(b1.b3 instanceof Function, typeof b1.b3) // true 'function'

  console.log(typeof b1.b2[2]) // 'function'
  console.log(b1.b2[2]('abc')) // 'abc' undefined
</script

数据类型2:

<!--
1. undefinednull的区别?
  * undefined代表没有赋值
  * null代表赋值了, 只是值为null
2. 什么时候给变量赋值为null?
  * var a = null //a将指向一个对象, 但对象此时还没有确定
  * a = null //让a指向的对象成为垃圾对象
3. 严格区别变量类型与数据类型?
  * js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型
  * 变量类型:
    * 基本类型: 保存基本类型数据的变量
    * 引用类型: 保存对象地址值的变量
  * 数据对象
    * 基本类型
    * 对象类型
-->

<script type="text/javascript">
  // 1. undefined与null的区别?
  var a1
  var a2 = null
  console.log(a1, a2)

  // 2. 什么时候给变量赋值为null呢?
    //初始
  var a3 = null
    //中间
  var name = 'Tom'
  var age = 12
  a3 = {
    name: name,
    age: age
  }
    //结束
  a3 = null

</script>

数据_变量_内存1:

<!--
1. 什么是数据?
  * 存储于内存中代表特定信息的'东东', 本质就是0101二进制
  * 具有可读和可传递的基本特性
  * 万物(一切)皆数据, 函数也是数据
  * 程序中所有操作的目标: 数据
    * 算术运算
    * 逻辑运算
    * 赋值
    * 调用函数传参
    ...
2. 什么是内存?
  * 内存条通电后产生的存储空间(临时的)
  * 产生和死亡: 内存条(集成电路板)==>通电==>产生一定容量的存储空间==>存储各种数据==>断电==>内存全部消失
  * 内存的空间是临时的, 而硬盘的空间是持久的
  * 一块内存包含2个数据
    * 内部存储的数据(一般数据/地址数据)
    * 内存地址值数据
  * 内存分类
    *: 全局变量, 局部变量 (空间较小)
    *: 对象 (空间较大)
3. 什么是变量?
  * 值可以变化的量, 由变量名与变量值组成
  * 一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容
4. 内存,数据, 变量三者之间的关系
  * 内存是一个容器, 用来存储程序运行需要操作的数据
  * 变量是内存的标识, 我们通过变量找到对应的内存, 进而操作(/)内存中的数据
-->
<script type="text/javascript">

  var a1 = 3
  var a2 = a1 + 4
  var a3 = {}
  a3.name = 'Tom'
</script>

数据_变量_内存2:

<!--
  问题: 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>

数据_变量_内存3:

<!--
关于引用变量赋值问题
  * 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见
  * 2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象
-->
<script type="text/javascript">

  //1. 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见
  var obj1 = {}
  var obj2 = obj1
  obj2.name = 'Tom'
  console.log(obj1.name)
  function f1(obj) {
    obj.age = 12
  }
  f1(obj2)
  console.log(obj1.age)

  //2. 2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象
  var obj3 = {name: 'Tom'}
  var obj4 = obj3
  obj3 = {name: 'JACK'}
  console.log(obj4.name)
  function f2(obj) {
    obj = {name: 'Bob'}
  }
  f2(obj4)
  console.log(obj4.name)

</script>

数据_变量_内存4:

<!--
问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递
  * 只有值传递, 没有引用传递, 传递的都是变量的值, 只是这个值可能是基本数据, 也可能是地址(引用)数据
  * 如果后一种看成是引用传递, 那就值传递和引用传递都可以有
-->
<script type="text/javascript">
  function f(a) {
    console.log(a)
  }
  var n = 4
  f(n) //传递的是n的值 --->值传递

  function f2(a) {
    a.name = 'atguigu'
  }
  n = {}
  f2(n) // 传递的是n指向的对象 ---> 引用传递   ???
  console.log(n.name)
</script>

数据_变量_内存5:

<!--
问题: JS引擎如何管理内存?
  1. 内存生命周期
    1). 分配需要的内存()
    2). 使用分配到的内存
    3). 不需要时将其释放/归还
  2. 释放内存
    * 为执行函数分配的栈空间内存: 函数执行完自动释放
    * 存储对象的堆空间内存: 当内存没有引用指向时, 对象成为垃圾对象, 垃圾回收器后面就会回收释放此内存
-->
<script type="text/javascript">
  var obj = {}
  obj = null // ?

  function fn () {
    var a = 3
    var b = {}
  }
  fn() // ?
</script>

对象1:

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

  // 访问对象内部数据
  console.log(p.name, p['age'])
  p.setName('Jack')
  p['age'](23)
  console.log(p['name'], p.age)

</script>

对象2:

<!--
问题: 什么时候必须使用['属性名']的方式?
  * 属性名不是合法的标识名
  * 属性名不确定
-->
<script type="text/javascript">
  // 创建对象
  var p = {}

/*情形一: 属性名不是合法的标识名*/
  /*需求: 添加一个属性: content-type: text/json */
  //  p.content-type = 'text/json' //不正确
  p['content-type'] = 'text/json'

/*情形二: 属性名不确定*/
  var prop = 'xxx'
  var value = 123
  // p.prop = value  //不正确
  p[prop] = value
  console.log(p['content-type'], p[prop])
</script>

函数:

<!--
1. 什么是函数?
  * 具有特定功能的n条语句的封装体
  * 只有函数是可执行的, 其它类型的数据是不可执行的
  * 函数也是对象
2. 为什么要用函数?
  * 提高代码复用
  * 便于阅读和交流
3. 如何定义函数?
  * 函数声明
  * 表达式
4. 如何调用(执行)函数?
  * test()
  * new test()
  * obj.test()
  * test.call/apply(obj)
-->
<script type="text/javascript">

  function f1 () { // 函数声明
    console.log('f1()')
  }
  var f2 = function () { // 表达式
    console.log('f2()')
  }

  /*
  编写程序实现以下功能需求:
    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(22)

  /*
   函数也是对象
   */
  function fn() {

  }
  console.log(fn instanceof Object) // 是Object类型的实例
  console.log(fn.prototype) // 内部有属性
  console.log(fn.call) // 内部有方法
  fn.t1 = 'atguigu' // 可以添加属性
  fn.t2 = function () { // 可以添加方法
    console.log('t2() '+this.t1)
  }
  fn.t2()
</script>

回调函数:

<!--
1. 什么函数才是回调函数?
  * 你定义的
  * 你没有直接调用
  * 但最终它执行了(在特定条件或时刻)
2. 常见的回调函数?
  * DOM事件函数
  * 定时器函数

  * ajax回调函数(后面学)
  * 生命周期回调函数(后面学)
-->
<script type="text/javascript">

  //1. DOM事件函数
  var btn = document.getElementById('btn')
  btn.onclick = function () {
    alert(this.innerHTML)
  }

  //2. 定时器函数
  setInterval(function () {
    alert('到点啦!')
  }, 2000)
</script>

IIEF:

<!--
1. 理解
  * 全称: Immediately-Invoked Function Expression 立即调用函数表达式
  * 别名: 匿名函数自调用
2. 作用
  * 隐藏内部实现
  * 不污染外部命名空间
-->
<script type="text/javascript">
  (function (i) {
    var a = 4
    function fn() {
      console.log('fn ', i+a)
    }
    fn()
  })(3)
</script>

函数中的this:

<!--
1. this是什么?
  * 一个关键字, 一个内置的引用变量
  * 在函数中都可以直接使用this
  * this代表调用函数的当前对象
  * 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)2. 如何确定this的值?
  * test()
  * obj.test()
  * new test()
  * test.call(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是谁?

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

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

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

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

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

    fun2(); //this是谁?
  }
  fun1();
</script>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值