JavaScript基础总结深入（数据类型、数据_变量_内存、对象、函数、回调函数、this）

系统管理员 2022-05-09 07:50 147阅读 0赞

## 数据类型 ##

### 1、分类 ###

JavaScript 数据类型分为两大类，分别为：基本类型，又称为值类型；对象类型，又称为引用类型。

#### 基本（值）类型 ####

String：任意字符  
Number：任意的数字  
boolean: true/false  
undefined: undefined  
null: null

#### 对象（引用）类型 ####

Object：任意对象  
Fuction：一种特别的对象（可以执行）  
Array：一种特别的对象（数值下表，内部的数据是有序的）

### 2、判断 ###

#### typeof ####

可以判断：undefined、数值、字符串、布尔值。  
function  
不能判断：null与object，object与array。

#### instanceof ####

判断对象的具体类型

#### === ####

可以判断：undefined和null  
**注意**：想要深入理解 == 和 === 的区别可查看本人的另一篇文章([https://blog.csdn.net/LUOandHUANG/article/details/82937761][https_blog.csdn.net_LUOandHUANG_article_details_82937761])

## 数据\_变量\_内存 ##

#### 1、什么是数据 ####

a) 存储在内存中代表特定信息的称为数据  
b) 数据的特点：可传递，可运算  
c) 内存中所有操作的目标:数据

#### 2、什么是内存 ####

a) 内存条通电后产生的可储存数据的空间（临时的）  
b) 内存的产生和死亡：内存条(电路版)>通电>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失  
c) 一块小内存的2个数据：  
\* 内部存储的数据  
\* 地址值  
d)内存分类：  
\* 栈: 全局变量/局部变量  
\* 堆: 对象

#### 3、什么是变量 ####

a) 可变化的量，由变量名和变量值组成  
b) 每个变量都对应一块小内存，变量名用来查找对应的内存，变量是就是内存中保存的数据

#### 4、内存，数据，变量三者之间的关系 ####

a) 内存用来存储数据的空间  
b) 变量是内存的标识  
**拓展**  
问题: var a = xxx, a内存中到底保存的是什么?  
\* xxx是基本数据, 保存的就是这个数据  
\* xxx是对象, 保存的是对象的地址值  
\* xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)  
5、关于引用变量赋值问题  
a) 2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据  
b) 2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象

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

## 对象 ##

#### 1、什么是对象 ####

对象是多个数据的封装体，是用来保存多个数据的容器，一个对象代表现实中的一个事物

#### 2、为什么要用对象 ####

为了统一管理多个数据

#### 3、对象的组成 ####

a) 属性:属性名（字符串）和属性值（任意）组成  
b) 方法：一种特别的属性（属性值是函数）

#### 4、如何访问对象内部数据 ####

a) .属性名: 编码简单, 有时不能用  
b) \[‘属性名’\]: 编码麻烦, 能通用

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'])

**拓展** 问题: 什么时候必须使用\[‘属性名’\]的方式?

1.  属性名包含特殊字符: - 空格
2.  属性名不确定

## 函数 ##

#### 1、什么是函数 ####

函数是实现特定功能的n条语句的封装提，只有函数是可以执行的，其他类型的数据不能执行

#### 2、为什么要用函数 ####

使用函数可以提高代码的复用，更便于阅读交流

#### 3、如何定义函数 ####

a) 函数声明  
b) 表达式

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

## 回调函数 ##

1.  什么函数才是回调函数?  
    a). 你定义的  
    b). 你没有调  
    c). 但最终它执行了(在某个时刻或某个条件下)
2.  常见的回调函数?  
    a) dom事件回调函数 ==>发生事件的dom元素

document.getElementById('btn').onclick = function () { // dom事件回调函数
        alert(this.innerHTML)
      }

b) 定时器回调函数 ===>window

setTimeout(function () { // 定时器回调函数
        alert('你点我干嘛'+this)
      }, 2000)

## 函数中的this ##

1.  this是什么?  
    a) 所有函数内部都有一个变量this（在函数运行时自动生成的一个内部对象），只能在函数内部使用。  
    b) 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window（如果this所在函数找不到谁调用，那么this就指向Window）  
    c) 它的值是调用函数的当前对象
2.  如何确定this的值?

*  test(): window
 *  p.test(): p
 *  new test(): 新创建的对象
 *  p.call(obj): obj

**1、**

var box=document.getElementById("box");
        box.onclick=function () {
            console.log(this);
            this.style.backgroundColor="red";
        }

在该例子中，函数是box调用的，所以this指向的是box  
**2、**

box.ondblclick=function () { 
            console.log(this) //box
            function fn2() {
                console.log(this) //window
            }
            fn2();
        }

在该例子中，box调用了匿名函数，因此第一个this是box，而 fn2在调用匿名函数时被调用，并不是box调用了 fn2，因此 fn2中的this应为 window。

**3、**

[https_blog.csdn.net_LUOandHUANG_article_details_82937761]: https://blog.csdn.net/LUOandHUANG/article/details/82937761