说明

JavaScript中变量、值、对象的理解。本文为了简化理解,前半部分暂时刨除与执行上下文的相关概念。另外本文是个人的见解,如有疑问或不正支持,欢迎提出指正和讨论!

目录

前言

参考来源

前人栽树,后台乘凉,本文参考了以下来源

变量与值

区分变量与值

和所有其它程序语言一样,JavaScript也有变量和值得概念

var a = 10; //a为变量,10为值(基本类型)
var b = {}; //b为变量,{}为值(引用类型)

  

如上述代码中,=号左侧的为变量,=号右侧的为值。

JS值的两大类型

前面提到了变量和值的概念,接下来对值进行简单的介绍

JavaScript的值分为两大类型:

  • 一类是基本数据类型(也称基本类型、原始型),只有五种(undefined,null,number,boolean,string)

    基本类型的特点是定义后是无法改变的,存放于栈内存中(可以把它当成常量来理解)

  • 一类是复杂数据类型(也称引用类型、对象型),只有一种

    引用类型的特点是定义后,值可以改变,栈内存中只存放变量标识符和指针,具体的数据存放与堆内存中(所以可以改变)

    Object.prototype可以理解为万物之母,其它的所有类型的对象都可以理解为是它产生的(如内置类型Array,Date等),另外有一个比较特殊的function类型(它的原型是Function.prototype,而实际上这个原型也是基于Object.prototype的,详情需要参考后边系列文章之原型)

  • 详情参考: JavaScript的数据类型

关于基本类型与引用类型的存储,可以用下图理解

  • 也就是说,上图中,如果变量1的值变为102,实际中栈内存中的101是不会变的,只是在栈内存中新开辟出一处,用来存放102这个常量。然后将变量1指向102。

  • 而变量2由于栈内存中存放的是指针,实际执行的是堆内存中的数据,所以变量2的值是可以随便改的(堆内存中的数据可以更改)

堆内存与栈内存的区别

上述有讲到堆内存与栈内存,那么这两者有什么区别呢?

  • 栈会在生命期自动分配,回收。速度更快。
  • 堆空间更大。由用户控制。通过引用计数来控制生命期。回收器来释放最终的堆空间

而且前面的基本类型与引用类型的堆、栈分配,可以如下理解:

  • 基本类型一般数据都小。所以用栈,速度快
  • 引用类型有计数,有堆来控制释放机制

值与对象

正如上文所讲,变量,值,与对象的关系总结如下

  • var 变量 = 值; //其中只有两种类型,一种是基本类型(类似于常量数据),一种是引用类型(对象)
  • 也就是说,=号左边的是变量,=号右边的是值,而值可以取两种类型,一种是基本类型(类似于常量数据,存于栈内存中),一种是引用类型(即对象,栈内存中存指针,指向堆内存)。

结合执行上下文理解

上述有对JavaScript的变量、值、对象进行讲解。接下来结合JS中的执行上下文进行深入的讲解。

敬请期待...

JavaScript筑基篇(一)->变量、值与对象的更多相关文章

  1. JavaScript筑基篇(二)->JavaScript数据类型

    说明 介绍JavaScript数据类型 目录 前言 参考来源 前置技术要求 JavaScript的6种数据类型 哪6种数据类型 undefined 类型 null 类型 boolean 类型 numb ...

  2. JavaScript筑基篇(三)->JS原型和原型链的理解

    删除理由:很久以前写的,当时理解不够深入,这样描述反而看起来更复杂了.因此就删掉,免得误人子弟! 可以看看另一篇文章:[如何继承Date对象?由一道题彻底弄懂JS继承.](http://www.cnb ...

  3. 【转】Javascript 中的false,零值,null,undefined和空字符串对象

    js 开发中经常会碰到判断是否为空的情况,关于 null 和 undefined 的区别了解的不是很好,刚好看见这篇文章,转过来学习一下,以下是转载正文: 在Javascript中,我们经常会接触到题 ...

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--JavaScript内置对象

    1.什么事对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方 ...

  5. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  6. 5、JavaScript进阶篇②——函数、事件、内置对象

    一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; a ...

  7. 开心菜鸟系列----变量的解读(javascript入门篇)

                       console.info(         console.info(window['weiwu'])          console.info(window. ...

  8. Javascript进阶篇——( JavaScript内置对象---上-Date,string,charAt,indexOf,split,substring,substr)笔记整理

    什么是对象JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法.对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等:对象的方法:能够在 ...

  9. Javascript 中的false,零值,null,undefined和空字符串对象

    在Javascript中,我们经常会接触到题目中提到的这5个比较特别的对象--false.0.空字符串.null和undefined.这几个对象很容易用错,因此在使用时必须得小心. 类型检测 我们下来 ...

随机推荐

  1. WARNING: IPv4 forwarding is disabled. Networking will not work.

    1:Test environment [root@docker-node1 ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Cor ...

  2. 【Hadoop故障处理】全分布下,DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空

    [故障背景] DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空. /etc/hosts   的ip和hostname配置正常,各个机器之间能够ping通. [日志错误信息] ...

  3. 用PHP读取Excel、CSV文件

    PHP读取excel.csv文件的库有很多,但用的比较多的有: PHPOffice/PHPExcel.PHPOffice/PhpSpreadsheet,现在PHPExcel已经不再维护了,最新的一次提 ...

  4. java枚举常见用法

    用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. p ...

  5. Struts2+Datagrid表格显示(可显示多表内容)

    概述 最近学到EasyUI的Datagrid数据网格,然后就做了一个小例子,中间层利用Struts2来完成,DAO层用的是Hibernate. 数据库 数据库涉及到stuednt(name,noid, ...

  6. python应用:爬虫框架Scrapy系统学习第三篇——初识scrapy

    scrapy的最通用的爬虫流程:UR2IM U:URL R2:Request 以及 Response I:Item M:More URL 在scrapy shell中打开服务器一个网页 cmd中执行: ...

  7. 网络文件系统nfs在ubuntu16.04的安装

    1.搜索nfs-sudo apt-cache search nfs- 2.安装sudo apt-get install nfs-kernel-server 3.配置:/etc/exports /hom ...

  8. C语言#ifdef等宏的妙用

    这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是“条件编译”.有时,希望当满足某条件 ...

  9. Java基础之instanceof和transient关键字用法

    instanceof 用于检测指定对象是否是某个类(本类.父类.子类.接口)的实例.Java中的instanceof也称为类型比较运算符,因为它将类型与实例进行比较. 返回true或false. 如果 ...

  10. css dropdown menu

    <ul> <li class="left">abc</li> <li class="middle" id=" ...