1.操作系统常识

1.1.一切都在运行内存里

1.1.1.开机

image.png

1.1.2.操作系统

image.png

Q1:什么是shell

shell — Shell俗称壳(用来区别于核),是指“为使用者提供操作界面”的软件(命令解析器)。

1.2.打开浏览器

image.png

注:

  • 同一个域名,有可能会合并成一个进程

    输入地址栏发生的过程就是:

  • 从发起请求到执行JS的这个过程

    Q2:渲染引擎和JS引擎分开的,是不是意味着JS不能渲染?

    A2:JS 要渲染就是要跨线程通信,不能自己渲染,要用渲染引擎

    1.3.JS 引擎

    JS 只能单线程执行
    image.png
    JS 引擎工作方式

    1.3.1.执行 JS 代码

    image.png

    2.内存图

    2.1.瓜分内存

    image.png

    2.2.红色区域

    image.png

    注:

    一个区太低效,如果 stack 里某一个数据要加东西,相当于后面所有都得往后挪

    顺序存放和随机存放

    image.png

    2.2.1.Stack和Heap举例

    image.png

    上面代码的内存图

    image.png

    篡改对象

    image.png
    因为 person 和 person2 都保存了同一个对象的地址,所以修改 person2.name 会影响 person.name

    3.JS 世界

    3.1.JS需要什么

  • window—浏览器提供

image.png

3.1.1.为什么都挂在 window 上

image.png
挂到 window 上,(如 window.console)就可以前面不加 window. 直接写后面的 console 即可

3.1.2.window 用内存图表示(实际内存图)

image.png

3.1.3.更简单的画法(抽象,便于理解)

image.png

3.1.4.只内存的时候需要用到的代码

  1. console.dir(window.Object) //打出 window.Object 的结构

image.png

细节

image.png

*3.2.原型链(prototype)

  1. console.dir(window.Object.prototype) //打出来看看

打出来显示如下:
image.png
直观来看就是一堆对象,毫无用处

3.2.1.问1

image.png
问2:
image.png
上面两个问题解释的图(一个道理):
image.png

证明:

对象
image.png
数组
image.png

3.2.2.内存图里隔一层可以篡改,两层不能篡改

image.png

  • 一层可以篡改,两层不能篡改
  • 没有简单的办法来篡改,除非通过隐藏属性篡改

image.png

3.2.3.共有属性(原型)

image.png

原型的好处:无需重复声明共有属性—省代码,省内存

image.png

每个对象都有自己的隐藏属性—指向原型(对象)

  • 这个隐藏属性叫proto(只关心首字母小写的)

image.png

prototype(关心首字母大写的)和proto区别是什么

image.png

4.最后的一个问题(重新画一遍JS世界)

问:
image.png
答:
image.png


资料来源:饥人谷