小白快速了解-JavaScript中的数据内存对象函数


theme: smartblue

本篇文章主要内容是总结一下JavaScript中有关数据类型、数据在内存中的存储、对象和函数相关的一些基本但是又容易被忽视的一些知识。

一. 数据类型

  1. 严格来说,分为数据类型和变量类型
  • 数据类型:number、string、bool、undefind、null、object(对象)
  • 变量类型:number、string、bool、undefind、null、引用类型
  1. 什么是数据类型什么是变量类型?

    js 复制代码
    var a = 1
    var obj = { name: 'jack' }

    在上面代码中定义了两个变量, a变量的值为 1, obj 变量的值为 { name: 'jack' }。从这句话的描述中我们也能看到,我们把等号(=)左边的值称之为变量,右边的值成为值,也就是数据。基本类型都是直接保存值在变量中,但是对象不是,变量存储的是对象的引用地址,实际数据在堆区,后面会详细说明这些变量和数据在堆栈中的存储。

  2. 如何判断数据类型

  • typeof: 通过typeof无法判断null、object、array

    js 复制代码
    /**
    typeof 'str' === 'string'
    typeof 123 === 'number'
    typeof true === 'boolean'
    typeof undefind === 'undefind'
    typeof { name: 'jack' } === 'object'
    
    function fn () {}
    以下几个比较特殊:
    typeof null === 'object' // 所以一般 var obj = null, 提前赋值为null告诉别人obj后续会被赋值为对象,这只是一种规范的问题,不这么写也可以
    typeof [] === 'object' // 数组也是一种特殊的对象,可以理解为下标就是对象的key
    typeof fn === 'function'
    */
    console.log(typeof 'str' === 'string') // true, 通过typeof取到的都是类型对应的字符串表达
  • instanceof:可以用来判断null、object、array

    js 复制代码
    console.log(null instanceof Object) // false
    console.log({} instanceof Object) // true
    console.log({} instanceof Array) // false
    console.log([] instanceof Array) // true 数组基本Object类,所以[] instanceof Object === true
  • ===: 可以直接用来判断null、undefind, 需要注意,对象比较的时候比较的也是变量值(地址),而不是数据

js 复制代码
var obj1 = {}
var obj2 = {}
console.log(obj1 === obj2) // false

var a = null
var b
console.log(a === null, b === undefined) // true true

二. JS内存

这里的内存指的不是机械硬盘或者固态硬盘,而是保存运行中需要数据的一种存储介质。具有的特性是断电即失,只有在通电的状态下才能存储数据,容量远比用来存文件的固态要小,只加载程序运行过程中产生的一些数据。

  1. 首先我们弄清楚,执行一个JavaScript文件需要内存如何分配
  • 代码需要一块内存区域存储编译之后的字节码数据(这个编译过程肯定也是需要先加载源码进内存的)
  • 代码运行之后会产生变量和数据也需要内存区域(堆和栈)
  1. 下面重点说下堆栈区

    首先了解一下堆栈的概念:

    堆是在程序运行时,而不是在程序编译时,申请某个大小的内存空间。即动态分配内存,对其访问和对一般内存的访问没有区别。
    栈(stack)又名堆栈,它是一种运算受限的线性表。其限制是仅允许在表的一端进行插入和删除运算。这一端被称为栈顶,相对地,把另一端称为栈底。特点是后进先出。

    记住这点:栈区存变量值,堆区存对象

    对于基本数据类型来说,变量值就是数据,但是对于一个引用类型,变量值只是数据的地址,我们通过点运算符(.)就可以理解为去查找这块地址所对应的数据。以下是个简单图解:

    js 复制代码
    var a = 123
    var b = 'this is string'
    var obj = { name: 'jack' }

三. 对象

  1. 现实事物在编程中的抽象
  2. 数据的集合体,封装属性和方法
  3. 方便统一管理多个数据
  4. 取值方法对象名.属性名或者对象名'属性名',后者更通用,比如带有特殊字符的属性名

四. 函数

  1. n条语句的封装
  2. 提高代码复用和方便阅读理解
  3. 可以通过函数声明或者创建变量以表达式形式。后者可以提升作用域。
  4. 调用方式:
    • test()
    • obj.test()
    • new test()
    • test.call(obj)/test.apply(obj)
  5. 回调函数:相当于函数编程了,一般是函数的入参为函数,内部调用外部函数,在某个时刻回调该函数。
  6. IIFE(Immediately Invoked Functions Expressions):立即执行函数,也叫匿名函数自调用,可以用来封装模块,隐藏内部实现,不污染命名空间。
  7. this: 要么是window,要么是所创建的对象。(通过call可以改变函数自己this指向)

以上内容总结了一下JavaScript的一些基础知识,是需要完全掌握的基本知识。后续会继续总结JavaScript的更多重要知识,提高对JavaScript的了解。在框架流行的时代,不忘初心~

相关推荐
子兮曰5 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰5 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万5 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝5 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋5 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁5 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄5 天前
JavaScript 隐式全局变量解析
javascript
汉堡大王95275 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大5 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师5 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端