重学前端-JavaScript入门

411 阅读3分钟

对于非科班的JS初学者来说,在正式开始学习JS之前,了解一些基本计算机概念,给后续学习打下基础。

关键词:进程、线程、浏览器、JS引擎、原型。

一切都运行在电脑内存中

对于每一个在电脑中运行的程序,都有进程和线程之分。

开机过程:开机键-主板通电-读取固件(固定在主板上,里面有开机程序)-开机程序将操作系统加载到内存中运行;

进程:操作系统初始化后,会有进程产生,每个进程都有编号;

线程:比进程更小的单位,一个进程可以有多个线程。

如果把进程比作工厂里面的车间,那么线程就是流水线。

Macos中的进程

理解浏览器

Chrome的主进程和子进程

开启Chrome后,Chrome浏览器就作为主进程,主进程会顺带开启一些辅助进程(网络服务、GPU加速等等)。每新建一个网页,都有可能开启一个子进程。

浏览器的主要功能

  • 下载/解析HTML、CSS和JS,同时渲染界面;
  • 功能模块:用户界面、渲染引擎、JS引擎、存储等,这些模块一般处于不同的线程(比进程更小的单位)。

JS是单线程的

JS想要修改HTML和CSS,需要通过跨线程通信来通知渲染引擎修改,速度会比较慢。因此有一句话叫“DOM操作慢”,因为DOM是跨线程操作。

JS引擎

Chrome浏览器使用的是V8引擎,主要功能有:

  • 编译:把JS代码翻译成机器能高效执行的机器码或字节码;
  • 优化:改写代码,使其更高效;
  • 执行:执行上面的字节码或机器码;
  • 垃圾回收:把JS用完的内存回收,方便之后再次使用。

JS在刚出生的时候,有哪些东西?

至少有5个主要的对象,他们都挂载在 window 上:

  • console;
  • document;
  • Object(对象);
  • Array(数组);
  • Function(函数)。

JS原型

一个问题:

var obj = {}; 
obj.toString()

这段代码运行不报错,这是为什么?

  • obj有一个隐藏属性,这个隐藏属性存储了Object.prototype对象的地址;
  • obj.toString()发现obj上没有toString(),就去隐藏属性对应的对象里面寻找,于是找到了Object.prototype

obj隐藏属性里面的内容

简单的理解原型,就是xxx.prototype里面存储了xxx对象共有的属性,相当于每个对象都有一个“原型”,继承共有的属性。

原型的特点:

  • 无需重复声明共有的属性:把toString这样的共有属性提前声明到对象上面,不用自己重复再写很多遍了;
  • 每个对象都有一个隐藏属性,并指向原型(对象)。

如果没有隐藏属性,那么obj如何知道共有属性在哪?只需要通过__proto__就能知道。

__proto__prototype

  • 两个都存着原型的地址;
  • prototype挂在函数上,__proto__挂在每个新生成的对象上。

原型链