JS从入门到放弃-基本类型和引用类型

walterrwu 发布于2019-08-22 10:43 / 1453人阅读

摘要：从入门到放弃基本类型和引用类型有七种数据类型而的变量根据指向数据类型的不同也分为两种类型一种基本类型一种引用类型基本类型基本类型包括这五种但凡变量指向这五种数据类型的都称之为基本类型假设有以上变量那么他们在内存中栈区的存储结构大概是这样子

JS从入门到放弃-基本类型和引用类型

JS有number,string,null,undefined,boolean,array,object七种数据类型,而JS的变量,根据指向数据类型的不同,也分为两种类型,一种基本类型,一种引用类型.

1. 基本类型

基本类型包括: number, string, null, undefined, boolean这五种.但凡变量指向这五种数据类型的都称之为基本类型.

var test1 = "hahaha"; // string
var test2 = 1; // number
var test3 = true; // boolean

假设有以上变量,那么他们在内存中栈区的存储结构大概是这样子的.

栈区指针	栈区值
test1	hahaha
test2	1
test3	true

var test = "321";
var test = "123";
var test1 = test;
console.log(test === test1); // true

执行以上语句之后,你可能会觉得变量test的值从字符串"321"变成了字符串"123".并不是值改变了,而是test只是一个指针,上面的两条语句都只是在为同一个指针指向不同的值而已.值是不可被改变的.执行第三条语句的时候,首先初始化一个test1变量,然后把test的变量赋值给test1.这种赋值称为深拷贝.如图:

指针	值
test	"123"
test1	"123"

最后一条语句之间的比较其实是test和test1之间的值作比较.也就是console.log("123" === "123"),之所以多此一举的解释最后两条语句,原因是因为引用类型的赋值和比较并不是如此.

2. 引用类型

引用类型包括: object和array这两种.但凡变量指向这两种数据类型的都称之为引用类型.

var china = {
  tianjin: "天津",
  beijing: "北京"
};
var huabei = {
  tianjin: "天津",
  beijing: "北京"
};

假设有以上变量,那么他们在内存中栈区和堆区的存储结构大概是这样子的.

栈区指针	栈区值
china	china对象在堆区的内存地址
huabei	huabei对象在堆区的内存地址

堆区地址	堆区值
china对象在堆区的内存地址	china对象
huabei对象在堆区的内存地址	huabei对象

china.handan = "邯郸";
console.log(china.handan); // "邯郸"

当我们继续执行上面语句的时候china堆区值内部的属性除了原有的tianjin和beijing之外又动态的添加了一个handan属性.这说明引用类型的值是可以被改变的.

console.log(china === huabei);  // false

china对象和huabei对象内的属性明明一样,但是完全相等比较符却返回了false.这进一步证明了引用类型的比较是比较两者在堆区的地址是否相同.如果我们对两个对象的内部的属性进行比较呢.

console.log(china.tianjin === huabei.tianjin) // true

这里又会返回true,这是因为我们做比较的对象的属性是基本类型.他们会比较内部的值,而不是比较两者在堆区内的地址.

最后说一下引用类型的赋值.继续上面的代码

var asia = china;
asia.tianjin = "红桥";
console.log(asia.tianjin); // 红桥
console.log(china.tianjin); // 红桥

执行上面语句你会发现明明改变的是asia的属性,但是china的属性也跟着改变了.这是因为赋给asia的值是china对象在堆区的内存地址,而不是china对象本身.两者实际上指向同一个堆区对象.也因此,改变其中任何一个的属性,另外一个也会随之更改.这种赋值也称之为浅拷贝.

栈区指针	栈区值
china	china对象在堆区的内存地址
asia	china对象在堆区的内存地址

堆区地址	堆区值
china对象在堆区的内存地址	china对象

总结

基本类型:值不可变,存放于栈区,相互比较是基于值进行比较,相互赋值是深拷贝赋值.
引用类型:值可改变,同时存放于栈区和堆区,相互比较是基于在堆区内的地址,相互赋值是浅拷贝.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91129.html

webpack -> vue Component 从入门到放弃（一）

摘要：本身也是运行在环境中的模块，它通常会返回一个函数。这个命名规则和搜索优先级顺序在的中定义。那就等下一篇介绍吧，一篇文章有太多内容，会让人很乏的从入门到放弃四从入门到放弃二从入门到放弃三源代码此篇文章仅仅是整理自己接触webpack的入门过程，可能有很多不正确的地方，希望大家谅解，并指出错误帮助改进。对于webpack的介绍和前期对他的入门使用，我觉得官方（中文网）已经介绍的很简单了...

Ashin 2019-08-20 14:34 评论0 收藏0
ES6时代，你真的会克隆对象吗(二)

摘要：多个窗口意味着多个全局环境，不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。比如，表达式会返回，因为属性得到的仅仅是构造函数，而且是可以被手动更改的，只是返回的构造函数的名字，它并不返回类名。原文：ES6时代，你真的会克隆对象吗(二) 上一篇，我们从Symbol和是否可枚举以及属性描述符的角度分析了ES6下怎么浅拷贝一个对象，发表在掘金和segmentfault上（...

BoYang 2019-08-26 11:36 评论0 收藏0
机器学习从入门到放弃之KNN算法

摘要：好了，废话不多说，马上开讲第一个机器学习的算法，算法。另外，本文题目是机器学习从入门到放弃之算法而非机器学习从入门到放弃算法这样，因为如果是后者，某日我要弃坑就会触发我的强迫症，而前者并不会，哈哈哈。谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力，在人工智能的领域比如说AlphaGo，计算机视觉领域的人脸识别,车牌识别，靠近生活...

XUI 2019-07-25 10:32 评论0 收藏0
js异步从入门到放弃(实践篇) — 常见写法&面试题解析

摘要：前文该系列下的前几篇文章分别对不同的几种异步方案原理进行解析，本文将介绍一些实际场景和一些常见的面试题。流程调度里比较常见的一种错误是看似串行的写法，可以感受一下这个例子判断以下几种写法的输出结果辨别输出顺序这类题目一般出现在面试题里。前文该系列下的前几篇文章分别对不同的几种异步方案原理进行解析，本文将介绍一些实际场景和一些常见的面试题。(积累不太够，后面想到再补) 正文流程调度...

Awbeci 2019-08-23 18:05 评论0 收藏0