一道前端赋值题，看看你会吗？？

题目：

var obj = {
    name: '老王',
    fn: (function(x) {
        return x + '前端';
    })(obj.name)
};
console.log(obj.fn);

• 简单吗，就一个赋值执行操作。
• 一个基础的 Object 对象。内部两个key，一个是 name，另一个是 fn。特殊点 fn 是 自执行函数，形参为 obj.name。返回是 => x + string。
• 能给出来答案吗？
  • undefined ?
  • 老王前端 ？
  • ....
• 是不是上面的答案呢？ --- 恭喜你~ 回答错误！！！
• 最终答案： Cannot read properties of undefined (reading 'name')

为滴啥哦？

来看看前端的JS赋值过程吧

我们在现在的项目中，不管使用框架 vue、react，还是纯原生，赋值变量、函数必不可少。赋值中分 基础类型赋值 和 引用类型赋值 两种。

基础数据类型赋值

var num = 123;

在赋值过程中，一直都是先创建值，然后再进行创建变量。

• 第一步，创建一个值
  • 123 本身是基本类型值，我们知道，基本类型是直接放到 栈中 的。
• 第二步，创建一个变量
  • 我们这里的变量是 num。也是在栈中的
• 第三步，等号指向
  • 等号会转为指针，由变量名指向值。这个就是从 num 指向 123。将两者关联起来。

引用数据类型赋值

var obj = {
    name: '老王'
}

• 第一步，创建值
  • 由于是 引用类型值，会创建一个堆内存。任何开辟的内存都有一个十六进制的地址。
  • 把键值对存储在堆内存中
  • 系统会将堆内存地址放到 栈中。
• 第二步，创建变量
  • 将 obj 这个变量放到栈中。
• 第三步，等号指向
  • 在基本类型中，指针会直接指向对应的值。引用类型里，是指向了这个堆的地址。

注意：

1. 任何一个变量，只能指向一个值。
2. 当进行再次赋值时候，指针会重复指向，将原来的值进行释放。最后该值是进行垃圾回收，还是又被别的指针指向，需要看后续的代码逻辑。

回归本题

根据上面所写：

第一步，创建一个值。会开辟一个堆。

第二步，将键值对放到堆中。其中fn 为自执行函数，需要把 obj.name 作为实参传进去吧。那么 obj 现在创建了吗？没有创建吧。

此时的 obj 是什么？ undefined，那么undefined 有 name吗？

所以会报错： Cannot read properties of undefined (reading 'name')

写在最后

在本题中，有 堆栈内存，他们有什么区别呢？ 代码写入后会进行执行，那么是在哪里执行的呢？有兴趣可以了解一下。

再问个问题，如果将 var 转为 const 会有什么呢？ 为啥嘞。