MDN上的JavaScript教程——高级篇

文章目录

`MDN`上的JavaScript教程——高级篇继承与原型链（Inheritance and the prototype chain）拓展原型链的4种方式（Extending prototype chain） 严格模式（Strict Mode）调用严格模式（Invoking strict mode）严格模式中的变化（Changes in strict mode）将过时错误转成异常（Converting mistakes into errors）简化变量的使用（Simplifying variable uses）为未来的ECMAScript版本铺平道路（Paving the way for future ES versions） 类型化数组（Typed Arrays）缓冲和视图：类型数组架构（Buffers and views：architecture）ArrayBuffer类型数组视图数据视图 使用类型数组的Web Api 内存管理（Memory Management）JavaScript的内存分配（Allocation）垃圾回收（Garbage Collection）引用计数垃圾回收（Reference-counting）标记-清除算法（Mark-and-sweep Algorithm） 并发模型和事件循环（Concurrency Model and Event Loop）栈（Stack）堆（Heap）队列（Queue）执行至完成（Run-to-completion）添加消息（Adding messages）永不阻塞（Never Blocking）

这是一篇阅读笔记，原文参考

继承与原型链（Inheritance and the prototype chain）

在 ES2015/ES6 中引入了 class 关键字，但那只是语法糖，JavaScript 仍然是基于原型的

null没有原型，作为原型链中的最后一个环节

[[Prototype]]可以通过Object.getPrototypeOf()来访问，等同于非标准实现的__proto__

属性屏蔽property shadowing

JavaScript中没有其他语言的“方法”，任何函数都可以当做属性被添加到对象上。函数的继承和属性的继承没有区别。

在JavaScript中，函数是允许拥有属性的。

所有的原型链末端都是 Object.prototype -> null

在JavaScript中，构造器就是一个普通的函数，使用new调用时，它可以被称为构造方法

Object.create() 延长原型链

class语法的新关键词：class constructor static extends super

试图访问不存在的属性时会遍历整个原型链。

拓展原型链的4种方式（Extending prototype chain）

newObject.create() 现下最推崇的方式Object.setPrototypeOf()__proto__

JavaScript完全是动态的，都是运行时，不存在类。所有的都是实例（对象），即使模拟出的“类”，也只是一个函数对象。

在prototype中定义的所有内容都可以有所有实例有效的共享。

prototype是用于类的，Object.getPrototypeOf（）是用于实例的，二者功能是一致的。

严格模式（Strict Mode）

非严格模式被称为sloppy mode ：ES5的严格模式是具有限制性的JavaScript环境，从而使代码显式地脱离“马虎模式/松散模式”。

严格模式的产生是为了形成与正常代码不同的语义：

严格模式通过抛出错误来消除一些原有的静默错误严格模式修复了一些导致JavaScript引擎难以执行优化的缺陷严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法

调用严格模式（Invoking strict mode）

严格模式可以应用到整个脚本或者个别函数中。

为整个脚本开启严格模式，存在问题：合并脚本时。为函数开启严格模式：将"use strict"放在函数体所有语句之前。模块（module）默认启用严格模式

严格模式中的变化（Changes in strict mode）

严格模式同时改变了语法及运行时行为。

将过时错误转成异常（Converting mistakes into errors）

严格模式下，某些先前被接受的错误将被认为是异常。

严格模式下无法意外地创建全局变量静默失败的赋值操作抛出异常。 给NaN赋值给只读属性getter-only赋值给不可扩展对象non-extensible object添加属性 删除不可删除的属性：正常模式不会产生任何效果 delete Object.prototype 重名属性：正常模式最后一个重名属性决定其属性值参数名唯一严格禁止八进制数字语法禁止设置primitive值的属性 false.true = 5"string".property = "anything"

简化变量的使用（Simplifying variable uses）

严格模式简化了代码中变量名字映射到变量定义的方式。JavaScript有些情况下代码中名字到变量定义的基本映射只有在运行时产生。

严格模式禁用with严格模式下的eval不再为上层范围引入新变量严格模式禁止删除声明变量

为未来的ECMAScript版本铺平道路（Paving the way for future ES versions）

严格模式保留关键字：implements interface let package private protected public static yield严格模式禁止了不在脚本或者函数层面上的函数声明

类型化数组（Typed Arrays）

JavaScript类型化数组（TypedArray）是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。

缓冲和视图：类型数组架构（Buffers and views：architecture）

TypedArrays将实现拆分为缓冲和视图两部分，一个缓冲描述的是一个数据块。

ArrayBuffer

表示一个通用的、固定长度的二进制数据缓冲区。你不能直接操纵一个ArrayBuffer的内容；你需要创建一个类型化数组的视图或者一个描述缓冲数据格式的DataView，使用它们来读写缓冲区的内容。

类型数组视图

Int8Array Unit8Array Int16Array Unit16Array Int32Array Unit32Array Float32Array Float64Array BigInt64Array BigUnit64Array

数据视图

DataView 控制字节序

使用类型数组的Web Api

FileReader.prototype.readAsArrayBuffer() 读取对应的Blob或者File内容

XMLHttpRequest.prototype.send() 支持类型化数组和ArrayBuffer对象作为参数

ImageData.data 是一个Unit8ClampedArray对象，描述RGBA序列的颜色数据

var buffer = new ArrayBuffer(16); // 一段初始化为0的内存 console.log(buffer.byteLength); // 16 /* 在开始实际操作这个缓冲之前，需要创建一个视图 */ var int32View = new Int32Array(buffer); for (let i = 0; i < int32View.length; i++) { int32View[i] = i * 2; } /* 同一数据上创建多个视图 */ var int16View = new Int16Array(buffer); console.log(int16View);

内存管理（Memory Management）

C语言有内存管理函数malloc() free()，JavaScript在创建变量时自动进行了分配内存，并且在不使用时自动释放，释放的过程称为”垃圾回收“。

JavaScript的内存分配（Allocation）

使用值的过程实际上是对分配内存进行读取和写入的操作。

高级语言解释器嵌入了垃圾回收器，主要工作是跟踪内存的分配和使用，以便当分配的内存不再使用时，自动释放它。

垃圾回收（Garbage Collection）

对象不再需要

垃圾回收算法主要依赖于引用（References）的概念。在内存管理的环境中，一个对象如果有访问另一个对象的权限（隐式或显式），叫做一个对象引用另一个对象。例如，一个JavaScript对象具有对它原型的引用（隐式）和对它属性的引用（显式）。

引用计数垃圾回收（Reference-counting）

没有引用指向该对象（零引用），它将被回收。

无法解决”循环引用（Circular References）“的问题

标记-清除算法（Mark-and-sweep Algorithm）

对象是否可以获得。从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象。

从2012年起，所有现代浏览器都采用了标记清除算法。

并发模型和事件循环（Concurrency Model and Event Loop）

JavaScript又一个基于事件循环的并发模型。

栈（Stack）

函数调用形成一个由若干帧（frame）组成的栈

堆（Heap）

对象被分配在堆中。

队列（Queue）

一个JavaScript运行时包含了一个待处理消息的消息队列。每个消息都关联着一个用以处理该消息的回调函数。

执行至完成（Run-to-completion）

每一个消息完整地执行后，其他消息才会被执行。这为程序的分析提供了一些优秀的特性，当一个函数执行时，他不会被抢占，只有在他运行完毕之后才会去运行其他代码，才能修改这个函数操作的数据。这与C语言不同，函数在线程中运行，他可能在任何位置被终止，然后在另一个线程中运行其他代码。

这个模型的缺点在于，当一个消息需要太长时间才能处理完毕，Web应用程序就无法处理与用户的交互，例如点击或滚动。

添加消息（Adding messages）

一个事件发生，并且绑定有事件监听器，一个消息就被添加到消息队列。如果没有事件监听器，该事件就会被丢弃。

永不阻塞（Never Blocking）

事件循环模型的一个特性：永不阻塞。