动画与 Canvas 图形 毋庸置疑，是 HTML5 最受欢迎的新特性。这个元素会占据一块页面区域，让 JavaScript可以动态在上面绘制图片。自身提供了一些 API，但并非所有浏览器都支持这些API，其中包括支持基础绘图能力的 2D 上下文和被称为 WebGL 的 3D 上下文。支持的浏览器的最新版本现在都支持 2D 上下文和 WebGL。 使用 requestAnimationFrame 早期定时动画 以前，在 JavaScript 中创建动画基本上就是使用 setInterval()来控制动画的执行。虽然…
DOM2 和 DOM3 实际上，DOM2和 DOM3 是按照模块化的思路来制定标准的，每个模块之间有一定关联，但分别针对某个 DOM 子集。这些模式如下所示。 DOM Core：在 DOM1 核心部分的基础上，为节点增加方法和属性。 DOM Views：定义基于样式信息的不同视图。 DOM Events：定义通过事件实现 DOM 文档交互。 DOM Style：定义以编程方式访问和修改 CSS 样式的接口。 DOM Traversal and Range：新增遍历 DOM 文档及选择文档内容的接口。 DOM HTM…
DOM DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。 节点层级 <html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html> 对应的层级结构： document 节点表示每个文档的根节点。在这里，根节点的唯一子节点是元素，我们称之为文档元素…
BOM window 对象 BOM 的核心是 window 对象，表示浏览器的实例。 window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。 Global 作用域 window 对象被复用为 ECMAScript 的 Global 对象。 如果使用 let 或 const 替代 var，则不会把变量添加给全局对象： let age = 29; const sayAge = () => alert(this.age); …
函数 箭头函数 如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号 箭头函数也可以不用大括号，但这样会改变函数的行为。使用大括号就说明包含“函数体”，可以在一个函数中包含多条语句，跟常规的函数一样。如果不使用大括号，那么箭头后面就只能有一行代码，比如一个赋值操作，或者一个表达式。而且，省略大括号会隐式返回这行代码的值： // 以下两种写法都有效，而且返回相应的值 let double = (x) => { return 2 * x; }; let triple = (x) …
对象、类与面向对象编程 理解对象 属性的类型 ECMA-262 使用一些内部特性来描述属性的特征。这些特性是由为 JavaScript 实现引擎的规范定义的。因此，开发者不能在 JavaScript 中直接访问这些特性。为了将某个特性标识为内部特性，规范会用两个中括号把特性的名称括起来，比如[[Enumerable]]。属性分两种：数据属性和访问器属性。 数据属性 数据属性有 4个特性描述它们的行为。 [[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是…
Object Array 创建数组 Array 构造函数还有两个 ES6 新增的用于创建数组的静态方法：from()和 of()。 from()用于将类数组结构转换为数组实例，而 of()用于将一组参数转换为数组实例。 Array.from() // 字符串会被拆分为单字符数组 console.log(Array.from("Matt")); // ["M", "a", "t", "t"] // 可以使用 from()将集合和映射转换为一个新数组 const m = new Map().set(1, 2) .set…
变量、作用域与内存 原始值与引用值 复制值 其实也叫简单变量和引用变量 原始值的复制（简单变量的复制） 引用值的复制（引用变量的复制） 参数传递 ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中，就像从一个变量复制到另一个变量一样。如果是原始值，那么就跟原始值变量的复制一样，如果是引用值，那么就跟引用值变量的复制一样。对很多开发者来说，这一块可能会不好理解，毕竟变量有按值和按引用访问，而传参则只有按值传递。 在按值传递参数时，值会被复制到一个局部变量（即一个命名参数…
<noscript>元素 针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案。最终，<noscript>元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容。虽然如今的浏览器已经 100%支持JavaScript，但对于禁用 JavaScript 的浏览器来说，这个元素仍然有它的用处。<noscript>元素可以包含任何可以出现在<body>中的 HTML 元素，<script>除外。在下列两种情况下，浏览器将显示包含在<noscr…