console.log 打印引用类型变量问题

最新推荐文章于 2022-11-17 23:57:08 发布

小扣柴扉久

最新推荐文章于 2022-11-17 23:57:08 发布

阅读量1.9k

点赞数 3

文章标签： javascript es6 vue.js js nodejs

本文链接：https://blog.csdn.net/weixin_39799079/article/details/117788940

版权

console.log 打印引用类型变量问题

一、现象

1. 在浏览器环境中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var student = {}
        console.log(student)
        student.name = "zhangsan"
    </script>
</body>
</html>

运行结果如下：

2. 在 node 环境中

var student = {}
console.log(student)
student.name = "zhangsan"

二、原因

console.log 函数在浏览器中输出的是变量引用地址的内存快照，只简单输出变量的类型，如下图：

当点击左侧这个小箭头时，浏览器会根据当前引用类型变量的内存地址去读取变量的值。
实际上，这与 javascript 的事件队列是有关系的，console.log 函数只有当本次宏任务执行完成，才会去读取参数的值。
为了证实这个结论，我在浏览器中做了如下测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var student = {}
        console.log(student)
        setTimeout(()=> student.name = "lisi",5000)
    </script>
</body>
</html>

1. 测试现象

在代码运行 5s 以内点击左侧的小箭头，展开对象信息，显示如下图：

在这里插入图片描述

等待 5s 后再点开，仍与上图保持一致。

当 5s 后，点击左侧的小箭头，展开对象信息的话，显示如下图：

在这里插入图片描述

三、解决办法

在 console.log 调用的下一行，使用 debugger，阻塞后续代码执行。
将引用类型的变量转变成值类型，然后再调用 console.log 输出。比如对象可以使用 JSON.stringify 等。

小扣柴扉久

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
console.log 打印引用类型变量问题

console.log 打印引用类型变量问题一、现象1. 在浏览器环境中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
复制链接

扫一扫