20. 内存图与JS世界（精品课）

20. 内存图与JS世界（精品课）

进程与线程

JS 引擎

JS引擎

JS引擎举例

Chrome用的是V8引擎，C++编写

网景用的是SpiderMonkey，后被Firefox使用，C++

Safari用的是JavaScriptCore

IE用的是Chakra（JScript9）

Edge用的是Chakra（JavaScript）

Node.js用的是V8引擎

主要功能

编译：把JS代码翻译为机器能执行的字节码或机器码

优化：改写代码，使其更高效

执行：执行上面的字节码或者机器码

垃圾回收：把JS用完的内存回收，方便之后再次使用

瓜分内存

执行JS代码

准备工作

浏览器提供API：window/document/setTimeout

没错，上面这些东西都不是JS自身具备的功能

我们将这些功能称为运行环境runtime env

一旦把JS放进页面，就开始执行JS

JS代码在哪里运行？-内存

以下是内存图

Screen Shot 2021-11-23 at 9.44.11 PM

红色区域 作用

红色专门用来存放数据。

红色区域并不存变量名，变量名在“不知什么区”

每种浏览器的分配规则并不一样

上图的区域并不完整

Stack和Heap

红色区域分为Stack和Heap堆

Stack区特点： 每个数据顺序存放

Heap区特点：每个数据随机存放

规律

数据分为两种：非对象和对象

非对象都存在Stack

对象都存在Heap

=号总是会把右边的东西复制到右边（不存在传值和传址）

var person = {name: 'frank'}
var person2 = person
person2.name = 'ryan'
console.log(person.name)//'ryan'

JS入门三座大山之原型

window

浏览器打开之后会有window，window下面挂载了以下，

window.console
window.document
window.Object//对象
window.Array//数组
window.Function//函数

以下是几种等价写法

var person = {} 等价于 var person = new Object()

var a = [1,2,3] 等价于 var a = new Array(1,2,3)

function f(){}等价于var f = new Function()

问：如果已经有了前者的写法为什么还要提供后者呢？

答：因为后者是正规写法，但是没人用。前者不正规，但是好用啊。

问：为什么所有东西都挂在window上？

答：因为方便，挂在window上的东西可以在任何地方直接用,比如下面的xxx挂到window上后就可以直接使用。

window.xxx
>undefined
window.xxx = function(){}
>ƒ (){}
xxx
>ƒ (){}

console.dir()可以打印内存结构

如果第一个字母大写，就会有phototype属性，比如Object,Array

细节

关于window

window变量（放在stack）和window对象（放在heap）是两个东西

window变量是一个容器，存放window对象的地址

window对象是heap里的一坨数据

如果让var x = window,那么这个x就指向了window对象，window变量可以去死了。

新手容易弄晕，不要这样写。

在jQuery中可以这样写，比入下面，用$指向jQuery，因为这样好写

window.jQuery = function(){}
var $ = jQuery
$()

同理：

console（window.console，console这里是属性） 和console对象不是同一个东西

Object和Object函数对象不是同一个东西

前者是内存地址，后者是一坨内存

JavaScript的三座大山

this

原型

AJAX

JS世界

原型链prototype

window.Object.prototype

window.Array.prototype

.prototype是个很大的对象

问题：为什么不报错？为什么可以运行？obj是空的对象。

var obj = {}
obj.toSting()

回答：

obj有一个隐藏属性

隐藏属性存储了Object.prototype对象的地址

obj.toString()发现obj上没有toString

就去隐藏属性对应的对象里面找

于是就找到了Object.prototype

obj.toString === window.Object.prototype.toSting
//true

window.Array.prototype//里面有concat这些函数可以用

JavaScript在开天辟地的时候，已经在内存中创造好了.Array,.Object，在开发者使用array，object这些时就可以直接调用。

提问：如果我改了obj1.toString，那么obj2.toString是不是也改了

var obj1 = {}
undefined
var obj2 ={}
undefined
obj1.toString = 'hi'
'hi'
obj2.toString()
'[object Object]'

回答：

以下这段代码可以成功修改a.name，因为只有一层，上面提问的代码有两层，所以改不了。需要画内存图。

a = {name:'f'}
b = a
b.name = 'J'
a.name = ?//'J'

Screen Shot 2021-11-27 at 4.00.59 PM

问题：obj和obj2有什么联系

var obj2 = {}
obj2.toString()

相同点

都可以调用.toString()

不同点

地址不同obj!==obj2

地址拥有不同的属性，反过来说是什么意思呢？

xxx.prototype储存了xxx对象的共同属性，这就是原型

如果没有原型，你会累死

原型让你无需重复声明共有属性（省代码，省内存）

每个对象都有一个隐藏属性-指向原型（对象）

如果在开发者工具里面打印对象，会发现每个对象都有一个隐藏属性,_proto_

问题：prototype和_proto_区别是什么?

回答:都存着原型的地址，只不过prototype挂在函数上，__proto__挂在每个新生成的对象上

犀利提问

var a = [1,2,3]
var b = a
b.push = 'new'
a.push