JS高级-运行原理
初始化全局对象
js引擎会在执行代码之前，会在堆内存中创建一个全局对象：Global Object（GO）
该对象 所有的作用域（scope）都可以访问；
里面会包含Date、Array、String、Number、setTimeout、setInterval等等；
其中还有一个window属性指向自己；
执行上下文
js引擎内部有一个执行上下文栈（简称ECS），它是用于执行代码的调用栈。
那么现在它要执行谁呢？执行的是全局的代码块：
全局的代码块为了执行会构建一个 Global Execution Context（GEC）；
GEC会 被放入到ECS中 执行；
GEC被放入到ECS中里面包含两部分内容：
第一部分：在代码执行前，在parser转成AST的过程中，会将全局定义的变量、函数等加入到GlobalObject中，但是并不会 赋值；
这个过程也称之为变量的作用域提升
第二部分：在代码执行中，对变量赋值，或者执行其他的函数；
认识VO对象
每一个执行上下文会关联一个VO（Variable Object，变量对象），变量和函数声明会被添加到这个VO对象中。
当全 ...
JS高级-函数this指向
this到底指向什么呢？
我们先来看一个让人困惑的问题：
定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果
这个的案例可以给我们什么样的启示呢？
1.函数在调用时，JavaScript会默认给this绑定一个值；
2.this的绑定和定义的位置（编写的位置）没有关系；
3.this的绑定和调用方式以及调用的位置有关系；
4.this是在运行时被绑定的；
那么this到底是怎么样的绑定规则呢？一起来学习一下吧
绑定一：默认绑定；
绑定二：隐式绑定；
绑定三：显示绑定；
绑定四：new绑定；
规则一：默认绑定
什么情况下使用默认绑定呢？独立函数调用。
独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；
我们通过几个案例来看一下，常见的默认绑定
12345678910111213141516171819202122232425262728// 定义函数 // 1.普通的函数被独立的调用 function foo () { console.log("foo:", this) } ...
JS基础-BOM操作
认识BOM
BOM：浏览器对象模型
简称 BOM，由浏览器提供的用于处理文档之外的所有内容的其他对象；
比如navigator、location、history等对象；
JavaScript有一个非常重要的运行环境就是浏览器
而且浏览器本身又作为一个应用程序需要对其本身进行操作；
所以通常浏览器会有对应的对象模型
我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁
BOM主要包括一下的对象模型
window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
location：浏览器连接到的对象的位置（URL）；
history：操作浏览器的历史；
navigator：用户代理（浏览器）的状态和标识（很少用到）；
screen：屏幕窗口信息（很少用到）；
window对象
window对象在浏览器中可以从两个视角来看待：
视角一：全局对象。
我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global；
在浏览器中就是window对象；
视角二：浏览器窗口对象。
作为浏览器窗口时，提供了对浏览器操作的相关的API；
...
JS基础-DOM实战
window定时器方法
有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用”。
目前有两种方式可以实现：
setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
并且通常情况下有提供对应的取消方法：
clearTimeout：取消setTimeout的定时器；
clearInterval：取消setInterval的定时器；
大多数运行环境都有内置的调度程序，并且提供了这些方法：
目前来讲，所有浏览器以及 Node.js 都支持这两个方法；
所以我们后续学习Node的时候，也可以在Node中使用它们；
setTimeout的使用
setTimeout的语法如下：
func|code：想要执行的函数或代码字符串。
一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；
delay：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
arg1，arg2…：要传 ...
JS基础-事件处理
常见的事件列表
鼠标事件：
click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。
mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。
mousemove —— 当鼠标移动时。
键盘事件：
keydown 和 keyup —— 当按下和松开一个按键时。
表单（form）元素事件：
submit —— 当访问者提交了一个 时。
focus —— 当访问者聚焦于一个元素时，例如聚焦于一个 。
Document 事件：
DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。
CSS 事件：
transitionend —— 当一个 CSS 动画完成时。
认识事件流
事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢？
我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；
这是因为我们的HTML元素是存在父子元素叠加层级的 ...
JS基础DOM操作
document对象
Document节点表示的整个载入的网页，它的实例是全局的document对象：
对DOM的所有操作都是从 document 对象开始的；
它是DOM的 入口点，可以从document开始去访问任何节点元素；
对于最顶层的html、head、body元素，我们可以直接在document对象中获取到：
html元素： = document.documentElement
body元素： = document.body
head元素： = document.head
文档声明： = document.doctype
节点之间的导航
**如果我们获取到一个节点后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航。 **
节点之间存在如下的关系：
父节点：parentNode
前兄弟节点：previousSibling
后兄弟节点：nextSibling
子节点：childNodes
第一个子节点：firstChild
第二个子节点：lastChild
1234567891011121314151617 ...
JS基础-常见内置类
Number类
前面我们已经学习了Number类型，它有一个对应的数字包装类型Number，我们来对它的方法做一些补充。
Number属性补充：
Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)；
Number.MIN_SAFE_INTEGER：JavaScript 中最小的安全整数 -(2^53 - 1)
Number实例方法补充：
方法一：toString(base)，将数字转成字符串，并且按照base进制进行转化
base 的范围可以从 2 到 36，默认情况下是 10；
注意：如果是直接对一个数字操作，需要使用..运算符；
console.log(123..toString(2)) –》 输出123的二进制表示
方法二：toFixed(digits)，格式化一个数字，保留digits位的小数；
digits的范围是0到20（包含）之间；
1234567891011 var num = 1000console.log(num.toString(), typeof num.toString())co ...
JS基础-函数
arguments参数
事实上在函数有一个特别的对象：arguments对象
默认情况下，arguments对象是所有（非箭头）函数中都可用的局部变量；
该对象中存放着所有的调用者传入的参数，从0位置开始，依次存放；
arguments变量的类型是一个object类型（ array-like ），不是一个数组，但是和数组的用法看起来很相似；
如果调用者传入的参数多余函数接收的参数，可以通过arguments去获取所有的参数；
回调函数
既然函数可以作为一个值相互赋值，那么也可以传递给另外一个函数。
foo这种函数我们也可以称之为高阶函数；
高阶函数必须至少满足两个条件之一：
接受一个或多个函数作为输入；
输出一个函数；
匿名函数的理解：
如果在传入一个函数时，我们没有指定这个函数的名词或者通过函数表达式指定函数对应的变量，那么这个函数称之为匿名 函数。
1.函数回调的概念理解
123456789// 1.函数回调的概念理解function foo(fn) { // 通过fn去调用bar函数的过程, 称之为函数的回调 fn()}function b ...
JS基础_变量和数据类型
VSCode插件和配置输入clg即可输入console.log()
在setting.json添加
123// 大括号连线设置 "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": "active"
选中大括号，可以查看范围
变量的命名格式
在JavaScript中如何命名一个变量呢？包含两部分：
变量的声明：在JavaScript中声明一个变量使用var关键字（后续学习ES6还有let、const声明方式）
变量的赋值：使用 = 给变量进行赋值；
这个过程也可以分开操作：
同时声明多个变量：
变量的命名规范
变量命名规则：必须遵守
1.第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
2.其他字符可以是字母、下划线、美元符号或数字
3.不能使用关键字和保留字命名：
4.变量严格区分大小写
变量命名规范：建议遵守
多个单词使用驼峰标识；
赋值 = 两边都加上一个空格； ...
CSS元素的水平垂直居中方案
水平居中1.行内级元素: 设置父元素的text-align: center
12345.container { height: 300px; background-color: orange; text-align: center; }
123<div class="container"> <span>剧中</span> </div>
2.块级元素 设置当前块级元素(宽度) margin: 0 auto;
不设置宽度，块级元素默认占一行，看不出效果
12345678910.container { height: 300px; background-color: orange; } .box1 { width: 100px; margin: 0 auto; background-color: #f00; }
123& ...
