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

数据类型

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)

数据_变量_内存

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、

    var boyFri={
        name:"老王",
        sex:"男",
        do:function () {
            console.log("吃饭，洗衣做饭刷碗");
            console.log(this);   //boyFri

            function fn2() {
                console.log(this);
            }
            fn2();  //window
        }
    }
    console.log(boyFri.name);

    boyFri.do();