【JS红宝书学习笔记】第4章 变量、作用域和内存

第4章 变量、作用域和内存

1. 原始值和引用值(面试题)

ECMAScript 变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据(Undefined、Null、Boolean、Number、String 和 Symbol,其中之一),引用值(reference value)则是由多个值构成的对象(包括对象、数组、函数)。

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

即,在JavaScript中,我们可以分成两种类型:
基本数据类型 (6种):Number、String、Boolean、Null、 Undefined、Symbol(ES6),这些类型可以直接操作保存在变量中的实际值。
引用数据类型(1种):Object。

- 动态属性

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

javascript 复制代码
let name1 = "Nicholas";
let name2 = new String("Matt");
name1.age = 27;
name2.age = 26;
console.log(name1.age); // undefined
console.log(name2.age); // 26
console.log(typeof name1); // string
console.log(typeof name2); // object

- 复制值

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

javascript 复制代码
let num1 = 5;
let num2 = num1;

复制的值实际上是一个指针,它指向存储在堆内存中的对象。

javascript 复制代码
let obj1 = new Object();
let obj2 = obj1;
obj1.name = "Nicholas";
console.log(obj2.name); // "Nicholas"

变量 obj1 保存了一个新对象的实例。然后,这个值被复制到 obj2,此时两个变量都指向了同一个对象。在给 obj1 创建属性 name 并赋值后,通过 obj2 也可以访问这个属性,因为它们都指向同一个对象。图 4-2 展示了变量与堆内存中对象之间的关系。

- 传递参数

在按值传递参数时,局部变量的变化不会影响外部变量的值。

但是按引用传参,会改变外部变量的值

javascript 复制代码
function addTen(num) {
num += 10;
return num;
}
let count = 20;
let result = addTen(count);
console.log(count); // 20,没有变化
console.log(result); // 30

变量是对象,容易产生迷惑

javascript 复制代码
function setName(obj) {
	obj.name = "Nicholas";
}
let person = new Object();
setName(person);
console.log(person.name); // "Nicholas"

对象是按值传递的

javascript 复制代码
function setName(obj) {
	obj.name = "Nicholas";
	obj = new Object();
	obj.name = "Greg";
}
let person = new Object();
setName(person);
console.log(person.name); // "Nicholas"

函数的参数是局部变量

- 确定类型

typeof 是判断一个变量是否为字符串、数值、布尔值或 undefined 的最好方式。如果该变量是object或者null,都会返回object。typeof 虽然对原始值很有用,但它对引用值的用处不大。

javascript 复制代码
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

如果变量是给定引用类型(由其原型链决定,将在第 8 章详细介绍)的实例,则 instanceof 操作符返回 true。

javascript 复制代码
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,因为原始值不是对象。

☆☆☆一点总结:

  • JavaScript是弱类型语言,开始的时候并不知道变量是什么类型,必须通过存储的具体的值才能判断变量的类型。
    (1)数据类型不同,内存分配不同。
    简单类型的值存放在 中,在栈中存放的是对应的 。数据大小固定,占用空间小。按值存放,按值访问。
    引用类型对应的值存储在 中,在栈中存放的是指向堆内存的地址 。数据大小不固定。
    占据空间大。引用值的变量存储的是对实际对象的引用(内存地址),而不是对象本身。
    (2)由于内存分配不同,复制变量时结果不同。
    简单类型赋值,是生成相同的值,两个对象对应不同的地址。
    复杂类型赋值,是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象。
  • JS引用值有什么副作用:
    (1)原始值会受到影响:当多个变量引用同一个引用值时,修改其中一个变量的值会影响其他变量。这可能导致意外的行为,特别是在异步操作中。
javascript 复制代码
let obj1 = { name: "Alice" };
let obj2 = obj1;

obj2.name = "Bob";

console.log(obj1.name); // 输出 "Bob"

(2)对象共享:引用值的传递方式会导致对象在不同地方共享相同的引用,改动一个对象会影响到所有引用它的地方。

javascript 复制代码
let arr1 = [1, 2, 3];
let arr2 = arr1;

arr2.push(4);

console.log(arr1); // 输出 [1, 2, 3, 4]

(3)隐式副作用:某些函数或方法会通过修改引用值而产生隐式副作用,这可能导致代码的可预测性降低。

javascript 复制代码
let numbers = [1, 2, 3];

numbers.sort(); // 改变了原数组

console.log(numbers); // 输出 [1, 2, 3]

要避免引用值的副作用,可以使用深拷贝或者不可变对象来管理数据,以确保每个变量都有自己的副本,从而避免意外的行为和数据共享问题。

2. 执行上下文与作用域

  • 执行上下文分全局上下文、函数上下文和块级上下文。
  • 函数或块的局部上下文不仅可以访问自己作用域内的变量,而且也可以访问任何包含上下文乃至全局上下文中的变量。
  • 全局上下文只能访问全局上下文中的变量和函数,不能直接访问局部上下文中的任何数据。
  • 变量的执行上下文用于确定什么时候释放内存。

全局上下文是最外层的上下文。根据 ECMAScript 实现的宿主环境,表示全局上下文的对象可能不一样。在浏览器中,全局上下文就是我们常说的 window 对象。所有通过 var 定义的全局变量和函数都会成为 window 对象的属性和方法。

上下文在其所有代码都执行完毕后会被销毁,包括定义在它上面的所有变量和函数(全局上下文在应用程序退出前才会被销毁,比如关闭网页或退出浏览器)

javascript 复制代码
var color = "blue";
function changeColor() {
	if (color === "blue") {
		color = "red";
	} else {
		color = "blue";
	}
}
changeColor();  
console.log(color);  // red
javascript 复制代码
var color = "blue";
function changeColor() {
	let anotherColor = "white";
	function swapColors() {
		let tempColor = anotherColor;
		anotherColor = color;
		color = tempColor;
		// 这里可以访问 color、anotherColor 和 tempColor
	}
	// 这里可以访问 color 和 anotherColor,但访问不到 tempColor
	swapColors();
}
// 这里只能访问 color
changeColor();
console.log(color);  // white

- 作用域链增强

虽然执行上下文主要有全局上下文函数上下文 两种(eval()调用内部存在第三种上下文),但有其他方式来增强作用域链。某些语句会导致在作用域链前端临时添加一个上下文,这个上下文在代码执行后会被删除。通常在两种情况下会出现这个现象,即代码执行到下面任意一种情况时:

(1)try/catch 语句的 catch 块

(2)with 语句

这两种情况下,都会在作用域链前端添加一个变量对象。对 with 语句来说,会向作用域链前端添加指定的对象;对 catch 语句而言,则会创建一个新的变量对象,这个变量对象会包含要抛出的错误对象的声明。

javascript 复制代码
function buildUrl() {
	let qs = "?debug=true";
	with(location){
		let url = href + qs;
	}
	return url;
}

这里,with 语句将 location 对象作为上下文,因此 location 会被添加到作用域链前端。buildUrl()函数中定义了一个变量 qs。当 with 语句中的代码引用变量 href 时,实际上引用的是location.href,也就是自己变量对象的属性。在引用 qs 时,引用的则是定义在 buildUrl()中的那个变量,它定义在函数上下文的变量对象上。而在 with 语句中使用 var 声明的变量 url 会成为函数上下文的一部分,可以作为函数的值被返回;但像这里使用 let 声明的变量 url,因为被限制在块级作用域(稍后介绍),所以在 with 块之外没有定义。

- 变量声明

(1) 使用 var 的函数作用域声明

在使用 var 声明变量时,变量会被自动添加到最接近的上下文。在函数中,最接近的上下文就是函数的局部上下文。在 with 语句中,最接近的上下文也是函数上下文。如果变量未经声明就被初始化了,那么它就会自动被添加到全局上下文

javascript 复制代码
        function add(num1, num2) {
            var sum = num1 + num2;
            return sum;
        }
        let result = add(10, 20); // 30
        console.log(result); // 30
        console.log(sum); // 报错:sum 在这里不是有效变量

变量 sum 在函数外部是访问不到的。如果省略上面例子中的关键字 var,那么 sum 在 add()被调用之后就变成可以访问的了

javascript 复制代码
    function add(num1, num2) {
        sum = num1 + num2;
        return sum;
    }
    let result = add(10, 20); // 30
    console.log(sum); // 30

在调用 add()之后,sum被添加到了全局上下文,在函数退出之后依然存在,从而在后面可以访问到。

通过在声明之前打印变量,可以验证变量会被提升。声明的提升意味着会输出 undefined 而不是Reference Error:

javascript 复制代码
        console.log(sex); // undefined
        var sex = 'male';
        function f() {
            console.log(name); // undefined
            var name = 'Jake';
        }
        f();

(2) 使用 let 的块级作用域声明

ES6 新增的 let 关键字跟 var 很相似,其作用域是块级的(var作用域:函数作用域。块级作用域由最近的一对包含花括号{}界定。if 块、while 块、function 块,甚至连单独的块也是 let 声明变量的作用域。

javascript 复制代码
        if (true) {
            let a;
        }
        console.log(a); // ReferenceError: a 没有定义
        while (true) {
            let b;
        }
        console.log(b); // ReferenceError: b 没有定义
        function foo() {
            let c;
        }
        console.log(c); // ReferenceError: c 没有定义
        // 这没什么可奇怪的
        // var 声明也会导致报错
        // 这不是对象字面量,而是一个独立的块
        // JavaScript 解释器会根据其中内容识别出它来
        {
            let d;
        }
        console.log(d); // ReferenceError: d 没有定义

let 与 var 的另一个不同之处是在同一作用域内不能声明两次。重复的 var 声明会被忽略,而重复的 let 声明会抛出 SyntaxError。

javascript 复制代码
var a;
var a;
// 不会报错
{
	let b;
	let b;
}
// SyntaxError: 标识符 b 已经声明过了

let 的行为非常适合在循环中声明迭代变量。使用 var 声明的迭代变量会泄漏到循环外部,这种情况应该避免。

javascript 复制代码
        for (var i = 0; i < 10; ++i) { }
        console.log(i); // 10
        for (let j = 0; j < 10; ++j) { }
        console.log(j); // ReferenceError: j 没有定义

(3) 使用 const 的常量声明

使用 const 声明的变量必须同时初始化为某个值。一经声明,在其生命周期的任何时候都不能再重新赋予新值。

javascript 复制代码
const a; // SyntaxError: 常量声明时没有初始化
const b = 3;
console.log(b); // 3
b = 4; // TypeError: 给常量赋值

const 除了要遵循以上规则,其他方面与 let 声明是一样的。

const 声明只应用到顶级原语或者对象。换句话说,赋值为对象的 const 变量不能再被重新赋值为其他引用值,但对象的键则不受限制。

javascript 复制代码
const o1 = {};
o1 = {}; // TypeError: 给常量赋值
const o2 = {};
o2.name = 'Jake';
console.log(o2.name); // 'Jake'

如果想让整个对象都不能修改,可以使用 Object.freeze(),这样再给属性赋值时虽然不会报错,但会静默失败:

javascript 复制代码
const o3 = Object.freeze({});
o3.name = 'Jake';
console.log(o3.name); // undefined

(4) 标识符查找

局部上下文(找到该标识符则停止,找不到继续找)------全局上下文(找到该标识符则停止,找不到继续找)------未声明

javascript 复制代码
var color = 'blue';
function getColor() {
	return color;
}
console.log(getColor()); // 'blue'

调用函数 getColor()时会引用变量 color。为确定 color 的值会进行两步搜索。第一步,搜索 getColor()的变量对象,查找名为 color 的标识符。结果没找到,于是继续搜索下一个变量对象(来自全局上下文),然后就找到了名为 color 的标识符。因为全局变量对象上有 color的定义,所以搜索结束。

javascript 复制代码
var color = 'blue';
function getColor() {
	let color = 'red';
	return color;
}
console.log(getColor()); // 'red'

使用块级作用域声明并不会改变搜索流程,但可以给词法层级添加额外的层次:

javascript 复制代码
var color = 'blue';
function getColor() {
	let color = 'red';
	{
		let color = 'green';
		return color;
	}
}
console.log(getColor()); // 'green'

3. 垃圾回收

JavaScript 是使用垃圾回收的语言,也就是说执行环境负责在代码执行时管理内存。通过自动内存管理实现内存分配和闲置资源回收。基本思路很简单:确定哪个变量不会再使用,然后释放它占用的内存。这个过程是周期性的,即垃圾回收程序每隔一定时间(或者说在代码执行过程中某个预定的收集时间)就会自动运行。

离开作用域的值会被自动标记为可回收,然后在垃圾回收期间被删除。

- 标记清理(最常用)

主流的垃圾回收算法是标记清理,即先给当前不使用的值加上标记,再回来回收它们的内存。

- 引用计数

其思路是对每个值都记录它被引用的次数。声明变量并给它赋一个引用值时,这个值的引用数为 1。如果同一个值又被赋给另一个变量,那么引用数加 1。类似地,如果保存对该值引用的变量被其他值给覆盖了,那么引用数减 1。当一个值的引用数为 0 时,就说明没办法再访问到这个值了,因此可以安全地收回其内存了。垃圾回收程序下次运行的时候就会释放引用数为 0 的值的内存。
引用计数在代码中存在循环引用时会出现问题。

- 性能

垃圾回收程序会周期性运行,如果内存中分配了很多变量,则可能造成性能损失,因此垃圾回收的时间调度很重要。尤其是在内存有限的移动设备上,垃圾回收有可能会明显拖慢渲染的速度和帧速率。开发者不知道什么时候运行时会收集垃圾,因此最好的办法是在写代码时就要做到:无论什么时候开始收集垃圾,都能让它尽快结束工作。

- 内存管理

(1) 通过 const 和 let 声明提升性能

相比于使用 var,使用 let 和 const 可能会更早地让垃圾回收程序介入,尽早回收应该回收的内存。在块作用域比函数作用域更早终止的情况下,这就有可能发生。

(2) 隐藏类和删除操作

(3) 内存泄漏

意外声明全局变量是最常见但也最容易修复的内存泄漏问题。下面的代码没有使用任何关键字声明变量:

javascript 复制代码
function setName() {
	name = 'Jake';
}

此时,解释器会把变量 name 当作 window 的属性来创建(相当于 window.name = 'Jake')。

可想而知,在 window 对象上创建的属性,只要 window 本身不被清理就不会消失。这个问题很容易解决,只要在变量声明前头加上 var、let 或 const 关键字即可,这样变量就会在函数执行完毕后离开作用域。

定时器也可能会悄悄地导致内存泄漏。下面的代码中,定时器的回调通过闭包引用了外部变量:

javascript 复制代码
let name = 'Jake';
	setInterval(() => {
	console.log(name);
}, 100);

只要定时器一直运行,回调函数中引用的 name 就会一直占用内存。垃圾回收程序当然知道这一点,因而就不会清理外部变量。

使用 JavaScript 闭包很容易在不知不觉间造成内存泄漏。请看下面的例子:

javascript 复制代码
let outer = function() {
	let name = 'Jake';
	return function() {
		return name;
	};
};

调用 outer()会导致分配给 name 的内存被泄漏。以上代码执行后创建了一个内部闭包,只要返回的函数存在就不能清理 name,因为闭包一直在引用着它。假如 name 的内容很大(不止是一个小字符串),那可能就是个大问题了。

  • 静态分配与对象池
    压榨浏览器。一个关键问题就是如何减少浏览器执行垃圾回收的次数。理论上,如果能够合理使用分配的内存,同时避免多余的垃圾回收,那就可以保住因释放内存而损失的性能。
相关推荐
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
2401_858286113 小时前
L7.【LeetCode笔记】相交链表
笔记·leetcode·链表
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
Natural_yz4 小时前
大数据学习09之Hive基础
大数据·hive·学习
龙中舞王4 小时前
Unity学习笔记(2):场景绘制
笔记·学习·unity
Natural_yz4 小时前
大数据学习10之Hive高级
大数据·hive·学习
love_and_hope5 小时前
Pytorch学习--神经网络--完整的模型训练套路
人工智能·pytorch·python·深度学习·神经网络·学习