前端自学之路 Javascript 行话浅析（二）——数据类型堆栈闭包内存主分线程

本是古典何须时尚 2022-11-25 11:51 151阅读 0赞

### 文章目录 ###

*   *  基本数据类型
     *  引用数据类型
     *  数据类型检测
     *  typeof 无法区分object与array
     *  typeof特点
     *  NaN 有效数字问题
     *  转数字操作
     *  IIFE
     *  函数 与 this
     *  prototype constructor
     *  闭包
     *  内存溢出与内存泄漏
     *  浏览器内核
     *  JS引擎 单线程 而且是主线程执行
     *  事件驱动模型
     *  堆 heap 存放对象
     *  栈 stack 存放变量 属性
     *  请求响应模型
     *  web worker 多线程解决方案
     *

## 基本数据类型 ##

*  null
 *  undefine
 *  symbol
 *  number
 *  string
 *  boolean
 *  bigint

## 引用数据类型 ##

*  object
    
     *  array
     *  re
     *  date
     *  math
 *  function

## 数据类型检测 ##

*  typeof 检测数据类型的逻辑运算符
 *  instanceof 检测实例
 *  constructor 检测构造函数
 *  Object.prototype.toString.call 检测数据类型

## typeof 无法区分object与array ##

其他基本类型都能区分 引用类型中object与function也都能区分 如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70]  
但是不能区分array与object 为啥呢？  
笔者认为，因为var作为引用类型 存地址 typeof循着地址过去内存空间中找  
而数组在内存中，就是连续存储的对象集合  
所以typeof即便找到数组 也只能识别成对象（也就是抓到数组的第一个元素就完事了 没有继续找 或者说没有根据继续找 第二个元素谁知道是数组的元素还是别的对象了呢）

## typeof特点 ##

*  识别结果用字符串返回
 *  认为null array都是object（确实可以这么看 即，识别不够准确）

## NaN 有效数字问题 ##

意思 不是有效数字的任意值 所以 它和任何值都不相等 因为这个是抽象的 没有具体值  
所以`NaN == NaN`是`false`

那么检测这种抽象概念就要用个抽象的函数:`isNaN`  
**只有**这个可以捕捉到NaN

有意思的是 `typeof NaN === "number"` 因为不是有效数字也是number对象的一员

## 转数字操作 ##

*  Number
    
     *  浏览器底层转换机制 即
        
         *  true -> 1
         *  false -> 0
         *  null -> 0
         *  undefine -> NaN
     *  Number 必须保证整个字符串都能转成数字 如“12abc”就不行 ； “12”可以
 *  parseInt
    
     *  从字符串左侧挨个找有效数字（当然先做字符串转换数字操作）
     *  直到遇到NaN结束
     *  parseInt("") == NaN
     *  parseInt(“12abc”) == 12
 *  isNaN
    
     *  先调用浏览器底层转换机制 之后再判断
     *  isNaN(null) == isNaN(0) == false
     *  isNaN("") == isNaN(0) == false
     *  isNaN(undefine) == isNaN(NaN) == true
     *  isNaN(“12abc”) == isNaN(NaN) == true

## IIFE ##

Immediately Invoked Function Expression

*  隐藏具体实现
 *  不污染全局变量空间

(function () {
    	var a=3;
    	console.log(a+3);
    })()

是一个立即执行且不暴露内部的函数IIFE

如果想让外界获取 可以有以下形式：

## 函数 与 this ##

*  任何函数都是被某对象调用的
 *  this指示这个对象

## prototype constructor ##

Date.prototype.constructor === Date

## 闭包 ##

function fn1() {
    	var a =2;
    	var b = 3;
    	function fn2() {
    		console.log(a);
    	}
    }
    
    fn1()

闭包产生条件

*  fn1得到执行
 *  子函数调用父函数的变量与函数

理解

*  嵌套的内部函数
 *  被引用变量（函数）的对象

应用

*  将函数作为另一个函数的返回值

*  将函数作为实参传递给子函数用

function showDelay(msg,time) {
    	setTimeout(function () {
    		alert(msg)
    		},time)
    	}
    }

传递msg进去setTimeout 反过来说 子函数setTimeout引用了父函数的参数msg

## 内存溢出与内存泄漏 ##

内存泄漏 就是用完的东西不放回去 用完的内存不释放  
当内存泄漏过多的时候 超过句柄可用内存上限 就会出现内存溢出

内存泄漏有三种可能的情况

*  局部变量定义不当 导致解释为全局变量 用完不回收
 *  setInterval定时器进程没有clear释放
 *  闭包里面保护的局部变量不释放 或者说那个对象没有释放

## 浏览器内核 ##

主线程

*  js引擎模块 js程序解析
 *  html css文档解析模块
 *  DOM/CSS 上面文档解析以后 DOM和css在内存的运行 **生成一个个对象**在内存中跑
 *  布局渲染模块 负责布局 效果的绘制 即内存对象产生后如何用对象

分线程

*  定时器模块
 *  事件event响应模块
 *  网络请求 ajax

## JS引擎 单线程 而且是主线程执行 ##

setTimeout是在分线程 把定时间的长度以及回调函数设定好就行了 是浏览器的分线程 和JS引擎无关

## 事件驱动模型 ##

回调函数的执行也是要排队的 放在回调队列中（callback queue）

当然 先要等初始化代码执行完

*  dom绑定
 *  设置定时器
 *  ajax请求

之后 等待event loop事件循环的轮询 从队列中抓回调函数出来 到执行栈中做事：）

而且 JS单线程 因此队列的回调函数只能一个个做

## 堆 heap 存放对象 ##

## 栈 stack 存放变量 属性 ##

执行栈 = code segment 所有代码在这里执行

队列

*  任务队列
 *  消息队列
 *  事件队列
 *  回调队列  
    都是一个东西 看你吧函数抽象成 任务task 还是消息info 还是event时间 还是回调callback

## 请求响应模型 ##

request response model

## web worker 多线程解决方案 ##

将大计算量代码交由web worker分线程运行 而**不**冻结用户使用的页面  
但是子线程不能操作DOM 不能调用window对象的方法

因为 子线程的全局this是一个特殊的scope 但绝不是window 因此window类的方法都没法用 只能做基本的计算了。。。

*  主线程代码  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 1]
 *  子线程代码  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 2]  
    类似JS引擎的单线程 有消息队列  
    我们worker的主分线程也同样有消息队列：）

##  ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70]: /images/20221124/c65a53ce409340de80557db51f3e3652.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 1]: /images/20221124/89c45c7d29e84bf89cc93bf18d18ceba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 2]: /images/20221124/545eff76fb1849c9856bf7f11f7f51c5.png