三、值类型与引用类型

tinysun1234 发布于2019-08-23 13:42 / 2823人阅读

摘要：它们的区别之一就是在计算机中的存储方式不同基本类型数据是将变量名及值存储在变量对象中，而引用类型的数据是将变量名和地址存储在变量对象中，真正的值是存储在堆内存中。

说点别的

这是《关于 JavaScript 你必须要知道的 33 个概念》系列的第三篇文章，今天稍微给大家介绍下这个系列。

如今前端的发展日新月异，很多人(包括我)都是追逐着一些流行的框架学习，但往往是浮于表面，知其然而不知其所以然。当我认真的想要搞懂 react、redux 实现原理时，才发现，JavaScript 的基础知识是如此重要。

一直以来，自己对于 JavaScript 的理解都散乱无章，这就造成很多知识当时看过后感觉明白了，过一段时间用到的时候却仍旧一脸懵逼。因此，我决定整理这样一个系列，加深自己对 JavaScript 的理解，形成知识体系，以达到融会贯通。

这个计划会写 33 篇文章，会包括 JavaScript 中的基础概念如「数据类型」、「表达式和语句」、「作用域」等，以及如「闭包」、「this」、「promise」等有些理解难度的知识点。

首先声明我不是什么大佬，对于很多知识也是一边钻研一边写，所以如果有不同的看法，恳请大家指正，我会及时更新文章的不足之处！

接下来，我们言归正传。

定义和分类

在上一篇文章（数据类型）中我们知道 JavaScript 的数据类型分为基本数据类型和对象数据类型。它们的区别之一就是在计算机中的存储方式不同：基本类型数据是将变量名及值存储在变量对象中，而引用类型的数据是将变量名和地址存储在变量对象中，真正的值是存储在堆内存中。

再次将那张图放过来：

其中，基本类型（number,string,boolean,undefined,null）,便称为值类型，而对象类型（object,function,array及封装对象）便称为引用类型。

值类型与引用类型的区别 1. 可变性与不可变性

值类型的数据是不可变的。 这里说的不可改变，是指值本身，一旦创建，便不可更改。什么意思？举个例子：

let a = 34;
a = 43;

我们先声明一个变量 a 并赋值为 34，此时，在变量对象中 34 就已经存放在固定位置，后边将 a 的值改为 43，看起来好像是将 34 改变成了 43，其实不然，我们只是又在变量对象中存入了 43，原来的 34，仍旧原封未动的存在那里，等待着被内存回收。如下图所示：

引用类型值是可以改变的。 引用类型的值是将变量名称和引用地址存储在变量对象中，而值是在堆内存中，我们可以随时更改它本身的值。

let b = {
    m: 1,
    n: "emmm"
}
b.m = 4;
b;   // {m: 4,n: "emmm"}

在上例中，我们声明 b 是一个引用类型值，接着，我们对 b 进行了更改，我们可以看到，更改是有效的。

2. 值的复制

值类型的复制是值本身的复制，引用类型的复制是值得引用的复制。 不同的复制方式会在复制后有不同的表现。

// 值类型的复制
var a = 45;
var b = a;
console.log(b); // 45
b = "someword";
console.log(b) // "someword"
console.log(a); // 45
// 引用类型的复制
var someone= {
  age: 14,
  weight: 134,
 sex: "man"
};
var anthor = someone;
console.log(anthor); // {age: 14, weight: 134, sex: "man"}
anthor.age = 16;
console.log(anthor); // {age: 16, weight: 134, sex: "man"}
console.log(someone); // {age: 16, weight: 134, sex: "man"}

从上面的代码中可以看到，变量 b 复制变量 a 的之后进行了更改，b 的值改变了，而 a 的值没变；变量 anthor 复制的是 someone 的引用，anthor 更改了引用指向的那个对象的值，someone 的值自然也跟着改变了。

具体过程如图所示：

应用

它们的概念理解起来很简单，但很多时候应用到实际场景中，我们就可能想不到这一层，会造成很多意外的问题，接下来我们看一下。

1. == 与 ===

在进行 == 及 === 判断时，前者会对等号两边的值进行强制类型转换，这对判断值类型的相等有所区别。但是对于引用类型，它们都只会判断引用地址是否相同，而不管对象里的属性值是否相同。

比如：

// 值类型相等
let a = 45;
let b  = 45;
console.log(a == b); //  true
b = "45";
console.log(a == b); // true
console.log(a === b); // false
// 引用类型相等
let men_1 = {
  age: 23,
  sex: "man",
};
let men_2 = {
  age: 23,
  sex: "man",
};

let men_3 = men_1;
console.log(men_1 == men_2); //  false
console.log(men_1 === men_2); //  false
console.log(men_1 == men_3); // true
console.log(men_1 === men_3); // true

从上面我们可以看到：45 === 45 但 45 != "45"，但 men_1 虽然和 men_2 的值相同，但他们并不相等，无论是 == 还是 ===。

那该如何按照我们的想法比较呢？

可以把它们转化为字符串进行比较，当然，这样也不能保证完全正确（比如对象中含有正则表达式），更严格的方法以后再讨论。

function compare(a, b) {
  return JSON.stringify(a) == JSON.stringify(b);
}

2. 函数传参

函数传参时，是将传入的参数拷贝到函数的参数参数变量上，因此，拷贝带来的问题在函数传参时仍旧存在。

function foo(a,b) {
  var d = a;
  d = "string";
  var e = b;
  e.name = "xiaohong";
}
var exmp_1 = 3;
var exmp_2 = {
  name: "xiaohua"
};
foo(exmp_1,exmp_2);
console.log(exmp_1); // 3
console.log(exmp_2); // {name: "xiaohong"}

如上所示，值类型传入后再函数内的修改不会污染外部的变量，而引用类型的变量由于复制的是引用，在函数内部的改动会影响到外部的变量。

若是想要避免这种情况，则需要在接受参数时进行深拷贝。

function foo(people) {
  const newPeople = JSON.parse(JSON.stringify(people));
  newPeople.firstName = "wang";
}
var Liu = {
   firstName: "liu"
}
foo(Liu);
console.log(Liu); // {firstName: "liu"}

一道小题

到此，关于值类型与引用类型的介绍就结束了，留一道题给大家，大家可以借此看一看对本文的理解。

function create(person) {
  var personA = person;
  personA.name = "David";
  var personB = {
      name: "saay",
      age: 13
  };
  return personB;
}
var Jone = {
  name: "Join",
  age: 25
}
var Wang = create(Jone);
console.log(Jone) ;// ??
console.log(Wang); // ??

GPU云服务器云服务器引用类型引用类型的变量 js引用数据类型 js引用类型的存储

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

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

33 个 js 核心概念（三）：值类型与引用类型

摘要：它们的区别之一就是在计算机中的存储方式不同基本类型数据是将变量名及值存储在变量对象中，而引用类型的数据是将变量名和地址存储在变量对象中，真正的值是存储在堆内存中。 showImg(https://segmentfault.com/img/remote/1460000017151449); 说点别的这是《关于 JavaScript 你必须要知道的 33 个概念》系列的第三篇文章，今天...

everfight 2019-08-23 13:57 评论0 收藏0
JavaScript的深浅拷贝

摘要：实际上，是禁止这样做的。传值和传址基本数据类型赋值基本数据类型的赋值是在内存中新开辟一段栈内存，然后再把再将值赋值到新的栈中。结果见输出，可以看出来，无论是修改赋值得到的对象和浅拷贝得到的都会改变原始数据。存储问题：深拷贝和浅拷贝的主要区别：在内存中的存储类型（堆和栈）不同堆：动态分配的内存，大小不定也不会自动释放栈：自动分配的内存，由系统自动释放数据类型：基本数据类型： jav...

zhjx922 2019-08-26 11:32 评论0 收藏0
浅拷贝与深拷贝

摘要：二浅拷贝与深拷贝深拷贝和浅拷贝是只针对和这样的引用数据类型的。浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。对于字符串数字及布尔值来说不是或者对象，会拷贝这些值到新的数组里。一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类型的特点：直...

hzc 2019-08-02 13:56 评论0 收藏0
浅拷贝与深拷贝

摘要：二浅拷贝与深拷贝深拷贝和浅拷贝是只针对和这样的引用数据类型的。浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。对于字符串数字及布尔值来说不是或者对象，会拷贝这些值到新的数组里。一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类型的特点：直...

史占广 2019-08-23 14:15 评论0 收藏0
面试官问你基本类型时他想知道什么

摘要：前言面试的时候我们经常会被问答的数据类型。大部分情况我们会这样回答包括基本类型值类型或者原始类型以及的引用类型等我曾经也是这样回答的，并且一直觉得没有什么问题。前言: 面试的时候我们经常会被问答js的数据类型。大部分情况我们会这样回答包括1、基本类型（值类型或者原始类型）： Number、Boolean、String、NULL、Undefined以及ES6的Symbol2、引用类型：...

AlienZHOU 2019-08-23 16:41 评论0 收藏0