JS 基础

精读
《看透JavaScript_原理_方法与实践》.pdf

Js是什么

• 面向对面的语言
• 脚本语言
• 事件驱动的语言

面向对象

• 网页中的大部分东西都是对象,
• 同时js中也有为了方便操作自身提供的对象
• 可以自定义对象,js中的函数也是一种对象,js的目标就是操作这些对象

脚本语言

脚本主要功能是操作不是创造,js只是修改一个页面,而且js不像c之类的语言有main函数,真正的入口函数main在浏览器程序里。
脚本语言是一堆命令的集合,一般会有个解释器,负责从头到尾所有语句的解释,然后根据解释后端语句进行操作。例如：给一个页面所有文本框添加监听函数，解释器会找到所有文本框，然后添加监听函数，这就叫解释执行。他是由解释器将内容翻译后根据其含义进行相关操作的，也就是操作是由解释器完成的，不是把脚本编译后来执行的
js是比较复杂的脚步语言，他和编译型语言一样，有自己的变量、函数，js执行过程和编译器一样首先生成语法树，然后解释器生成一条条中间码，最后一条条执行。
随着前端功能发展的越来越复杂，解释器进化成JavaScript引擎。

事件驱动

事件驱动指js引擎不是在看到代码之后马上执行,而是在合适的时间才去执行。
指当某个时间发生之后，相应的操作才会执行，这就是事件驱动。例如一个输入框的内容发生了变化， 这就是一个事件。
事件驱动包含三个关键内容：事件，事主和处理方法。

Js的三个内容

• js
  • ES
  • DOM
  • BOM

ECMAScript

2015 年 6 月份发布，正式名称是 ES2015 ，因为是第 6 版，所以也可以称为 ES6 。为了规范不同浏览器厂商对js脚本语法的实现。

DOM

DOM是document Object Model的缩写，表示文档对象模型，定义了文档对象的结构及其操作方法等内容。
ES 是一种面向对象的语言，它要操作的目标是对象，而 DOM 就是将 HTML 文档转换（或者称对应）成 ES 可以操作的对象的一种模型 。

BOM

JS 的功能并不仅限于对文档的操作，有时候还 需要对浏览器直接进行操作，例如，查 看当前页面的 URL 地址 、控制浏览器前进或后退，以及从 H TML5 中获取位 置信息和Web Socket 等都需要对浏览器进行操作，常用的alert 、 setTimeout 和 setlnterval 也需要浏览器来完成。
ES 对浏览器操作的处理方法和对文档操作的处理方法相同，依然是将浏览器转换为 一个对象，这就是浏览器对象（ Browser Object ），它所对应的模型称为浏览器对象模型 (Browser Object Mode, BOM ）

HTML5

HTML5 的主要贡献是扩展了 HTML 的标签（同时也去掉了 一些旧有的标签），例如，新增 section、article 、header 、footer 、audio 、video 以及备受关注的 canvas 标签，当然相应地扩展了 DOM 。 另外HTML5 也对 BOM 进行了扩展，使 JS 操作浏览器的功能更加强大，而且促进了BOM 的标准化 。

JS的结构

JS 的核心是对象，每个对象都可以包含0个或多个由名值对组成的属性。
!Drawing 2024-04-13 15.01.30.excalidraw
对象的属性有两种类型:基础类型(直接量)和对象类型.基础类型的属性不再包含属性,对象类型的属性还可以包含自己的属性,此时,该对象既是一个对象另一个对象的属性。
JS 中的对象又可以分为 function 和 object 两种类型（注意都是小写），这 一点非常重要 。
💡JS 中的 object 类型对象是使用 function 类型对象创建的。JS中经常使用的 String 、Array 和 Date 等对象其实 都是 function 类型的对象，就连Object 对象也是function类型的对象，而使用它们创建出来的对象就是object类型。可以使用typeof查看。

• typeof
  • number
    • Number
    • NaN
  • string
    • string
  • object
    • Object
    • null
    • Array
  • function
    • Function
  • undefined
    • Undefined
  • boolean
    • Boolean
  • symbol
    • Symbol

Js的内存模型

JS 的本质是一个对象，一个对象可以包含多个属性，对象的属性可以分为直接量和对象 两种类型，而对象又分为 object 对象和 function 对象两种类型。
直接量和对象两种类型的属性在内存中的保存方式不同 。 直接量是直接用两块内存分别保存属性名和属性值，而对象需要三块内存，分别保存属性名、属性地址和属性内容。
!Drawing 2024-04-13 15.41.18.excalidraw
对于对象类型的属性来说，属性名只是指向了保存对象的内存地址，而并不是指向实际的对象，从下面的例子就可以看出这一点 。

function F() { this.v = 1; }
var f = new F () ; 
var fl = f; 
console.log(fl.v);//输出 1
fl.v=2 ; 
console.log(f.v); //输出 2
f = null; 
console.log(fl.v); //输出 2

!Drawing 2024-04-13 23.18.15.excalidraw