JavaScript 深入了解基本类型和引用类型的值

Mr_houzi 发布于2019-08-20 10:37 / 1479人阅读

摘要：原文链接一个变量可以存放两种类型的值，基本类型的值和引用类型的值。引入了一种新的原始数据类型，表示独一无二的值。

原文链接

一个变量可以存放两种类型的值，基本类型的值（primitive values）和引用类型的值（reference values）。

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

基本类型

JavaScript 中共有 6 种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol (new in ES 6) ！

约定：基本数据类型与原始数据类型等意。

基本数据类型的值是按值访问的。

基本类型的值是不可变的

var str = "123hello321";
str.toUpperCase();     // 123HELLO321
console.log(str);      // 123hello321

基本类型的比较是它们的值的比较

var a = 1;
var b = true;
console.log(a == b);    // true
console.log(a === b);   // false

上面 a 和 b 的数据类型不同，但是也可以进行值的比较，这是因为在比较之前，自动进行了数据类型的 隐式转换。

== : 只进行值的比较

=== : 不仅进行值得比较，还要进行数据类型的比较

基本类型的变量是存放在栈内存（Stack）里的

var a,b;
a = "zyj";
b = a;
console.log(a);   // zyj
console.log(b);   // zyj
a = "呵呵";       // 改变 a 的值，并不影响 b 的值
console.log(a);   // 呵呵
console.log(b);   // zyj

图解如下：栈内存中包括了变量的标识符和变量的值

引用类型

除过上面的 6 种基本数据类型外，剩下的就是引用类型了，统称为 Object 类型。细分的话，有：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型 等。

引用类型的值是按引用访问的。

引用类型的值是可变的

var obj = {name:"zyj"};   // 创建一个对象
obj.name = "percy";       // 改变 name 属性的值
obj.age = 21;             // 添加 age 属性
obj.giveMeAll = function(){
  return this.name + " : " + this.age;
};                        // 添加 giveMeAll 方法
obj.giveMeAll();

引用类型的比较是引用的比较

var obj1 = {};    // 新建一个空对象 obj1
var obj2 = {};    // 新建一个空对象 obj2
console.log(obj1 == obj2);    // false
console.log(obj1 === obj2);   // false

因为 obj1 和 obj2 分别引用的是存放在堆内存中的2个不同的对象，故变量 obj1 和 obj2 的值（引用地址）也是不一样的！

引用类型的值是保存在堆内存（Heap）中的对象（Object）
与其他编程语言不同，JavaScript 不能直接操作对象的内存空间（堆内存）。

var a = {name:"percy"};
var b;
b = a;
a.name = "zyj";
console.log(b.name);    // zyj
b.age = 22;
console.log(a.age);     // 22
var c = {
  name: "zyj",
  age: 22
};

图解如下：

栈内存中保存了变量标识符和指向堆内存中该对象的指针

堆内存中保存了对象的内容

检测类型

typeof：经常用来检测一个变量是不是最基本的数据类型

var a;
typeof a;    // undefined

a = null;
typeof a;    // object

a = true;
typeof a;    // boolean

a = 666;
typeof a;    // number 

a = "hello";
typeof a;    // string

a = Symbol();
typeof a;    // symbol

a = function(){}
typeof a;    // function

a = [];
typeof a;    // object
a = {};
typeof a;    // object
a = /aaa/g;
typeof a;    // object

instanceof：用来判断某个构造函数的 prototype 属性所指向的对象是否存在于另外一个要检测对象的原型链上

简单说就是判断一个引用类型的变量具体是不是某种类型的对象

({}) instanceof Object              // true
([]) instanceof Array               // true
(/aa/g) instanceof RegExp           // true
(function(){}) instanceof Function  // true

更详细的类型检测请看参考资料！

有错误的地方，欢迎大家指出来！

参考资料

【文章】[ JS 进阶 ] 基本类型引用类型简单赋值对象引用（推荐）

【Stack Overflow】Javascript by reference vs. by value

【文章】[[JS] 让人犯晕的JavaScript变量赋值](http://hellobug.github.io/blo...

【文章】如何检查JavaScript变量类型？（推荐）

【文章】Stack的三种含义

云服务器 GPU云服务器 javascript基本类型 javascript基本数据类型深入了解javascript 引用类型

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

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

【进阶1-3期】JavaScript深入之内存空间详细图解

摘要：进阶期理解中的执行上下文和执行栈进阶期深入之执行上下文栈和变量对象但是今天补充一个知识点某些情况下，调用堆栈中函数调用的数量超出了调用堆栈的实际大小，浏览器会抛出一个错误终止运行。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第3天。本计划一共28期，每期重点攻...

coordinate35 2019-08-23 13:47 评论0 收藏0
JavaScript数据类型----原始类型与引用类型（object）详谈

摘要：做个小小的延伸在这个栗子中，两个对象都有一条相同的值，但这两个对象却不相等，为什么呢因为两个对象分别引用的是存放在堆内存中的个不同的对象，故变量和的值引用地址也是不一样的。 JavaScript中，有七种内置类型：6种原始类型和引用类型，他们分别是： 6种原始类型（基本类型）：空值（null）未定义（undefined）布尔值（boolean）数字（number）字符串（s...

tomlingtm 2019-08-23 13:49 评论0 收藏0
深入理解 JavaScript中的变量、值、传参

摘要：所以说在中，也并不是一切都是对象原始类型值不可变原始类型的变量的值是不可变的，只能给变量赋予新的值。可以理解基本类型的变量的值，就是字面上写的数值。有四个变量图调用是传参，内层的会屏蔽外层的。图内层的的值被改变成的值被改变为。 showImg(https://segmentfault.com/img/bVbldfK); 1. demo 如果你对下面的代码没有任何疑问就能自信的回答出输出...

endiat 2019-08-23 14:07 评论0 收藏0
JavaScript的数据类型（四）

摘要：目录基本类型和引用类型检测数据类型的方法数据类型的转换通用库的初步创建与对象的深浅拷贝小结从前面三篇文章，我们已经大致了解的基本语法中的数据类型数值型字符串布尔型对象数组函数和这篇文章将深入探讨这几种数据类型在内存中的存储方式读取方式和拷贝目录 1. 基本类型和引用类型 2. 检测数据类型的方法 3. 数据类型的转换 4. 通用库的初步创建与对象的深浅拷贝 5. 小结从前面三篇文...

didikee 2019-08-21 11:22 评论0 收藏0
【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免

摘要：本期推荐文章类内存泄漏及如何避免，由于微信不能访问外链，点击阅读原文就可以啦。四种常见的内存泄漏划重点这是个考点意外的全局变量未定义的变量会在全局对象创建一个新变量，如下。因为老版本的是无法检测节点与代码之间的循环引用，会导致内存泄漏。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题...

red_bricks 2019-08-23 13:47 评论0 收藏0