JavaScript-变量、作用域与内存

简介: 变量、作用域与内存

相比于其他语言, JavaScript 中的变量可谓独树一帜。JavaScript 变量是松散类型的,而且变量不过就是特定时间点一个特定值的名称而已。由于没有规则定义变量必须包含什么数据类型,变量的值和数据类型在脚本生命期内可以改变。

1、原始值与引用值

ECMAScript 变量可以包含两种不同类型的数据:原始值和引用值。 原始值( primitive value)就是最简单的数据, 引用值( reference value)则是由多个值构成的对象

在把一个值赋给变量时, JavaScript 引擎必须确定这个值是原始值还是引用值。

6 种原始值: Undefined、 Null、 Boolean、 Number、 String 和 Symbol。保存原始值的变量是按值( by
value)访问的,因为我们操作的就是存储在变量中的实际值。

引用值是保存在内存中的对象。与其他语言不同, JavaScript 不允许直接访问内存位置,因此也就不能直接操作对象所在的内存空间。在操作对象时,实际上操作的是对该对象的引用( reference)而非实际的对象本身。为此,保存引用值的变量是按引用( by reference)访问的。

原始值和引用值的定义方式很类似,都是创建一个变量,然后给它赋一个值。

对于引用值而言,可以随时添加、修改和删除其属性和方法。

let person = new Object();
person.name = "Nicholas";
console.log(person.name); // "Nicholas"

原始值不能有属性,尽管尝试给原始值添加属性不会报错。

let name = "Nicholas";
name.age = 27;
console.log(name.age); // undefined

代码想给字符串 name 定义一个 age 属性并给该属性赋值 27。紧接着在下一行,属性不见了。

原始类型的初始化可以只使用原始字面量形式。如果使用的是 new 关键字,则 JavaScript 会创建一个 Object 类型的实例,但其行为类似原始值。

let name1 = "Nicholas";
name1.age = 27;
console.log(name1.age); // undefined
console.log(typeof name1); // string


let name2 = new String("Matt");
name2.age = 26;
console.log(name2.age); // 26
console.log(typeof name2); // object

除了存储方式不同,原始值和引用值在通过变量复制时也有所不同。在通过变量把一个原始值赋值到另一个变量时,原始值会被复制到新变量的位置

let num1 = 5;
let num2 = num1;

这里, num1 包含数值 5。当把 num2 初始化为 num1 时, num2 也会得到数值 5。这个值跟存储在num1 中的 5 是完全独立的,因为它是那个值的副本。

这两个变量可以独立使用,互不干扰。

Snipaste_2022-10-21_10-42-30.png

在把引用值从一个变量赋给另一个变量时,存储在变量中的值也会被复制到新变量所在的位置。区别在于,这里复制的值实际上是一个指针,它指向存储在堆内存中的对象。 操作完成后,两个变量实际上指向同一个对象,因此一个对象上面的变化会在另一个对象上反映出来。

这应该就是所谓的:牵一发而动全身。

let obj1 = new Object();
let obj2 = obj1;
obj1.name = "Nicholas";
console.log(obj2.name); // "Nicholas"

Snipaste_2022-10-21_10-48-58.png

ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中,就像从一个变量复制到另一个变量一样。如果是原始值,那么就跟原始值变量的复制一样,如果是引用值,那么就跟引用值变量的复制一样。

在按值传递参数时,值会被复制到一个局部变量(即一个命名参数,或者用 ECMAScript 的话说,就是arguments 对象中的一个槽位)。在按引用传递参数时,值在内存中的位置会被保存在一个局部变量,这意味着对本地变量的修改会反映到函数外部。

function addTen(num) {
    num += 10;
    return num;
}

let count = 20;
let result = addTen(count);
console.log(count); // 20,没有变化
console.log(result); // 30

函数 addTen()有一个参数 num,它其实是一个局部变量。在调用时,变量 count 作为参数传入。 count 的值是20,这个值被复制到参数 num 以便在 addTen()内部使用。在函数内部,参数 num的值被加上了 10,但这不会影响函数外部的原始变量 count。参数 num 和变量 count 互不干扰,它们只不过碰巧保存了一样的值。

function setName(obj) {
    obj.name = "Nicholas";
}

let person = new Object();
setName(person);
console.log(person.name); // "Nicholas"

创建了一个对象并把它保存在变量 person 中。然后,这个对象被传给 setName()方法,并被复制到参数 obj 中。在函数内部, obj 和 person 都指向同一个对象。结果就是,即使对象是按值传进函数的, obj 也会通过引用访问对象。当函数内部给 obj 设置了 name 属性时,函数外部的对象也会反映这个变化,因为 obj 指向的对象保存在全局作用域的堆内存上。

function setName(obj) {
    obj.name = "Nicholas";
    obj = new Object();
    obj.name = "Greg";
}

let person = new Object();
setName(person);
console.log(person.name); // "Nicholas"

将 obj 重新定义为一个有着不同 name的新对象。当 person 传入 setName()时,其 name 属性被设置为"Nicholas"。然后变量 obj 被设置为一个新对象且 name 属性被设置为"Greg"。

let s = "Nicholas";
let b = true;
let i = 22;
let u;
let n = null;
let o = new Object();

console.log(typeof s); // string
console.log(typeof i); // number
console.log(typeof b); // boolean
console.log(typeof u); // undefined
console.log(typeof n); // object
console.log(typeof o); // object

typeof 虽然对原始值很有用,但它对引用值的用处不大。

ECMAScript 提供了 instanceof 操作符,语法如下:

result = variable instanceof constructor 

如果变量是给定引用类型(的实例,则 instanceof 操作符返回 true。

console.log(person instanceof Object); // 变量 person 是 Object 吗?
console.log(colors instanceof Array); // 变量 colors 是 Array 吗?
console.log(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗?

所有引用值都是 Object 的实例,因此通过 instanceof 操作符检测任何引用值和Object 构造函数都会返回 true。类似地,如果用 instanceof 检测原始值,则始终会返回 false,因为原始值不是对象。

typeof 操作符在用于检测函数时也会返回"function"。

相关文章
|
3天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
4天前
|
前端开发 测试技术
测Nuxt.js入坑,配置dev、test、pro三种环境的变量env
先下载一个cross-env模块,比较好控制环境
20 5
|
1天前
|
存储 Java 程序员
【Python 的内存管理机制专栏】深入解析 Python 的内存管理机制:从变量到垃圾回收
【5月更文挑战第18天】Python内存管理关乎程序性能与稳定性,包括变量存储和垃圾回收。变量存储时,如`x = 10`,`x`指向内存中值的引用。垃圾回收通过引用计数自动回收无引用对象,防止内存泄漏。了解此机制可优化内存使用,避免循环引用等问题,提升程序效率和稳定性。深入学习内存管理对成为优秀Python程序员至关重要。
【Python 的内存管理机制专栏】深入解析 Python 的内存管理机制:从变量到垃圾回收
|
3天前
|
JavaScript 前端开发 算法
垃圾回收:JavaScript内存管理的利器
垃圾回收:JavaScript内存管理的利器
|
3天前
|
Web App开发 监控 前端开发
深入理解JavaScript内存泄漏:原因与解决方法
深入理解JavaScript内存泄漏:原因与解决方法
|
3天前
|
JavaScript 前端开发
JavaScript 作用域详解:如何影响变量生命周期
JavaScript 作用域详解:如何影响变量生命周期
|
4天前
|
缓存 自然语言处理 JavaScript
JavaScript内存泄漏导致应用性能下降,常见于闭包使用不当
【5月更文挑战第14天】JavaScript内存泄漏导致应用性能下降,常见于闭包使用不当。闭包能记住并访问词法作用域,若函数返回后,其引用的对象未被释放,就会引发泄漏。例如,`createLeakyFunction`创建的闭包保留了对大型对象`someLargeObject`的引用,即使函数执行完毕,对象也无法被垃圾回收。避免泄漏的方法包括及时解除引用、清除事件监听器、使用WeakMap和WeakSet以及定期清理缓存。使用性能分析工具可检测和修复内存泄漏问题。
14 3
|
4天前
|
存储 安全 Java
Python中的引用和赋值机制允许变量引用内存中的对象,并通过引用计数来管理对象的生命周期
【5月更文挑战第14天】Python中的变量是对象引用,不存储数据,而是在内存中创建对象。赋值操作创建新变量并使其指向已有对象。引用计数用于管理对象生命周期,引用数为0时对象被回收。理解这些机制对编写高效Python代码很重要。
18 6
|
4天前
|
JavaScript 前端开发
JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束
【5月更文挑战第13天】JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束。在游戏开发中,闭包常用于创建独立状态的角色实例。例如,`createCharacter`函数生成角色,内部函数(如`getHealth`、`setHealth`)形成闭包,保存角色的属性(如生命值)。这样,每个角色实例都有自己的变量副本,不互相影响,从而实现角色系统的独立性。
21 0
|
4天前
|
JavaScript 前端开发 算法
JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
【5月更文挑战第11天】JavaScript的垃圾回收机制通过标记-清除算法自动管理内存,免除开发者处理内存泄漏问题。它从根对象开始遍历,标记活动对象,未标记的对象被视为垃圾并释放内存。优化技术包括分代收集和增量收集,以提升性能。然而,开发者仍需谨慎处理全局变量、闭包、定时器和DOM引用,防止内存泄漏,保证程序稳定性和性能。
18 0