关于javascript: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)，当前会一直的更新内容**