标签总结下的文章 - 炬忆 Torch Once

2022-02-19

《JavaScript 学习指南》— 原型链很久之前从《JavaScript 学习指南》上学习了原型链的知识，关键是理解和记住那个原型链的图，现在有些忘记了，复习一下！原型链图示我是倒着去理解原型链的，先根据原型链现有的状态（规则），逐步深入去刨析它们之间的关系。现有的状态是什么呢？从《JavaScript 高级程序设计 v4》这本书上摘下来一句：{callout color="#3398e6"}每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型{/callout}拿下面这个图来看，Foo、Object、Function 是构造函数，每个构造函数都有一个原型对象（prototype），在图中用紫色文字箭头指示；原型有一个属性指回构造函数（constructor），在图中用绿色文字箭头指示；实例有一个内部指针指向原型（__proto__），在图中用褐色文字箭头指示。显然，要搞清楚原型链，必须要了解 (__proto__)，prototype，constructor。关于__proto__{message type="info" content="每个对象都有一个 (__proto__) 属性指向构造函数的 prototype"/}从对象开始，对象可不止是这样的：let obj = {};在 JavaScript 中，除了基本数据类型外，其他的一切都是对象。通过 function 关键字定义的函数、通过 let、const 声明的用花括号包裹的变量、通过 class 关键字定义的类，都可看作是对象。既然是对象（实例），它就会遵循原型链规则，内部有一个 (__proto__) 属性指向构造函数的原型。可以在上图中得到验证：图中共有 8 个（__proto__），对应着 (f1 f2)、(o1 o2)、Foo、Object、Function 以及 3 个不同的 prototype。关于 prototype（原型）{message type="info" content="只有函数才有且必然有 prototype"/}函数和对象是什么关系呢？函数就是对象，函数是对象的一个子集。因此，函数不仅有 prototype，还有 (__proto__)，前者是其作为函数的特征，后者是其作为对象的特征。在上图中，三个函数 Foo、Object、Fucntion 都有 prototype，非函数类型的对象没有 prototype。函数能够通过 new 来构造自己的实例，就是把自己的 prototype 的引用交给了实例，使得实例能够通过__proto__属性来访问自己的原型。关于 constructor它存在于 prototype 中，是对构造函数的引用。构造函数能够通过 prototype 属性找到自己的原型，原型可以通过自己的 constructor 属性找到构造函数，这是一个双向的过程。通过构造函数创建了实例，那么实例便可通过__proto__找到构造函数。

2022年02月19日
11 阅读
0 评论
0 点赞

2022-02-18

《JavaScript 高级程序设计 v4》— 模块 CommonJS 规范NodeJS 模块系统使用了有轻微修改的 CommonJS 规范，浏览器不支持 CommonJS。CommonJS 规范使用 require() 指定依赖，使用 exports 对象定义自己的 API。let fs = require("os"); module.exports = { platformInfo: fs.platform() }require()NodeJS require() 文档require() 可以导入 node_modules 目录中的文件，可以导入 json 文件，可以导入自定义的 js 文件，可以导入内置核心模块：require("os"); require("./api.js") // 可以不带后缀名 require("axios"); require("./config.json");require 要不要赋值给变量？require() 一个模块时，会执行里面的内容。所以要不要将 require() 赋值给变量，关键就是看 require() 有没有返回值，如果有返回值就把它赋值给变量，后面用得到。但是如果是一次性加载这个模块，不管它有没有返回值，以后不用了，那么也没有必要把它赋值给变量。多次 require 相同模块会怎样？require() 只会加载模块一次，然后把它放进缓存中，再遇到相同的模块不会加载了。比如在一个文件 A 里写了循环 10 次输出 hello world，在另外一个文件 B 里 require(A) 写了 100 次，最终仍是输出 hello world 10 次。上面提到的缓存实际上是 require.cache，这是一个保存着已经加载的模块的对象，如果把这个对象中关于某个已加载模块 C 的键值对删除，下次遇到 require(C) 时仍会加载。IIFE (immediately invoked function expression)IIFE 可以实现模块的类似功能，既隐藏了内部实现细节，又可以返回供其他模块调用的 API。let moduleA = (function(){ return something; })();

2022年02月18日
8 阅读
0 评论
0 点赞

2022-02-16

2022年02月16日
20 阅读
0 评论
0 点赞

2022-02-14

《JavaScript重难点实例精讲》— ES7 + 马上写

2022年02月14日
13 阅读
0 评论
0 点赞

2022-02-14

《ES6标准入门》—【let const 解构赋值】 2015 年正式发布的 ES6 至今 7 年了，然而保留 ES5 习惯的人还是很多，好好看书好好学习本文结合了阮一峰《ES6标准入门》第 2 版let 和 const 命令{anote icon="fa-plane" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/block" type="secondary" content="块语句 MDN"/}被 { } 包裹起来的称为块语句，用于把语句组合起来，比如常见的 for 循环，如果不加 { } 只有一行代码会进入循环 (开端粉丝狂喜 😯 )，加上了花括号后，多行代码会一起进入循环💧 块语句是有块级作用域的，但 let 和 const 有块级作用域，var 声明的变量是没有的：{{{ var a = 100 }}}f a // 100 {let a = 100}; a // ReferenceError: a is not defined💧 let 和 const 没有变量提升a // undefined b // ReferenceError: b is not defined var a = 100; let b = 200;💧 let 和 const 的暂时性死区：在变量声明之前，任何对变量的引用都是非法的，变量不可用{ a = 100; // Cannot access 'a' before initialization let a; }💧 不允许重复声明，包括函数参数变量的声明，块内变量的声明等function compute(arg) { let arg; // SyntaxError: Identifier 'arg' has already been declared }💧 块级作用域可替代 IIFE 立即执行函数，块内的细节对外隐藏{ // do something } (function () { // do something })();💧 与顶层对象脱钩，var 声明的对象会被添加到 window 中，let 和 const 的不会var a = 100; this.a // 100 window.a // 100 let b = 200; window.b // undefined this.b // undefined💧 块级作用域内声明函数ES5 规定函数只能在顶层作用域和函数作用域中声明，不能在块级作用域中声明，ES6引入了块级作用域，明确允许在块级作用域之中声明函数。emmm，具体的内容很多，不过我觉得不是特别重要，笔试面试应该考不到，而且浏览器并没有按照上面的规定实现，具体就看图一，图二吧关于 const 命令上面的内容对于 let 和 const 都是相同的，但是有些关于 const 的细节容易被忽视：const 只是保证变量名指向的地址不变，但不保证其数据不变，基础数据类型的变量是不变的，引用数据类型的变量是可变的。对于数组类型，其各个内部函数都不影响使用const a = 100; a = 200; // TypeError: Assignment to constant variable. const student = {}; student.age = 20; // 正常 const students = []; students.push({}); // 正常const 声明的变量必须在声明时就赋值const c; // SyntaxError: Missing initializer in const declaration关于变量声明ES5 可以使用 var 和 function，ES6 可以使用 let 和 const，以及 import 和 class，加起来一共 6 种变量声明方式{dotted startColor="#ff6c6c" endColor="#1989fa"/}数组解构赋值let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]]; let [ , , third] = ["foo", "bar", "baz"]; // third: "baz" let [head, ...tail] = [1, 2, 3, 4]; // head: 1, tail: [2, 3, 4] let [x, y, ...z] = ['a']; // x: 'a', y: undefined, z: []上面的例子仅仅展示了等号右面是数组的情况，事实上，只要等号右面的对象具有 Iterator 接口，就可以用数组的形式被结构赋值，如：后面笔记里会提到的 Set，DOM 中的 HTMLCollection，NodeList 等，再举一个 Generator 的例子：{callout color="#905cf0"}Generator 是 ES6 提出的，原生具有 Iterator 接口，特征是 function* 和 yield {/callout}// 用 ES6 Generator 来计算斐波那契数列 function* fibs() { var a = 0; var b = 0; while(true) { yield a; [a, b] = [b, a + b]; } }解构赋值允许指定默认值，当没有显式为变量赋值时，变量使用给定的默认值。对于下面的例子，因为 x 没有成功解构到任何有效值，因此 x 被赋予默认值 1。注意：当且仅当被解构的位置是 undefined 时，才会使用默认值，这里是严格相等的判断。let [x = 1] = []; let [y = 2] = [null]; x // 1 y // null 而不是 2, null 并不严格相等于 undefined另外一个需要注意的地方是解构赋值的顺序，是先判断被解构的位置是否是 undefined，然后根据结果来决定要不要使用默认值。这意味着，如果默认值是一个表达式，这个表达式就是惰性的，只有用到的时候才会被调用求值：function com() { console.log('called me'); return 'OK'; } let [x = com()] = [1]; // com 并不会被调用还有一个特性是，在解构赋值表达式中，等号左边变量的默认值可以引用其他变量，前提是被引用的变量已经声明过了。emmm，我是觉得这个特性还是很绕的，影响可读性？反正我不用 😢let [x = 1, y = x] = []; // x: 1, y: 1 let [x = 1, y = x] = [2]; // x: 2, y: 2 let [x = y, y = 1] = []; // ReferenceError: y is not defined{dotted startColor="#ff6c6c" endColor="#1989fa"/}对象解构赋值数组的结构赋值结果和元素在数组中的排列次序有关，而对象的解构赋值结果是和变量名相关的，与次序无关。{message type="info" content="变量名必须严格相等才能解构赋值成功"/}let {name, age} = {age: 10, name: 'XiaoLu'}; // name: 'XiaoLu', age: 10 let {phone} = {age: 10, name: 'XiaoLu'}; // phone: undefined💧 如果想要变量名不相等，如经常会出现前后端变量名命名格式不一致问题，前端习惯全部小写以下划线间隔，而调用某个 API 接口后返回的是驼峰式的命名，必须使用下面的写法：{callout color="#ea6695"} 以前真不知道还能这么玩，太喜欢了！😜 {/callout}let {studentName: student_name} = {studentName: 'xiaolu'}; // student_name: 'xiaolu' // studentName: ReferenceError: studentName is not defined💧 另外，对象解构赋值也支持嵌套形势。其实，坦白的说，能够想到的形式，应该都是支持的，比如对象解构赋值中再嵌套数组的解构赋值：let {nums: [a] } = {nums: [1, 2 , 3]} a // 1💧 不过我觉得还是以代码可读性为首要原则，技巧再高超的代码让人看不懂也是不行的。比如书上为了说明给了这样的样例代码，一时半会儿是看不懂是把哪些值赋给了哪些变量。因为这里面 p 是模式，x 和 y 才是变量。var obj = { p: [ 'Hello', {y: 'World'} ] }; var {p: [x, {y}]} = obj;💧 对象的解构可以指定默认值，主要是后两种不常见：let {x = 3} = {} // x: 3 let {x, y = 5} = {x: 1} // x: 1, y: 5 let {x: y = 3} = {} // y: 3 let {x: y = 3} = {x: 5} // y: 5{alert type="error"}容易出错的地方：对象的解构赋值一定要双方结构互相对应，否则会出错，比如：let {foo: {bar}} = {baz: 'baz'}; // ypeError: Cannot read properties of undefined (reading 'bar')因为与 foo 对应的属性在右侧找不到，因此相当于把 undefined 解构到 {bar} 中，相当于调用 undefined.bar，这显然是不合理的。将一个已经声明的变量用于解构赋值，要使用圆括号包裹：let x; { x } = {x: 1}; // SyntaxError: Unexpected token '='JS 会认为 { x } 是可执行的代码块，显然语法错误，正确的做法是：let x; ({ x } = {x: 1});{/alert}

2022年02月14日
13 阅读
0 评论
0 点赞