JavaScript变量详解：基本类型与引用类型的区别

基本类型与引用类型的定义

基本类型和引用类型的值

在ECMAScript中，变量主要包含两种数据类型的值：基本类型（Primitive Types）和引用类型（Reference Types）。

1. 基本类型指的是那些保存在栈内存中的简单数据段，具体包括Undefined、Null、Boolean、Number和String五种类型。
2. 引用类型则指那些保存在堆内存中的对象，它们由多个值构成，通常用于存储复杂数据结构。

动态属性处理差异

1. 动态属性

在定义变量值时，无论是基本类型还是引用类型，都可以创建一个变量并为其赋值。

在执行层面，两者对属性的处理能力存在显著差异：

1. 对于引用类型，开发者可以动态地添加、修改或删除对象的属性及方法。
2. 对于基本类型，则无法动态添加、删除属性或方法。

例如，若变量a为引用类型，则可以为其添加name和age等属性。

var a = new Object();
a.name = "我喂前端袋盐";
a.age = 24;
console.log(a.name);   //我喂前端袋盐

若变量name为基本类型，则无法为其添加age属性，尝试操作将无效。

var name = "我喂前端袋盐";
name.age = 24;
console.log(name.age);   //undefined

从代码表现可知：只有引用类型值支持动态添加属性，以便在后续逻辑中使用。

变量赋值与内存复制机制

2. 赋值变量值

当一个变量向另一个变量复制值时，基本类型和引用类型的处理机制截然不同： 对于基本类型：系统会在变量对象上创建一个新值，并将该值复制到新变量分配的空间中。这意味着两个变量完全独立，互不影响。 例如：

var a = 111;
 var b = a;
 console.log(b);   //111

从代码执行结果可知：变量b的值仅是变量a值的一个副本，两者存储的值111完全独立，修改其中一个不会影响另一个。 对于引用类型：系统会将存储在变量对象中的值（即指向堆内存中对象的指针）复制一份，放入新变量分配的空间中。这意味着两个变量引用的是同一个对象。 引用类型的值的副本实际上是一个指针，指向存储在堆内存中的同一个对象。

var obj1 = new Object;
var obj2 = obj1;
obj1.name = "我喂前端袋盐";
console.log(obj2,name);   // Object { name="我喂前端袋盐"} 我喂前端袋盐

从代码执行结果可知：obj1和obj2都指向内存中的同一个Object实例；因此，通过obj1添加的name属性，也可以通过obj2访问到。

函数参数传递机制

3. 传递参数

在JavaScript中，基本类型的值是按值访问的，因为可以直接访问保存在变量中的实际数据。

所有函数的参数传递均按值进行。 对于基本类型：参数传递过程类似于基本类型变量的复制。当向函数传递值时，该值会被复制给一个局部变量（命名参数）。因此，函数内部对局部变量的修改不会反映到函数外部的原始变量。 例如：

function fn(num) {
 num += 10;
 return num;
}
var a = 10;
var result = fn(a);
console.log(result); //20
console.log(a);  //10

从代码执行结果可知：参数num和外部变量a互不影响，它们仅拥有相同的初始值。函数执行完毕后，外部变量a保持原值，内部num的变化不影响外部。 对于引用类型：参数传递过程类似于引用类型变量的复制。当向函数传递值时，该值在内存中的地址（指针）会被复制给一个局部变量。因此，函数内部通过局部变量对对象属性的修改，会反映到函数外部的原始对象。 例如：

function fn(obj) {
 obj.name = '我喂前端袋盐';
}
var person = new Object();
fn(person);
console.log(person.name);  //我喂前端袋盐

从代码执行结果可知：在函数内部，参数obj和外部变量person引用的是内存中的同一个Object实例。因此，对obj属性的修改会直接体现在person上，表现为“你动我也动”。 也就是说：即使变量person是按值传递的（传递的是指针的副本），但是参数obj（作为局部变量）仍然通过该指针按引用访问同一个对象。 需要注意的是：访问变量有按值和按引用两种方式，但函数参数只能按值传递。

数据类型检测方法

4. 检测类型

检测数据类型时，基本类型通常使用typeof运算符，而引用类型（包括null）通常使用instanceof运算符。 例如：

var a = 'Wo Wei Qian Duan Dai Yan';
var b = 24;
var c = '';
var d = true;
var e;
var g = undefined;
var f = null; // 比较特殊
var h = new Object();
 
console.log(typeof a); //string
console.log(typeof b); //number 
console.log(typeof c); //string
console.log(typeof d); //boolean
console.log(typeof e); //undefined
console.log(typeof g); //undefined
console.log(typeof f); //object
console.log(typeof h); //object

所有引用类型的值在JavaScript中都是Object的实例。 如下验证：

var person = new Object();
var num = [1,2, 3];
var pattern = /.at/i;
console.log(person instanceof Object); //true
console.log(num instanceof Object); //true
console.log(num instanceof Array);  //true
console.log(pattern instanceof Object); //true
console.log(pattern instanceof RegExp); //true

以上所述是小编给大家介绍的JavaScript变量详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！