JS运行机制

JS 是怎样分析代码的，运行的机制是什么？

回答这个问题前先看两个示例

// 基本类型
    let name = 'LinYY'
    let name2 = name
    console.log(name2)  // LinYY
    name2 = '林一一'
    console.log(name2)  // 林一一
    console.log(name)  // LinYY
// 引用类型
    let obj = {name: 'LinYY'}
    let obj2 = obj
    console.log(obj2.name) // LinYY
    obj2.name = '林一一'
    console.log(obj.name)   // 林一一

问上面的结果为什么是这样？这涉及到 JS 的运行机制

1. 当浏览器（内核/引擎）渲染和解析 JS 代码时，会提供一个运行环境，这个环境称为全局作用域（global scope）
2. JS 代码自上而下运行。

• 当遇到基本类型时，数据值会存储在当前作用域下，直接在当前作用域（栈内存）内开辟空间存储值，比如 var age = 18，(1)浏览器会在当前作用域内开辟一个存储空间18，(2)然后在作用域内声明一个变量 age。(3)最后将 18 赋值给变量 age做 = 关联，这个操作过程叫做定义。
• 当遇到引用类型时，因为存储的内容可能过于复杂，需要在栈内存之外的堆内存中开辟空间存储内容再把这个堆内存的空间地址给要赋值的变量。比如上面的 let obj = {name: 'LinYY'}，（1）先有一个内存空间存储对象的键和值，这空间有一个16进制的地址（2）在全局作用域栈内存中声明变量 obj（3）obj 再和16进制空间地址做 = 关联，也就是将16进制空间地址赋值给变量。

划重点：特别需要注意的一点：浏览器判断类型是引用类型还是基本类型是根据 = 右边的值来判断的，引用类型就会开辟一个新的堆内存，基本类型就是新开辟一个栈内存。和是否有 var let const 声明变量无关

解答：

基本类型也叫做值类型，是按照值来操作：按值操作的意思是将值复制一份，放在了新的存储空间，和原来的值就没有关系了。所以上面的 name2 最后值改边成了 '林一一'，也不会影响 name
引用类型不是按值操作，是按空间引用地址来操作：同样将空间引用地址复制一份给新的对象，但是存储的空间没有被复制，也就是说新的对象和旧的对象指向的存储空间都是同一个，所以新对象操作行为会对旧对象有影响，obj2 影响 obj。

栈内存 : 存储全局作用域，是JS 代码执行的环境，所有基本类型值都会在栈内存中开辟一个位置进行存储。

堆内存: 存储引用类型中的值，对象是键值对，函数是字符串。

    参考：高程4 83页。

面试题

结合 JS 运行机制解答下面的题目

题目一，下面代码输出的结果是什么，原因？

    let obj = {
        a: 12,
        b: obj.a * 10
    }
    console.log(obj.b)

输出：TypeError: Cannot read property 'a' of undefined，不知道你对了么，为什么 a 成了 undefined的属性 property。

解析：我们再来理一遍 JS 的运行机制

• 当浏览器渲染和解析 JS 代码时，会提供一个全局作用域(栈内存)。

• 代码自上而下执行

  1. 遇到引用类型需要在堆内存开辟一个存储空间，将键值对放在存储空间

     • a = 12
     • b = obj.a * 10 ，也就是这里出现了问题，在此之前 obj 还没有被定义更不在堆内存中，那么 obj 就是 undefined，undefined(基本类型)下根本没有属性 a。所以出现读取不到 undefined.a 的值 Cannot read property 'a' of undefined

题目二，下面代码输出的结果是什么，原因？

var ary = [1, 3]
var ary1 = ary
ary1[0] = 2
ary1 = [5, 6]
ary1[1] = 0
ary[0] = 7
console.log('ary:'+ary,'ary1:'+ary1)

输出：ary:7,3 ary1:5,0，你对了么？

解析

JS 运行流程原理图

原理图没看懂的，请再看一遍 JS 运行机制，下面也有解析。

图解解析：再来理一遍 JS 的运行机制

• 当浏览器渲染和解析 JS 代码时，会提供一个全局作用域(栈内存)。

• 代码自上而下执行

  1. 遇到引用类型需要在堆内存开辟一个存储空间，将键值对放在存储空间

     • 0: 1, 1: 3 // 0, 1是数组下标 index，1，3是数组值
  2. 栈内存中定义一个变量 arr
  3. 堆内存地址值给 arr。上图假设16进制地址值是 AAAFFF123，那么 arr1和arr地址值现在都是AAAFFF123。
  4. ary1[0] = 2，改变地址值是 AAAFFF123中的1为2。
  5. ary1 = [5, 6]，到这里是重点，[5, 6]是一个新的引用类型，那么就需要在开辟一个新的堆内存，假设堆内存地址是AAAFFF223，所以到这里为止 arr 和 arr1就是两个完全不同的对象了。

所以最后输出的结果就明显了

感谢读完这篇文章，希望对你有一点点帮助，我是林一一，下次见

掘金地址

博客地址 体验效果更好。**

源码地址 欢迎start (issue)，以后会不断的更新内容**