# JavaScript 基础 ## 1 call bind apply 的区别手写其中一个源码 ::: details 这三个方法都是函数对象的方法，需要通过函数对象来调用当对函数调用 call()和 apply()都会调用函数执行（即使没有传入任何参数）调用 bind 不会执行 1. call `call`方法的第一个参数也是`this`的指向，后面传入的是一个参数列表，改变`this`指向后原函数会立即执行，且此方法只是临时改变`this`指向一次当第一个参数为`null`、`undefined`的时候，默认指向`window`(在浏览器中) ```js function fn(...args) { console.log(`this的指向为${this}`, args) } let obj = { myName: '张三', } fn.call(obj, 1, 2) // this会变成传入的obj，传入的参数是一个参数列表； fn(1, 2) // this指向window fn.call(null, [1, 2]) // this指向window fn.call(undefined, [1, 2]) // this指向window ``` 2. apply `apply`接受两个参数，第一个参数是`this`的指向，第二个参数是函数接受的参数，以数组的形式传入改变`this`指向后原函数会立即执行，且此方法只是临时改变`this`指向一次当第一个参数为`null`、`undefined`的时候，默认指向`window`(在浏览器中) ```js function fn(...args) { console.log(`this的指向为${this}`, args) } let obj = { myName: '张三', } fn.apply(obj, [1, 2]) // this会变成传入的obj，传入的参数必须是一个数组； fn(1, 2) // this指向window fn.apply(null, [1, 2]) // this指向window fn.apply(undefined, [1, 2]) // this指向window ``` 3. bind bind 方法和 call 很相似，第一个参数也是`this`的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)，原函数的返回值不会改变改变`this`指向后不会立即执行，而是返回一个永久改变`this`指向的函数 ```JS function fn(...args){ console.log(`this的指向为${this}`,args); } let obj = { myName:"张三" } const bindFn = fn.bind(obj,[1,2]); // this 会变成传入的obj ，bind不是立即执行 bindFn(1,2) // this指向obj bind() fn(1,2) // this指向window ``` 4) 手写 apply - 判断是否为 undefined 或 null，如果是，则 this 指向的是 window - 给目标对象创建一个属性，将要调用的方法绑定到这个属性上 - 用 arguments 拿到传入的参数 - 直接运行刚刚创建的属性 - 删除这个属性 ```js Function.prototype.myApply = function (context) { // 判断调用对象 if (typeof this !== 'function') { throw new TypeError('Error') } if (typeof context === 'undefined' || context === null) { context = window } context.fn = this //this指向的是apply方法的函数 let args = arguments[1] //拿到第一个参数 let result if (args) { result = context.fn(...args) //运行一下 } else { result = context.fn() } delete context.fn return result } ``` 5) 手写 call 思路同 apply 基本相同不一样的是要通过 arguments 取出除第一位之外的所有参数放到一个数组里，然后通过展开运算符给要执行的函数或方法传参 ```js //往Function的原型对象上加myCall方法 Function.prototype.myCall = function (context) { // 判断调用对象 if (typeof this !== 'function') { console.error('type error') } //判断是否为undefined或null if (typeof context === 'undefined' || context === null) { context = window } context.fn = this //给目标对象新建一个属性，绑定这个函数 let args = [...arguments].slice(1) //过arguments取出除第一位之外的所有参数放到一个数组 let result = context.fn(...args) ////运行一下 delete context.fn //删除目标对象上的fn属性 return result } ``` 6) 手写 bind bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数要注意因为 bind 转换后的函数可以作为构造函数使用，此时 this 应该指向构造出的实例 > `bind` 的实现对比其他两个函数略微地复杂了一点，因为 `bind` 需要返回一个函数，需要判断一些边界问题，以下是 `bind` 的实现 - `bind` 返回了一个函数，对于函数来说有两种方式调用，一种是直接调用，一种是通过 `new` 的方式，我们先来说直接调用的方式 - 对于直接调用来说，这里选择了 `apply` 的方式实现，但是对于参数需要注意以下情况：因为 `bind` 可以实现类似这样的代码 `f.bind(obj, 1)(2)`，所以我们需要将两边的参数拼接起来，于是就有了这样的实现 `args.concat(...arguments)` - 最后来说通过 `new` 的方式，对于 `new` 的情况来说，不会被任何方式改变 `this`，所以对于这种情况我们需要忽略传入的 `this` ```js Function.prototype.myBind = function (context) { if (typeof this !== 'function') { throw new TypeError('error') } // 获取参数 const args = [...arguments].slice(1) let _this = this // 返回一个函数 return function fn() { //判断是否被当做构造函数使用，根据调用方式，传入不同绑定值 return _this.apply( this instanceof fn ? new fn(...arguments) : context, args.concat(...arguments) ) } } ``` 7) 小结从上面可以看到，`apply`、`call`、`bind`三者的区别在于： - 三者都可以改变函数的`this`对象指向 - 三者第一个参数都是`this`要指向的对象，如果没有这个参数或参数为`undefined`或`null`，则默认指向全局`window` - 三者都可以传参，但是`apply`是数组，而`call`是参数列表，且`apply`和`call`是一次性传入参数，而`bind`可以分为多次传入 - `bind`是返回绑定 this 之后的函数，`apply`、`call` 则是立即执行 ::: ## 2 说下原型链 ::: details [深入理解 JavaScript 原型与闭包](https://blog.csdn.net/S1259364843/article/details/119548255) JavaScript 是一种通过原型实现继承的语言，它与别的高级语言是有区别是，例如 Java，C#等通过类型来决定继承关系，JavaScript 是一门动态的弱类型语言。可以认为 JavaScript 中的所有数据类型都是对象，而原型可以被认为是一个对象，用原型可以实现对象属性的继承。JavaScript 的对象中包含了一个 prototype 的内部属性，这个属性所对应的就是该对象的原型。作为对象的内部属性，prototype 是不能够直接访问的，但可以通过`隐式原型__proto__`进行访问。引用类型的四个规则 1. 引用类型，都具有对象特性，即可自由扩展属性。 2. 引用类型，都有一个隐式原型 `__proto__` 属性(包含函数对象），属性值是一个普通的对象。 3. 引用类型，隐式原型 `__proto__` 的属性值指向它的构造函数的显式原型 `prototype` 属性值。 4. 当你试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去找它的隐式原型 `__proto__`（也就是它的构造函数的显式原型 `prototype`）中寻找。 > 引用类型：Object、Array、Function、Date、RegExp > > 基本类型：Underfined ,Null, Boolean,Number,String > > 基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象 > > 基本类型在内存中分别占有固定大小的空间，他们的值保存在栈空间中，我们通过按值访问 > > 引用类型：值的大小不固定，栈内存中存放地址指向堆内存中的对象，是按引用访问的。栈内存中存放的只是该对象的访问地址 > > [参考链接](https://blog.csdn.net/weixin_39786171/article/details/80699736) ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.293v8ekz4jok.png) > 原型链：JavaScript 中的每一个对象都有一个 prototype 的属性，称为原型，而原型的值是一个对象，它也会有自己的原型，这样就串起了一条原型链，原型链的链头是 Object，它的 prototype 是 null。 > > 原型链的作用是对象继承，比如函数 A 的原型属性是一个对象，当这个函数作为构造函数来创建实例时，该函数的原型属性将作为原型赋值给所有对象实例，比如新建一个数组，数组上的方法便是从数组的原型上继承而来的 > > 当访问一个对象身上的属性时，首先查找对象本身，若找到，而返回，若未找到，则继续查找原型对象上的属性，如果还找不到，就会沿着原型链往上查找，直到最顶层。 > > 只要没有被覆盖，对象原型的属性就能在所有的实例中找到，若整个原型链都找不到，则返回 undefined。 > 原型链中最特殊的两个对象一个 Object 一个 Function > > 对象都是通过函数创建的，即说对象都是函数的实例对象 (所有函数对象的**proto**都指向 Function.prototype) > > `String.__proto__ === Function.prototype` // true [Boolean 和 Number 也是] > > `String.constructor == Function` // true > > `Object.__proto__===Function.prototype` > > 但 Object.prototype 即不是 Function 也不是 Object > > `Object.prototype.__proto__ === null` > > `Object.prototype.prototype === undefined` > > `console.log(Object.prototype instanceof Object); //false` > > `console.log(Object.prototype instanceof Function); //false` > > `Function.prototype === Function.__proto__` > > `console.log(Function.prototype instanceof Object); //true` > > 函数都有一个 prototype 属性，指向的是一个空的 Object 实例对象 > > `Function.prototype.__proto__===Object.prototype` //true > > Function 函数不通过任何东西创建，JS 引擎启动时，添加到内存中 > `console.log(Function.prototype); //ƒ () { [native code] } 指向了最底层` > > console.log(Array.prototype); //其实是一个数组 > > console.log(Array.isArray(Array.prototype)); //true > > 原型 prototype > > 作用：用于对象继承 > > 1. 我们所`创建`(注意不是调用，调用才会执行里面的代码）的每一个函数，解析器都会函数中添加一个 prototype 属性，这个属性对应着的是一个对象，也就是我们平时所说的`原型对象`，默认是一个空的（只有对于普通函数只有一个 constructor 属性，其他例如 Object 有其他属性）Object`实例`对象（但 Object 不满足，这是一个特殊的例子，也就是 `console.log(Object.prototype instanceof Object); //false` ),它的隐式原型指向的是它的构造函数的显式原型 `foo.prototype.__proto__ === Object.prototype` > > 2. 如果函数作为普通函数，那么调用 prototype 是没有任何作用的（普通函数虽然也有原型对象，但因为原型对象的作用是继承，当不作为构造函数使用时，实际上是没有什么用的） > > 3. 当函数作为构造函数的形式调用时，它所创建的的对象都会有一个隐含的属性 > > 这个属性指向的是构造函数的原型对象，我们可以通过`__proto__`来访问该属性 > > （也就是说`prototype`是函数身上的属性，`__proto__`对象身上的属性） > > 4. 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，那样我们就可以把对象中共有的内容，统一放在原型对象上 > > 5. 当我们去访问对象的一个属性或者方法的时候，它首先会到对象自身上去寻找，如果有那么就直接使用 > > 如果没有那就会去原型对象中寻找，如果找到那就直接使用， > > 如果找不到，而这个原型对象还有原型对象，那么就到这个原型对象上寻找，依次类推，直到找到 Object 对象的原型，这样就构成了一条原型链，`所有对象的原型链都会找到Object.prototype` > > 原型链的链头是`Object`，值是 null > > 如果整个原型链都找不到，那么就会返回`undefined` > > 好处：这样以后我们创建函数的时候，可以把这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样就不用每调用一次构造函数就需要为这些对象添加属性和方法，而每个对象都具有这些属性和方法同时这样就不会影响全局作用域，污染全局变量，以及造成变量不安全的问题了。 > > `注意：` > > - prototype 属性只存在于函数对象中，其他对象是没有 prototype 属性的 > > - 每一个对象都有原型，包括原型对象也有原型。特殊的是 Object 的原型对象没有原型。指向的是 null > > - 和其他对象一样我们可以添加修改删除原型中的属性，也可以修改原型对象的引用。Object 不可以修改 > > - `所有的函数对象的__proto__ 都指向Function.prototype` > > - 每个函数都有一个属性`prototype`（原型对象），其属性值是一个空的对象实例，默认只有一个叫`constructor`的属性，指向这个函数本身） > > console.log(Date.prototype.constructor===Date) //true > > console.log(Fun.prototype.constructor===Fun) //true > > console.log(fn.prototype.constructor === fn);//true 获得原型的方法： 1. Object.getPrototypeOf(对象) 2. 对象.`__proto__` 3. 对象. constructor.prototype（每个对象中都有一个 constructor 属性，它引用了当前对象的构造函数。） 4. 构造函数.prototype 需要注意的是，我们可以获取到 Object 的原型对象，也可以对它的属性进行操作，但是`我们不能修改 Object原型对象的引用`。原型链 - 基于我们上边所说的，每个对象都有原型对象，原型对象也有原型对象。 - 由此，我们的对象，和对象的原型，以及原型的原型，就构成了一个原型链。 - 比如这么一个对象： ·`var mc = new MyClass(123,456);` 这个对象本身，原型`MyClass.proprototype`原型对象的原型对象是`Object`，`Object` 象还有其原型。这组对象就构成了一个原型链。 – 这个链的次序是：`mc对象、mc对象原型、原型的原型（Object）、Object的原型` 当从一个对象中获取属性时，会首先从当前对象中查找，如果没有则顺着向上查找原型对象，直到找到 Object 对象的原型位置，找到则返回，找不到则返回 undefined `非常注意，经常迷惑：`prototype 是函数对象特有的，但是所有的`实例对象`都有一个隐式的`__proto__`属性，函数对象也是对象，所以也会有这个`__proto__`属性。对于 `function Foo（）{}`相当于`var Foo = new Function()`，而`Function`是既是函数对象，也是 Function 的对象实例，也就是说`Function它是new自己创建的`，也就是说`Function = new Function()`。注意只有 Function 有这个特点，其他的函数没有。所以 Function 既有显式原型属性`prototype`，也有隐式原型属性`__proto__` `实例对象的隐式属性等于它的构造函数的显式原型属性` 所有函数的`__proto__`都是一样的，因为都是通过`new Function`产生的，所以等于 Function.prototype。 `所有函数都是Function的实例(包含Function)` 而这些函数都各自有自己的显式原型属性（这个显式原型属性是解析器给每一个函数都会分配的，这个属性的和通过它们自己创建的实例对象的隐式原型属性是一样的，指向同一块内存空间） `Object() 相当于 var Object = new Function（）` `Function 相当于 var Function = new Function（）` ::: ## 3 JS 数据类型 ::: details 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、BigInt（大整数类型）、Symbol（ _ES6 引入了一种新的原始数据类型，表示独一无二的值_）。引用数据类型：对象(Object)、数组(Array)、函数(Function)、Date（日期）、RegExp（正则表达式）。 ::: ## 4 基本数据类型和复杂数据类型有什么区别？ ::: details 1. 内存的分配方式不同： - 基本数据类型存储在栈中 - 复杂数据类型存储在堆中，栈中存储的变量是指向堆中的引用地址 2. 访问机制不同 - 基本数据类型是按值访问 - 复杂数据类型按引用访问，JS 中不允许直接访问保存在堆内存中的对象，在访问一个对象时，首先得到的是这个对象在堆内存中的地址，然后按照这个地址去获得这个对象的值 3. 复制变量时不同 - 基本数据类型：a=b 是将 b 中保持的原始值的副本赋值给新变量 a，a 和 b 是完全独立，互不影响的 - 复杂数据类型：a=b 将 b 保存的对象内存的引用地址赋值为新变量 a，a 和 b 指向同一个对内存地址，其中一个值发生了改变，另一个也会改变 4. 参数传递不同（实参/形参）函数传参都是按值传递（栈中的存储的内容）：基本数据类型，拷贝的值，复杂数据类型，拷贝的是引用地址。 ::: ## 5 讲一下闭包 ::: details [参考文章](https://blog.csdn.net/weixin_43586120/article/details/89456183?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162656935716780269844754%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162656935716780269844754&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-89456183.first_rank_v2_pc_rank_v29&utm_term=%E9%97%AD%E5%8C%85&spm=1018.2226.3001.4187) [参考文章 2](https://blog.csdn.net/dovlie/article/details/76339244?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.pc_relevant_baidujshouduan&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.pc_relevant_baidujshouduan) 使用闭包是为了设计私有的方法和变量，闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，增加内存的使用量，而且使用不当可能会造成内存泄漏。 js 的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在 js 作用域环境中访问变量的权利是`由内向外`的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数闭包的实质就是在一个函数的内部创建另一个函数，而里面的那个函数引用了外部函数的变量（函数也是特殊的变量） `执行函数定义就会产生闭包(不用调用闭包内部函数)` 也就是说闭包创建的次数取决于它外部函数调用的次数。 1. 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用) 2. 死亡: 在嵌套的内部函数成为垃圾对象时（null） --> 闭包的 3 个特性 1. 函数嵌套函数 2. 函数内部可以引用外部的参数和变量 3. 参数和变量不会被垃圾回收机制回收使用场景： - 将函数作为另一个函数的返回值 - 将函数作为实参传递给另一个函数调用 - 创建私有变量 - 延长变量的生命周期一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的 - 函数执行完后, 函数内部声明的局部变量是否还存在? 一般是不存在, 存在于闭中的变量才可能存在 - 在函数外部能直接访问函数内部的局部变量吗? 不能, 但我们可以通过闭包让外部操作它 `某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。` 回答： > 闭包的定义其实很简单：函数 `A` 内部有一个函数 `B`，函数 `B` 可以访问到函数 `A` 中的变量，那么函数 `B` 就是闭包 > > 在不同的函数作用域中是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数 ::: ## 6 闭包中的变量为什么不会被回收? 怎么可以让它被回收 ::: details 我们首先来看一个闭包的例子： ```js function foo() { var a = 2 function bar() { console.log(a) } return bar } var baz = foo() baz() // 输出: 2 ``` - `foo` 函数传递出了一个函数 `bar`，传递出来的 `bar` 被赋值给 `baz` 并调用，虽然这时 `baz` 是在 `foo` 作用域外执行的，但 `baz` 在调用的时候可以访问到前面的 `bar` 函数所在的 `foo` 的内部作用域。 - 由于 `bar` 声明在 `foo` 函数内部，`bar` 拥有涵盖 `foo` 内部作用域的闭包，使得 `foo` 的内部作用域一直存活不被回收。一般来说，函数在执行完后其整个内部作用域都会被销毁，因为 `JavaScript` 的 `GC`（Garbage Collection）垃圾回收机制会自动回收不再使用的内存空间。但是闭包会阻止某些 `GC`，比如本例中 `foo()` 执行完，因为返回的 `bar` 函数依然持有其所在作用域的引用，所以其内部作用域不会被回收。 - 注意：如果不是必须使用闭包，那么尽量避免创建它，因为闭包在处理速度和内存消耗方面对性能具有负面影响。 1. 闭包一般会返回一个函数，函数中用到内部声明的变量 2. 返回的函数一般会用变量接收，这个变量就间接引用了函数内部的变量，导致无法回收 3. 解决方法：将接收返回函数的那个变量设置为 null ```js function out() { let person = { name: 'jack', age: 18, } return function () { console.log(person) } // } let sayPerson = out() sayPerson() sayPerson = null ``` 不再使用的对象的内存将会自动回收，这种功能称作垃圾回收。所谓不再使用的对象，指的是没有被任何一个属性（变量）引用的对象。垃圾回收的目的是，使开发者不必为对象的生命周期管理花费太多精力。我们需要做的只是要将不再使用的对象设置 null 即可，这样这个对象就与堆内存断开了，这个对象就操作不了了。 ::: ## 7 讲一下箭头函数 ::: details JavaScript 箭头函数是 ECMAScript 6 中引入的编写函数表达式的一种简便方法。箭头函数使用的一些限制条件 - 箭头函数没有参数对象。如果要用，可以用`Rest`参数代替 - 箭头函数不能与 new 运算符一起使用，因此它不能用作构造函数。 - 箭头函数没有原型属性。 - 箭头函数没有它自己的 this 值，箭头函数中的 this 指向定义时所在的对象，而不是使用时所在的对象（只取决于他外面的第一个不是箭头函数的函数的 `this`） - 不能直接修改箭头函数的 this ```js let fn, barObj = { message: 111 }, fooObj = { message: 222 } function bar() { // 运行时实例 fn.call({ message: 333 }) baz.call({ message: 333 }) } function foo() { // 定义时实例 fn = () => { console.log('输出：', this) // 输出： {message: 222} } } function baz() { console.log('输出：', this) // 输出： {message: 333} } foo.call(fooObj) bar.call(barObj) // 这里如何能修改箭头函数this的指向了，我们可以间接操作。 // 修改箭头函数的this指向定义时外层第一个普通函数的this，来达到我们的目的 ``` - [箭头函数和普通函数的区别](https://blog.csdn.net/weixin_43720095/article/details/113182959) ::: ## 8 讲一下微任务和宏任务 ::: details 因为 js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行栈中的其他任务。当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。任务队列可以分为宏任务队列和微任务队列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务队列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。当微任务队列中的任务都执行完成后再去判断宏任务队列中的任务。微任务包括了 promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver ，async 函数 await`下面`的代码。宏任务包括了 script 脚本的执行、setTimeout ，setInterval ，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染，requestAnimationFrame 等。运行机制： - 执行一个宏任务（栈中没有就从事件队列中获取） - 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中 - 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行） - 当前微任务执行完毕，开始检查渲染，然后 GUI 线程接管渲染 - 渲染完毕后，js 线程继续接管，开始下一个宏任务（从事件队列中获取） ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.2h96wnnu7hw0.png) 整个 Event Loop 的流程图： ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.5ya9yujjh1g0.png) > 执行顺序：**先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。** 1. 为什么要有事件循环机制因为 js 是单线程的，而我们的代码通常都不是全部都是同步代码，而是会有一些异步的机制，这个时候我们就需要一个事件循环机制来实现非阻塞代码的执行。 2. 那你有宏任务就行了，为什么要有微任务呢？为什么要区分出来呢，只有一种任务类型不行吗? 因为在 js 的执行过程中或者页面的渲染过程中，所有的任务它们都是保持着先进先出的原则，我们并不能准确地控制这些事件的被添加整个任务队列中的位置，因为它是完全遵循了先进先出原则，我执行到第一行，我第一行推进去，执行到第二行我第二行推进去。但是如果这个时候我们突然有了非常高优先级的任务，它需要非常尽快地执行，这个时候应该怎么办？如果我们只有宏任务，我只能再往任务队列里推一个，但是它秉持的先进先出的原则，他肯定是最后执行的。所以说只有宏任务是万万不行的，我们有可能要处理一些高优先级的任务，所以引入了微任务的概念。就说当我们有一个微任务，那么在浏览器里它其实是宏任务执行完一遍，我们就去微任务的队列里去把所有已存在的微任务去给他执行一遍，这也是就是引入微任务概念的一个原因。 3. 那么你了解浏览器中的事件循环它的具体的机制是什么？就是整体的一个宏任务执行完一遍之后，那么会把他中途中碰到的微任务添加到微队列里面去了，然后宏任务执行完之后，会去微任务的队列里面去把已经添加进去的微任务给执行一遍。当然如果在微任务队列里面你又碰到了新添加的微任务，那么会继续执行微任务，直到把它执行完成，然后再去执行下一个宏任务。宏任务：是没有使用回调，且又不按照代码的执行顺序执行的任务微任务：首先他也是不按照代码顺序执行的，但是他有回调，比如外面 promise，我们可以反复调用 then **任务的优先级** 宏任务 macrotask：主代码块 > setImmediate > MessageChannel > setTimeout / setInterval (**大部分**浏览器会把**DOM 事件回调优先处理因为要提升用户体验给用户反馈，其次是 network IO 操作的回调，再然后是 UIrender**，之后的顺序就难以捉摸了，其实不同浏览器的表现也不太一样，这里不做过多讨论。) 微任务 microtask：process.nextTick > Promise = MutationObserver 就是说任务执行的顺序是建立与优先级之上的：如果队列已经有一个 setTImeout 的宏任务，后来又加入了主代码的宏任务，会让主代码的的任务插队。 **在当前的微任务没有执行完成时，是不会执行下一个宏任务的。** ::: ## 9 [addEventListener 方法与 on 事件的区别](https://blog.csdn.net/KNIGH_YUN/article/details/80539193?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-11.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-11.control) ::: details 前言：界面上点击一个 button 按钮，button 实际上是被 body“包裹”起来的，body 是被 html“包裹”起来的，html 是被 document“包裹”起来的，document 是被 window“包裹”起来的。所以，在你的鼠标点下去的时候，最先获得这个点击的是最外面的 window，然后经过一系列传递才会传到最后的目标 button，当传到 button 的时候，这个事件又会像水底的泡泡一样慢慢往外层穿出，直到 window 结束。总结： 1. on 事件在同一时间只能指向唯一对象，多次绑定会出现覆盖 2. addEventListener 给一个事件注册多个 listener，可以多次绑定事件 3. addEventListener 对任何 DOM 都是有效的，而 onclick 仅限于 HTML 4. addEventListener 可以控制 listener 的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用 removeEventListener 清除 5. IE9 使用 attachEvent 和 detachEvent on 内联事件是覆盖型，只能使用事件冒泡，`addEventListener`支持多个事件处理程序，并支持事件捕获。 ::: ## 10 说明 JavaScript use strict 有什么用 ::: details use strict 是指严格运行模式，开启了严格运行模式，js 的使用将会收到一定的限制，例如进行禁止 this 指向全局对象，还是有就是禁止使用 with 语句，以及对象不能有重名的属性。设置这种严格模式的目的是为了消除代码使用过程中的一些不安全的使用方式，保证代码运行的安全，也是为了消除 js 本身语法的一些不合理和不严谨的地方。同时使用严格模式可以提高编译的效率，从而提高代码运行的速度。 ::: ## 11 说明 JavaScript 里面的 this 的用法 ::: details this 是执行上下文的一个属性，它指向最后一次调用这个方法的对象。this 的指向可以通过四种调用模式来判断。 1. 函数调用模式，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。 2. 方法调用：函数有所属对象时，通常通过 `.`表达式调用，这时 this 指向所属对象 3. 构造器调用模式：如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象 4. apply 和 call 调用以及 bind 绑定：指向绑定的对象 [this、new、bind、call、apply](http://interview.poetries.top/docs/design-pattern.html#%E4%B8%80%E3%80%81%E5%9F%BA%E7%A1%80%E7%AF%87) ::: ## 12 叙述 Object 对象里面的常用方法 ::: details [参考文章](https://blog.csdn.net/weixin_43932245/article/details/106231536) ::: ## 13 javascript 的 private 属性是怎样实现的 ::: details > 这道题其实不是很懂在问什么 [参考文章](https://www.cnblogs.com/virtual/articles/2992276.html) [参考文章](http://www.manongjc.com/article/69146.html) 函数作用域封装局部变量的方式（闭包）使用 ES6 扩展的类型 symbol 类型定义类中的# 符号 ::: ## 14 如果做到防止用户疯狂点击提交按钮？ ::: details 1. 场景：用户点击一个表单提交按钮，前端会向后台发送一个异步请求，请求还没返回，焦急的用户又多点了几下按钮，造成了额外的请求。有时候多发几次请求最多只是多消耗了一些服务器资源，而另外一些情况是，表单提交本身会修改后台的数据，那多次提交就会导致意料之外的后果了。无论是为了减少服务器资源消耗还是避免多次修改后台数据，给表单提交按钮添加点击限制是很有必要的。 2. 解决办法：最常用的办法就是打一个标记，即在响应函数所在的作用域声明一个布尔变量 lock，响应函数被调用时，首先要判断 lock 的值，为 true 则表示上一次的请求结果还没有返回，这个时候点击提交按钮是无效的，为 false 则将 lock 设置为 true，然后发送请求，请求结束之后将 lock 改为 false 3. 闭包实现（防止污染函数所在的作用域） ```js let clickButton = (function () { let lock = false return function (postParams) { if (lock) return lock = true //发送请求 axios .post('url', postParams) .then( //表单提交成功 () => { console.log('提交成功') } ) .catch((error) => { console.log('提交错误', error) }) .finally(() => { lock = false console.log('修改成功') }) } })() ``` ::: ## 15 介绍一下 ES6 的 Proxy ::: details [Proxy 的理解](https://mp.weixin.qq.com/s/rIqznB3WXT6M4T0YQb6CQA) ::: ## 16 说说你对 Javascript 中作用域的理解? ::: details [参考文章](https://mp.weixin.qq.com/s/mjT4U6SPF_Ika2rVZOV-Ag) 1. 作用域作用域，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合换句话说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期 2. 分类 - 全局作用域 - 函数作用域 - 块级作用域 3. 全局作用域任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问 4. 函数作用域函数作用域也叫局部作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问，不能在函数以外去访问 5. ES6 引入了`let`和`const`关键字,和`var`关键字不同，在大括号中使用`let`和`const`声明的变量存在于块级作用域中。在大括号之外不能访问这些变量 6. 词法作用域词法作用域，又叫静态作用域，变量被创建时就确定好了，而非执行阶段确定的。也就是说我们写好代码时它的作用域就确定了，`JavaScript` 遵循的就是词法作用域 7. 作用域链当在`Javascript`中使用一个变量的时候，首先`Javascript`引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域如果在全局作用域里仍然找不到该变量，它就会在`全局范围内隐式声明该变量(非严格模式下)`或是直接报错 ::: ## 17 JavaScript 继承的方式 ::: details 一共六种方式原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。这部分可以看红宝书第四版 P238-249 ## 17.1 原型链继承 1. 套路 1. 定义父类型构造函数 2. 给父类型的原型添加方法 3. 定义子类型的构造函数`创建父类型的实例对象赋值给子类型的原型` Sub.prototype = new Supper() 4. 让子类型的原型的 constructor 指向子类型` Sub.prototype.constructor = Sub 5. .给子类型原型添加方法 6. 创建子类型的对象: 可以调用父类型的方法 2. 关键 `使子类型的原型成为为父类型的一个实例对象` `Sub.prototype = new Super()` ```js function Animal() { this.colors = ['black', 'while'] } Animal.prototype.getColor = function () { return this.colors } function Dog() {} //使子类型的原型成为为父类型的一个实例对象 Dog.prototype = new Animal() let dog1 = new Dog() dog1.colors.push('brown') console.log(dog1.colors) //["black", "while", "brown"] let dog2 = new Dog() console.log(dog2.getColor()) //["black", "while", "brown"] let animal = new Animal() console.log(animal.colors) //["black", "while"] ``` 原型链继承存在的问题： - 问题 1：原型中包含的引用类型属性将被所有实例共享； - 问题 2：子类在实例化的时候不能给父类构造函数传参； ## 17.2 借用构造函数实现继承 1. 套路: 1. 定义父类型构造函数 2. 定义子类型构造函数 3. 在子类型构造函数中调用父类型构造 2. 关键: 在子类型构造函数中通用 call()调用父类型构造函数 ```js //在子类型构造函数内部调用超类型构造函数； //使用apply或call方法将对象的构造函数绑定在子对象上 function Animal(name) { //定义引用类型值的属性 this.colors = ['black', 'while'] this.name = name this.getColors = function () { return this.colors } } function Dog(name) { //继承Animal，在这里还可以给父类型构造函数传参 Animal.call(this, name) } //通过使用apply或者call方法，我们实际上是在将要创建的Dog实例的环境下调用了Animal的构造函数， //这样一来就会在新Dog对象上执行Animal函数中定义的所有对象初始化代码，结果Dog每个实例都会有自己的color属性的副本了 let dog1 = new Dog() dog1.colors.push('brown') console.log(dog1.colors) //["black", "while", "brown"] let dog2 = new Dog() console.log(dog2.getColors()) //["black", "while"] let animal = new Animal() console.log(animal.colors) //["black", "while"] ``` 通过使用 apply 或者 call 方法，我们实际上是在将要创建的 Dog 实例的环境下调用了 Animal 的构造函数，这样一来就会在新 Dog 对象上执行 Animal 函数中定义的所有对象初始化代码，结果 Dog 每个实例都会有自己的 color 属性的副本了借用构造函数实现继承解决了原型链继承的 2 个问题：引用类型共享问题以及传参问题。但是由于方法必须定义在构造函数中，所以会导致每次创建子类实例都会创建一遍方法，函数复用就无法无法实现了。而且，在父类型的原型中定义的方法，对于子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。 ## 17.3 组合继承（最常用）套路: 自定义构造函数, `属性`在函数中初始化, `方法`添加到原型上组合继承结合了原型链和盗用构造函数，将两者的优点集中了起来。基本的思路是`使用原型链继承原型上的属性和方法，而通过调用构造函数继承实例属性`。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。而且组合继承保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力 ```js //将原型链和借用构造函数的技术组合到一块，使用原型链实现对原型属性和方法的继承 //而通过借用构造函数来实现对实例属性的继承 //这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有自己的属性。 function Animal(name) { this.name = name this.colors = ['black', 'white'] } Animal.prototype.getName = function () { return this.name } function Dog(name, age) { //借助构造函数来实现继承 Animal.call(this, name) //第二次调用Animal this.age = age } //原型链的继承方法 Dog.prototype = new Animal() //第一次调用Animal //修正constructor属性 Dog.prototype.constructor = Dog Dog.prototype.getAge = function () { return this.age } let dog1 = new Dog('Tom', 3) dog1.colors.push('brown') console.log(dog1.colors) ////["black", "white", "brown"] console.log(dog1.getAge()) //3 console.log(dog1.getName()) //Tom let dog2 = new Dog('jerry', 5) console.log(dog2.colors) // ["black", "white"] console.log(dog2.getAge()) //5 console.log(dog2.getName()) //jerry ``` 缺点：无论在什么情况下，都会调用两次父类型构造函数：一次是在创建子类型原型的时候，一次是在子类型构造函数内部 ## 17.4 原型式继承注意：是**原型式**继承，不是**原型链**继承该方法的原理是创建一个构造函数，构造函数的原型指向对象，然后调用 new 操作符创建实例，并返回这个实例，本质是一个浅拷贝。伪代码如下： ```js function object(obj) { function F() {} F.prototype = obj return new F() } ``` 使用场合：没必要构建构造函数，仅仅是想模拟一个对象的时候缺点： - 无法向父类构造函数传参 - 如果父类是构造函数，无法继承父类构造函数中的属性，只能继承父类构造函数的原型对象的属性 - 如果父类是普通对象，引入类型属性依然被子实例共享 ## 17.5 寄生式继承创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，然后返回这个对象。伪代码如下： ```js function createPerson(original) { var clone = Object.create(original) //通过调用函数来创建一个新的对象 clone.sayGood = function () { alert('hello world') } return clone } ``` 适用于关注对象，而不在乎类型和构造函数的场景，和构造函数模式类似，做不到函数复用。 ## 17.6 寄生组合式继承组合继承已经相对完善了，但还是存在问题，它的问题就是调用了 2 次父类构造函数，第一次是在 new Animal()，第二次是在 Animal.call() 这里。所以解决方案就是`不直接调用父类构造函数给子类原型赋值，而是通过创建空函数 F 获取父类原型的副本。` 寄生式组合继承写法上和组合继承基本类似，区别是如下这里：new 父类的方式用另一种方式来替代 ```js - Dog.prototype = new Animal() - Dog.prototype.constructor = Dog + function F() {} + F.prototype = Animal.prototype + let f = new F() + f.constructor = Dog + Dog.prototype = f ``` 稍微封装下上面添加的代码后：这个 inheritPrototype（）函数实现了寄生组合继承的逻辑，这个函数接收两个参数，子类构造函数和父类构造函数。在函数内部，第一步就是父类原型的一个副本，然后给返回的的 prototype 对象设置 constructor 属性，解决由于重写默认 constructor 丢失的问题。最后把这个新创建的对象赋值给子类型的原型即可。伪代码如下： ```js function object(o) { function F() {} F.prototype = o return new F() } function inheritPrototype(child, parent) { //let prototype =Object.create(parent.prototype) let prototype = object(parent.prototype) //创建对象 prototype.constructor = child child.prototype = prototype //赋值对x } inheritPrototype(Dog, Animal) ``` [JavaScript6 种继承的方式](https://www.cnblogs.com/Leophen/p/11401734.html) 缺点：子类型原型上的方法拿不到了，因为对子类型的原型进行了重写。所以要注意如果需要对子类型的 prototype 上添加方法，要放在重写之后。 ::: ## 18 什么是防抖和节流？有什么区别？如何实现？ ::: details 防抖：触发高频事件后 n 秒内只会执行一次，如果 n 秒内高频事件再次被触发，那么就重新计算时间当我连续不断输入时，不会发送请求；当我一段时间内不输入了，才会发送一次请求；如果小于这段时间继续输入的话，时间会重新计算，也不会发送请求。解决思路：每次触发事件时都取消之前的延时调用方法防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。最后一个人说了算 - setTimeout()方法的返回值是一个唯一的数值，这个数值有什么用呢？如果你想要终止 setTimeout()方法的执行，那就必须使用 clearTimeout()方法来终止，而使用这个方法的时候，系统必须知道你到底要终止的是哪一个 setTimeout()方法(因为你可能同时调用了好几个 setTimeout()方法)，这样 clearTimeout()方法就需要一个参数，这个参数就是 setTimeout()方法的返回值(数值)，用这个数值来唯一确定结束哪一个 setTimeout()方法。 ```js // fn是用户传入需要防抖的函数 // wait是等待时间 const debounce = (fn, wait) => { // 缓存一个定时器id let timer = null return function (...args) { // 这里返回的函数是每次用户实际调用的防抖函数 // 如果已经设定过定时器了就清空上一次的定时器 // 开始一个新的定时器，延迟执行用户传入的方法 //setTimeout() 方法的返回值是一个唯一的数值.通常用于清除定时器 if (timer) clearTimeout(timer) timer = setTimeout(() => { fn.apply(this, args) }, wait) } } const better_Resize = debounce(() => { console.log('触发了滚动事件') }, 1000) window.addEventListener('resize', better_Resize) ``` 节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率 - 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动 - 缩放场景：监控浏览器`resize` - 动画场景：避免短时间内多次触发动画引起性能问题解决思路：每次触发事件时都判断当前是否有等待执行的延时函数 throttle 的中心思想在于：在某段时间内，不管你触发了多少次回调，我都只认第一次，并在计时结束时给予响应。第一个人说的算 ```js const throttle = (fn, wait) => { //上一次执行的时间 let lastTime = 0 return function (...args) { //当前时间 let now = +new Date() // 将当前时间和上一次执行函数时间对比 // 如果差值大于设置的等待时间就执行函数 if (now - lastTime > wait) { lastTime = now fn.apply(this, args) } } } setInterval( throttle(() => { console.log(1) }, 3000), 1 ) ``` 详细资料可以参考： [老生常谈防抖节流](https://mp.weixin.qq.com/s/HVkV7F1U77GvXbEI9MWA6g)[《轻松理解 JS 函数节流和函数防抖》](https://juejin.im/post/5a35ed25f265da431d3cc1b1) [《JavaScript 事件节流和事件防抖》](https://juejin.im/post/5aa60b0e518825556b6c6d1a) [《JS 的防抖与节流》](https://juejin.im/entry/5b1d2d54f265da6e2545bfa4) ::: ## 19 深拷贝和浅拷贝 ::: details `JavaScript`中存在两大数据类型： - 基本类型 - 引用类型基本类型数据保存在在栈内存中引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中 1. 浅拷贝浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址在`JavaScript`中，存在浅拷贝的现象有： - `Object.assign`（只有一层对象是为浅拷贝，对象中的元素是引用类型的元素为浅拷贝） - `Array.prototype.slice()`, `Array.prototype.concat()` - 使用扩展运算符实现的复制这里要说明的一点是扩展运算符(…)是看似是深拷贝，其实是浅拷贝 1. 如果只是一层数组或是对象，其元素只是简单类型的元素，那么属于深拷贝（就是一层拷贝，暂时就理解为深拷贝吧！！！！） ```js let aa = { age: 18, name: 'aaa', } let bb = { ...aa } bb.age = 22 console.log(aa.age) // 18 ``` 2. 如果数组或对象中的元素是引用类型的元素，那么就是浅拷贝 ```js let aa = { age: 18, name: 'aaa', address: { city: 'shanghai', }, } let bb = { ...aa } bb.address.city = 'shenzhen' console.log(aa.address.city) // shenzhen ``` 所以总的来说对象的扩展运算符(…)是浅拷贝。类似的还有`Object.assign`，`Array.prototype.slice()`, `Array.prototype.concat()` ```js //Object.assign var obj = { age: 18, nature: ['smart', 'good'], names: { name1: 'fx', name2: 'xka', }, love: function () { console.log('fx is a great girl') }, } var newObj = Object.assign({}, obj) console.log(newObj) //hello // obj.names.name1 = "hello"; //马上改变了 setTimeout(() => { //三秒变化 console.log('hello') obj.names.name1 = 'hello' }, 3000) console.log(newObj) //hello ``` ```js //Array.prototype.slice() const arr1 = ['One', 'Two', 'Three', { a: 2 }] const arr2 = arr1.slice(0) arr2[1] = 'love' arr1[3].a = 'hello' console.log(arr1) // ["One", "Two", "Three",{a:hello}] console.log(arr2) // ["One", "love", "Three",{a:hello}] ``` ```js //Array.prototype.concat() const arr1 = ['One', 'Two', 'Three', { a: 2 }] const arr2 = arr1.concat() arr2[1] = 'love' arr1[3].a = 'hello' console.log(arr1) // ["One", "Two", "Three",{a:hello}] console.log(arr2) // ["One", "love", "Three",{a:hello}] ``` 简单实现一个浅拷贝：（浅拷贝是拷贝一层） ```js function shallowClone(obj) { const newObj = {} for (let prop in obj) { //判断当前是否有这个属性 if (obj.hasOwnProperty(prop)) { newObj[prop] = obj[prop] } } return newObj } var obj = { a: 1, arr: [2, 3] } var shallowObj = shallowClone(obj) console.log(obj.arr[1]) //3 shallowObj.arr[1] = 5 console.log(obj.arr[1]) //被影响了，5 ``` 2) 深拷贝开辟一个新的栈，两个对象属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性常见的深拷贝方式有： - \_.cloneDeep() lodash 的使用方法，使用方法可以看[lodash 的中文文档](https://www.lodashjs.com/) - jQuery.extend() - JSON 转换：JSON.stringify()、JSON.parse 缺点：（1）会忽略`undefined`、`symbol`和`函数` （2）无法拷贝 copyObj 对象原型链上的属性和方法（3）当数据的层次很深，会栈溢出 - 手写循环递归缺点：（1）无法保持引用（2）当数据的层次很深，会栈溢出 ```js //_.cloneDeep() //Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。 //首先引入lodash ; const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3], } const obj2 = _.cloneDeep(obj1) console.log(obj1.b.f === obj2.b.f) // false ``` ```js const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3], } const obj3 = obj1 console.log(obj1.b.f === obj3.b.f) //true 浅拷贝指向同一内存 const obj2 = $.extend(true, {}, obj1) console.log(obj1.b.f === obj2.b.f) // false 深拷贝指向不同内存 ``` ```js //JSON转换 const obj = { name: 'A', name1: undefined, name3: function () {}, name4: Symbol('A'), } const obj2 = JSON.parse(JSON.stringify(obj)) //忽略undefined、symbol和函数 console.log(obj2) // {name: "A"} ``` ```js //手写循环 function deepClone(obj, hash = new WeakMap()) { // 如果是null或者undefined我就不进行拷贝操作 if (obj === null) return obj if (obj instanceof Date) return new Date(obj) if (obj instanceof RegExp) return new RegExp(obj) //不是对象，则返回 if (typeof obj != 'object') return obj //如果是对象的话进行深拷贝 if (hash.get(obj)) return hash.get(obj) let cloneObj = new obj.constructor() //找到的是所属类圆型上的constructor,而原型上的constructor指向的是当前类的本身 hash.set(obj, cloneObj) for (let key in obj) { if (obj.hasOwnProperty(key)) { //递归拷贝 cloneObj[key] = deepClone(obj[key], hash) } } return cloneObj } var obj = { a: 1, arr: [2, 3] } var shallowObj = deepClone(obj) console.log(obj.arr[1]) //3 shallowObj.arr[1] = 5 console.log(obj.arr[1]) //3 没有被影响 ``` 3. 如何区分深拷贝与浅拷贝简单点来说，就是假设 B 复制了 A，当修改 A 时，看 B 是否会发生变化，如果 B 也跟着变了，说明这是浅拷贝，拿人手短，（当然，修改这种情况修改 B，A 也会发生改变），如果 B 没变，那就是深拷贝，自食其力，这里注意一下，通常深拷贝指针会较为复杂的引用类型，也就是 object 类型。向 let a= 1；b=a；这种基本数据类型，虽然 b 不受 a 的影响，但也算不上深拷贝。下面这张图可以看出深拷贝和浅拷贝的区别 ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.3q345inxg540.png) 从上图发现，浅拷贝和深拷贝都创建出一个新的对象，但在复制对象属性的时候，行为就不一样 - 浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象 - 但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象总结： 1. 浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一个地址 2. 深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同的地址 3. 使用场景：实际开发中是非常有用的，后台返回了一堆数据，你需要对这堆数据做操作，但多人开发情况下，你是没办法明确这堆数据是否有其它功能也需要使用，直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，根据实际情况来使用深拷贝，也就是说：想对某个数组或对象的值进行修改，但是又要保留原来数组或对象的值不被修改，此时就可以用深拷贝来创建一个新的数组或对象，从而达到操作(修改)新的数组或对象时，保留原来数组或对象。参考文章： [深拷贝与浅拷贝的区别，实现深拷贝的几种方法](https://www.cnblogs.com/echolun/p/7889848.html) [深拷贝浅拷贝的区别？如何实现一个深拷贝？](https://mp.weixin.qq.com/s/m0alHaSzbKr7BJCdakPuqQ) ::: ## 20 事件捕获与事件冒泡问题 ::: details 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的`相同事件`也会被触发在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过`事件对象`来取消冒泡可以将事件对象的`cancelBubble`设置为 true，即可取消冒泡假设 DOM 结构为： `

` JS 代码为： document.getElementById('a').addEventListener('click', e => {console.log(1)}); document.getElementById('b').addEventListener('click', e => {e.preventDefault();console.log(2)}); 当点击 id 为 b 的 div 时，控制台输出的内容是：2 1 解析：在 JS 中，绑定的事件**默认**的执行时间是在冒泡阶段执行，而非在捕获阶段，这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件 **几个常见的事件的方法** （红宝书 4 P499） - preventDefault() 取消事件默认行为，如阻止点击提交按钮时对表单的提交（本题中 click 并没有什么默认行为）,只有 cancelable 为 true 时才能调用那个这个方法 - stopImmediatePropagation() 取消后续所有的事件冒泡和事件捕获同时阻止当前节点上的事件处理程序被调用，影响当前的事件 - stopPropagation() 取消后续所有的事件冒泡和事件捕获，不影响事件，bubbles 为 true 时才可以调用 - cancelBubbe() 取消事件默认行为按照 W3C 的标准，是先捕获，再冒泡。但是 addEventListener 的第三个参数是用来设置回调函数是在捕获时触发，还是在冒泡时触发，默认为 false，即冒泡时触发，也就是说上面两个回调函数先执行第二个，再执行第一个。但是有一点需要注意：虽然 W3C 标准是先执行捕获，再执行冒泡，但这是对多个元素而言的。如果对一个元素的某个事件同时设置了捕获和冒泡，那么具体的执行顺序和事件的注册顺序是一样的，谁先注册，谁先执行，我想是和事件循环有关。 _element_.addEventListener(_event_, _function_, _useCapture_)： | 参数 | 描述 | | :----------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------- | | _event_ | 必须。字符串，指定事件名。 **注意:** 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。 | | _function_ | 必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 | | _useCapture_ | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行 | 参考文章： [JS 事件冒泡、事件捕获、事件委托、事件模型](https://www.jianshu.com/p/a9b8a433eb71) [浅淡事件冒泡、事件捕获和事件委托](https://www.cnblogs.com/geter/p/12434750.html) 常见不支持冒泡事件有： ①focus ②blur ③[onmouseover](https://www.runoob.com/tags/ev-onmouseover.html) ④[onmouseout](https://www.runoob.com/tags/ev-onmouseout.html) ⑤load ⑥unload ⑦resize 常见支持冒泡事件有： ①click ②scroll ::: ## 21 什么是事件委托（事件代理） ::: details 事件委托是 JavaScript 中绑定事件的常用技巧，顾名思义就是把原来要绑定的事件委托给父元素，让父元素负责事件监听。事件委托的原理是 DOM 元素的事件冒泡。使用事件委托的好处是可以提高性能。事件的委派 - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。 - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 [解释下什么是事件代理？应用场景？](https://mp.weixin.qq.com/s/p9UEUN8GB2-kMRL52714Dg) ::: ## 22 js 有哪些数据类型？他们之间有什么关联 ::: details [js 数据类型有哪些？这些 js 数据类型之间是如何转换的？](https://www.gxlcms.com/JavaScript-253169.html) ::: ## 23 let const var 的区别 ::: details 在 ES5 中，顶层对象属性和全局变量是等价的，var 命令和 function 命令声明的全局变量自然也是顶层的对象在 ES6 中，var 命令和 function 命令声明的全局变量，依然是顶层对象的属性，但 let 命令，const 命令和 class 命令声明的全局变量不是顶层对象的属性通过打断点进行查看时，在全局作用域中，用 let 和 const 声明的全局变量并没有在全局对象中，只是在一个块级作用域（Script）中既然不属于顶层对象，那就不需要加 window 或者 global 直接可以在定义变量的块级作用域中就能获取到所以 const 和 let 会块级作用域，下面的两个定义可以理解为 ```js let a = 10 const b = 20 /* (function(){ let a = 10; const =b = 20 })()*/ console.log(window.a) //undefined console.log(window.b) // //undefined console.log(a) //10 console.log(b) //20 ``` 详细回答 > 1. var 变量提升 const let 没有 > 2. let 和 const 不允许重复赋值， var 声明的变量，由于声明的提升，JavaScript 引擎会自动将多余的声明在作用域顶部合并成一个声明，而 let 声明是块级的，所以不可能检查前面是否已经使用过用 let 声明的同名变量了 > 3. let const 是块作用域， var 是函数作用域 > 4. const 在声明的时候要赋初始值，且不能被修改 > 5. let 和 const 在全局作用域中声明的变量不会成为一个 window 的属性，而 var 声明的变量会 > 6. for 循环渗透 let 每一个迭代 JavaScript 引擎都会声明一个新的变量 ::: ## 24 数据，变量，内存的联系 ::: details - 什么是数据? - 在内存中可读的, 可传递的保存了特定信息的'东西' - 一切皆数据, 函数也是数据 - 在内存中的所有操作的目标: 数据 - 什么是变量? - 值可以变化的量, 由变量名与变量值组成 - 一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容 - 什么是内存? - 内存条通电后产生的存储空间(临时的) - 产生和死亡: `内存条(集成电路板) ==> 通电 ==> 产生一定容量的存储空间 ==> 存储各种数据 ==>断电==>内存全部消失` 内存的空间是临时的, 而硬盘的空间是持久的 - 一块内存包含 2 个方面的数据 - 内部存储的数据 - 地址值数据 - 内存空间的分类 - 栈空间: 全局变量和局部变量 - 堆空间: 对象 - 内存,数据, 变量三者之间的关系 - 内存是一个容器, 用来存储程序运行需要操作的数据 - 变量是内存的标识, 我们通过变量找到对应的内存, 进而操作(读/写)内存中的数据问题: JS 引擎如何管理内存? 1. 内存生命周期 - 分配需要的内存 - 使用分配到的内存 - 不需要时将其释放/归还 2. 释放内存 - 为执行函数分配的栈空间内存: 函数执行完自动释放 - 存储对象的堆空间内存: 当内存没有引用指向时, 对象成为垃圾对象, 垃圾回收器后面就会回收释放此内存 ::: ## 25 var 作用域问题 ::: details 问题：var 提升作用域是提升到哪一层？声明会被提升，赋值语句还是留在原地不会被提升，如果是在函数作用域会提升到函数体顶部，在全局作用域的话就是全局空间顶部 **使用 var 在函数或全局内任何地方声明变量相当于在其内部最顶上声明它，这种行为称为 Hoisting（提升）。** 比较注意一点是此提升只是把声明提升上来，而赋值操作还是在原先的位置。 **声明会提升到函数或全局内的最顶部**，那么其变量的作用域就相当于整个函数或全局。注意一下函数声明提升：通过 function 声明的函数, 在之前就可以直接调用，例如 ```js fn('fn') //this is a function fn function fn(name) { console.log('this is a function', name) } ``` 但是通过 var 定义的例如 var fn = function （）{} 这就不可以提前使用了但可以输出 fn，会出现 undefined ```js console.log(fn) //undefined fn('fn') //TypeError: fn is not a function var fn = function (name) { console.log('this is a function', name) } ``` ::: ## 26 new 操作的原理 ::: details ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.6zgayaso00g0.png) [说说 new 操作符具体都干了什么？](https://mp.weixin.qq.com/s/7XcetC-3ksYAl2OShuw7CA) - 创建一个新的对象`obj` - 将对象与构建函数通过原型链连接起来 - 将构建函数中的`this`绑定到新建的对象`obj`上 - 根据构造函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理 ::: ## 27 JavaScript 中的函数参数 argument 是数组吗？ ::: details argument 虽然有数组的性质，但并非是真正的数组，它只是一个类数组的对象，没有数组的方法，不能向真正的数组那样调用`.join`、`.concat`、`.pop`等方法 ::: ## 28 js == 和 === 的区别 ::: details 对于 `==` 来说，如果对比双方的类型不一样的话，就会进行类型转换 **假如我们需要对比 x 和 y 是否相同，就会进行如下判断流程** 1. 首先会判断两者类型是否相同。相同的话就是比大小了 2. 类型不相同的话，那么就会进行类型转换 3. 会先判断是否在对比 `null` 和 `undefined`，是的话就会返回 `true` 4. 判断两者类型是否为 `string` 和 `number`，是的话就会将字符串转换为 `number` 5. 判断其中一方是否为 `boolean`，是的话就会把 `boolean` 转为 `number` 再进行判断 6. 判断其中一方是否为 `object` 且另一方为 `string`、`number` 或者 `symbol`，是的话就会把 `object` 转为原始类型再进行判断例如 ```js let obj = ['18'] console.log(obj == 18) //true ``` 因为会先调用对象方法中的`valueOf()`方法，得到原始值，然后再进行比较注意如果 ```js let obj = { age: 18 } console.log(obj == 18) //false let a = {} let b = '' console.log(a == b) //false ``` 如果不是数组对象，一般都是不相等的 7. 双方都是·`object`则不会进行转换，而是比较器是否是同一个对象，如果两个操作数都指向同一个对象，则相等操作符返回`true`，否则返回`false` ```js let a = {} let b = {} let c = a console.log(a == b) //false //分别属于两个对象 console.log(a === b) //false console.log(a == c) //true //指向同一个对象 console.log(a === c) //true ``` 对于 `===` 来说就简单多了，就是判断两者类型和值是否相同 ::: ## 29 请指出 split()，join 函数的区别 ::: details split()将字符串分割成数组，是有关于字符串的方法；join()，将数组转换为字符串，是有关数组的方法对数组执行 join 函数，然后通过参数分分隔符字符串将它们连接起来，从而返回一个字符串，对字符串执行 split 函数，然后将参数分隔符处将其断开，返回一个数组简单来说，split()将一个字符串（根据某个分隔符字符串）切割成若干个字符串并存放在一个数组里。而 join()，把数组中的字符串连成一个长串，可以认为它是 split()的逆操作。 ```js console.log('fjsfolisfle'.split('')) console.log('fjsolisfle'.split('f')) let arr = [1, 5, 9, 'jlsf', 'skdkd', 53] console.log(arr.join('a')) console.log(arr.join('')) ``` ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.23w3hdm5hue8.png) ::: ## 30 typeof NaN 的结果是什么？ ::: details NaN 意指“不是一个数字”（not a number），NaN 是一个“警戒值”（sentinel value，有特殊用途的常规值），用于指出数字类型中的错误情况，即“执行数学运算没有成功，这是失败后返回的结果”。 `typeof NaN; // "number"` NaN 是一个特殊值，它和自身不相等，是唯一一个非自反（自反，reflexive，即 x === x 不成立）的值。而 NaN != NaN 为 true。 ::: ## 31 isNaN 和 Number.isNaN 函数的区别？ ::: details 函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，这种方法对于 NaN 的判断更为准确。 isNaN 方法首先转换类型，而 Number.isNaN 方法不用； isNaN 不能用来判断是否严格等于 NaN，Number.isNaN 方法可用 ::: ## 32 谈谈 This 对象的理解 ::: details 在定义函数时, this 还没有确定, 只有在执行时才动态确定(绑定)的 this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。 1. 第一种是函数调用模式，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。 2. 第二种是方法调用模式，如果一个函数作为一个对象的方法来调用时，this 指向这个对象。 3. 第三种是构造器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。 4. 第四种是 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。其中 apply 方法接收两个参数：一个是 this 绑定的对象，一个是参数数组。call 方法接收的参数，第一个是 this 绑定的对象，后面的其余参数是传入函数执行的参数。也就是说，在使用 call() 方法时，传递给函数的参数必须逐个列举出来。bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了`使用 new`时会被改变，其他情况下都不会改变。这四种方式，使用构造器调用模式的优先级最高，然后是 apply 、 call 和 bind 调用模式，然后是方法调用模式，然后是函数调用模式。 - 在最外层代码中，this 引用的是全局对象。 - 在函数内，this 根据函数调用方式的不同而有所不同： | 函数调用的方式 | this 引用的对象 | | ------------------------ | ------------------ | | 构造函数 | 所生成的对象 | | apply call bind 调用 | 参数指定的对象 | | 调用对象的方法 | 当前的对象 | | 其他方法调用（直接调用） | 全局对象（window） | [《JavaScript 深入理解之 this 详解》](http://cavszhouyou.top/JavaScript深入理解之this详解.html) ::: ## 33 对于 JSON 的了解？ ::: details JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。在项目开发中，我们使用 JSON 作为前后端数据交换的方式。在前端我们通过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。因为 JSON 的语法是基于 js 的，因此很容易将 JSON 和 js 中的对象弄混，但是我们应该注意的是 JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，比如说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，因此大多数的 js 对象是不符合 JSON 对象的格式的。在 js 中提供了两个函数来实现 js 数据结构和 JSON 格式的转换处理，一个是 JSON.stringify 函数，通过传入一个符合 JSON 格式的数据结构，将其转换为一个 JSON 字符串。如果传入的数据结构不符合 JSON 格式，那么在序列化的时候会对这些值进行对应的特殊处理，使其符合规范。在前端向后端发送数据时，我们可以调用这个函数将数据对象转化为 JSON 格式的字符串。另一个函数 JSON.parse() 函数，这个函数用来将 JSON 格式的字符串转换为一个 js 数据结构，如果传入的字符串不是标准的 JSON 格式的字符串的话，将会抛出错误。当我们从后端接收到 JSON 格式的字符串时，我们可以通过这个方法来将其解析为一个 js 数据结构，以此来进行数据的访问。详细资料可以参考： [《深入了解 JavaScript 中的 JSON 》](https://my.oschina.net/u/3284240/blog/874368) ::: ## 34 documen.write 和 innerHTML 的区别？ ::: details document.write 的内容会代替整个文档内容，会重写整个页面。 innerHTML 的内容只是替代指定元素的内容，只会重写页面中的部分内容。 ::: ## 35 Object.is() 与原来的比较操作符 `===`、`==` 的区别？ ::: details 使用双等号进行相等判断时，如果两边的类型不一致，则会进行强制类型转化后再进行比较。使用三等号进行相等判断时，如果两边的类型不一致时，不会做强制类型准换，直接返回 false。使用 Object.is 来进行相等判断时，一般情况下和三等号的判断相同，它处理了一些特殊的情况，比如 -0 和 +0 不再相等，两个 NaN 认定为是相等的。 ::: ## 36 js 的事件循环是什么？ ::: details 因为 js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当异步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。任务队列可以分为宏任务对列和微任务队列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务队列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。当微任务队列中的任务都执行完成后再去判断宏任务队列中的任务。微任务包括了 promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver。宏任务包括了 script 脚本的执行、setTimeout ，setInterval ，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染等。事件循环机制： 1. 所有代码分类 - 初始化执行代码(同步代码): 正常的代码，包含绑定 dom 事件监听, 设置定时器, 发送 ajax 请求的代码 - 回调执行代码(异步代码): 处理回调逻辑 2. js 引擎执行代码的基本流程: 初始化代码===>回调代码 3. 模型的 2 个重要组成部分: - 事件(定时器/DOM 事件/Ajax)管理模块 - 回调队列 4. 模型的运转流程执行初始化代码, 将事件回调函数交给对应模块管理当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行 ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%A8%A1%E5%9E%8B.5s8kmlrj93k0.png) 注意三点： 1. 定时器管理模块是在计时结束之后才将事件加入到回调函数的队列中的 2. DOM 操作的回调函数是在实际触发之后才加到回调函数的队列中的 3. 回调函数必须要在主线程的代码执行完毕之后才会执行（初始化代码执行完后）【放回执行栈里执行】一些概念：执行栈（execution stack）：所有的代码都是在此空间中执行的（回调函数也是，从任务队列中循环取出回调函数放入执行栈中处理(一个接一个)） ::: ## 36 判断数组的几种方式? ::: details ```js let obj = [1, 2, 3, [1, 2]] // 1. 通过原型链判断 console.log(obj.__proto__ === Array.prototype) //true; // 2. 通过ES6的Array.isArray console.log(Array.isArray(obj)) //true //3. 通过instanceof判断 console.log(obj instanceof Array) //true //4 通过Array.prototype.isPrototypeOf(obj) console.log(Array.prototype.isPrototypeOf(obj)) //true // 5 通过Object.prototype.toString.call()做判断 //console.log(Object.prototype.toString.call(obj));//[object Array] console.log( Object.prototype.toString.call(obj).split(' ')[1].split(']')[0] === 'Array' ) //true console.log(Object.prototype.toString.call(obj).slice(8, -1) === 'Array') ``` ::: ## 37 [JavaScript 数组的常用方法有哪些？](https://mp.weixin.qq.com/s/XokYZKcnnPE_MSRMsnU1IA) ::: details 1. 增：前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响 - push()：`push()`方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度 - unshift()：unshift()在数组开头添加任意多个值，然后返回新的数组长度 - splice()：传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，如果仅删除元素，则返回删除元素的数组。如果未删除任何元素，则返回空数组。 - concat()：传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。 2. 删前三种都会影响原数组，最后一项不影响原数组： - pop()：`pop()` 方法用于删除数组的最后一项，同时减少数组的`length` 值，返回被删除的项 - shift()：`shift()`方法用于删除数组的第一项，同时减少数组的`length` 值，返回被删除的项 - splice(): 传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组 - slice(): 用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组 3. 改即修改原来数组的内容，常用`splice` 传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组，对原数组产生影响 4. 查即查找元素，返回元素坐标或者元素值 - indexOf()：返回要查找的元素在数组中的位置，如果没找到则返回-1 - includes()：返回要查找的元素在数组中的位置，找到返回`true`，否则`false` - find()：返回第一个匹配的元素 5. 排序方法：数组有两个方法可以用来对元素重新排序： - reverse()：将数组反方向排序 - sort()：sort()方法接受一个比较函数，用于判断哪个值应该排在前面 6. 转换方法 join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串 7. 迭代方法 8. 常用来迭代数组的方法（都不改变原数组）有如下： - some() - every() - forEach() - filter() - map() ::: ## 38 数组的类型为什么是 object ::: details 数组对象的原型链顶端是 Object 对象(超类对象),数组对象可以使用 Object 对象的属性和方法,数组是 Object 对象的子集,再一次说明数组是对象 ::: ## 39 Set 和 Map WeakMap WeakSet ::: details `Map结构的key是有序的。普通Object的key是无序的。`Map 会维护键值对的插入顺序，因此可以根据插入顺序进行一些迭代操作。 Set 和 Map 都是 ES6 中新增的数据结构，是对当前 JS 数组和对象这两种重要数据结构的扩展。由于是新增的数据结构，目前尚未被大规模使用，但是作为前端程序员，提前了解是必须做到的。先总结一下两者最关键的地方： - Set 类似于数组，但数组可以允许元素重复，Set 不允许元素重复 - Map 类似于对象，但普通对象的 key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型当使用 `Map` 或 `Set` 存储对象时，同 `Object` 一致都是强引用，如果不将其主动清除引用，其同样会造成内存不自动进行回收。如果使用 `Map` ，对于键为对象的情况，可以采用 `WeakMap`，`WeakMap` 对象同样用来保存键值对，对于键是弱引用（注：`WeakMap` 只对于键是弱引用），且必须为一个对象（`null`除外），而值可以是任意的对象或者原始值，由于是对于对象的弱引用，不会干扰 `Js` 的垃圾回收。如果需要使用 `Set` 引用对象，可以采用 `WeakSet`，`WeakSet` 对象允许存储对象弱引用的唯一值，`WeakSet` 对象中的值同样不会重复，且只能保存对象的弱引用，同样由于是对于对象的弱引用，不会干扰 `Js` 的垃圾回收。`WeakSet 不可遍历` 强引用和弱引用 JS 的垃圾回收机制是如果我们持有对一个对象的引用，那么这个对象就不会被垃圾回收，这里的引用，指的就是 `强引用` ，而弱引用就是一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，因此可能在任何时刻被回收。通过重写引用来清除对象引用，使其可回收。 ```js // obj是一个强引用，对象存于内存，可用 let obj = { id: 1 } // 重写obj引用 obj = null // 对象从内存移除，回收 {id: 1} 对象 ``` ```js let obj = { id: 1 } let user = { info: obj } let set = new Set([obj]) let map = new Map([[obj, 'hahaha']]) // 重写obj obj = null console.log(user.info) // {id: 1} console.log(set) //{ { id: 1 } } console.log(map) //{ { id: 1 } => 'hahaha' } ``` 此例我们重写 `obj` 以后，`{id: 1}` 依然会存在于内存中，因为 `user` 对象以及后面的 `set/map` 都强引用了它，Set/Map、对象、数组对象等都是强引用，所以我们仍然可以获取到 `{id: 1}` ，我们想要清除那就只能重写所有引用将其置空了接下来我们看 `WeakMap` 以及 `WeakSet`： ```js let obj = { id: 1 } let weakSet = new WeakSet([obj]) let weakMap = new WeakMap([[obj, 'hahaha']]) obj = null console.log(weakSet) //没有属性了 No properties console.log(weakMap) //没有属性了 No properties ``` 如上所示，使用了 `WeakMap` 以及 `WeakSet` 即为弱引用，将 `obj` 引用置为 `null` 后，对象 `{id: 1}` 将在下一次 GC 中被清理出内存。 [es6-7-新标准的考查](http://interview.poetries.top/docs/guide.html#es6-7-%E6%96%B0%E6%A0%87%E5%87%86%E7%9A%84%E8%80%83%E6%9F%A5) ::: ## 40 typeof 与 instanceof 区别 ::: details `typeof` 对于基本类型，除了 `null`都可以显示正确的类型 ```js typeof 1 // 'number' typeof '1' // 'string' typeof undefined // 'undefined' typeof true // 'boolean' typeof Symbol() // 'symbol' typeof b // b 没有声明，但是还会显示 undefined ``` typeof`对于对象，除了函数都会显示`object ```js typeof [] // 'object' typeof {} // 'object' typeof console.log // 'function' ``` 对于 `null` 来说，虽然它是基本类型，但是会显示 `object`，这是一个存在很久了的 `Bug` ```js typeof null // 'object' ``` instanceof`可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的`prototype 1. instanceof 是如何判断的? 表达式: A instanceof B 【如果`B函数`的`显式原型对象`在`A对象`（对象实例）的`原型链`上, 返回 true, 否则返回 false】沿着 A 的`__proto__`这条线来查找，同时沿着 B 的`prototype`这条线来查找，当两条线查找到同一个引用时，说明为同一对象，返回`true`，如果到终点还没找到，返回`false` 所有对象的原型链都会找到`Object.prototype` 2. Function 是通过 new 自己产生的实例 --> - `instanceof`的**作用**：用于判断**实例**属于哪个**构造函数**。使用 instanceof 可以检查一个对象（实例）是否是一个类（构造函数）的实例 - `instanceof`的**原理**：判断实例对象的`__proto__`属性，和构造函数的`prototype`属性，是否为同一个引用（是否指向同一个地址）。 - **注意 1**：虽然说，实例是由构造函数 new 出来的，但是实例的`__proto__`属性引用的是构造函数的`prototype`。也就是说，实例的`__proto__`属性与`构造函数本身`无关。 - 注意 2：在原型链上，原型的上面可能还会有原型，以此类推往上走，继续找`__proto__`属性。这条链上如果能找到， instanceof 的返回结果也是 true。 [instanceof 的原理](http://interview.poetries.top/docs/details-expain.html#_3-3-instanceof%E7%9A%84%E5%8E%9F%E7%90%86) ::: ## 41 谈谈你对 ES6 的理解 ::: details - 新增模板字符串（为`JavaScript`提供了简单的字符串插值功能） - 箭头函数 - `for-of`（用来遍历数据—例如数组中的值。） - `arguments`对象可被不定参数和默认参数完美代替。 - `ES6`将`promise`对象纳入规范，提供了原生的`Promise`对象。 - 增加了`let`和`const`命令，用来声明变量。 - 增加了块级作用域。 - `let`命令实际上就增加了块级作用域。 - 还有就是引入`module`模块的概念 ES6 的新特性？ 1. 变量声明的变化，之前是用 var 声明的，现在可以用 let const 和 var 进行声明 2. 模板字符串:使用反引号``;在模板字符串里面支持换行,并可以在里面使用\${}来包裹一个变量或表达式; 3. 解构:有数组解构和对象解构;可以快速获取数组和对象的值; 4. 展开运算符:在 ES6 中用...来表示展开运算符,它可以将数组或者对象进行展开; 5. 箭头函数:函数的快捷写法,不需要通过 function 关键字创建函数,并且可以省略 return 关键字.但函数体内的 this 对象指的是定义时所在的对象,而不是使用时所在的对象 6. 对象的简化赋值:对象赋值时如果属性名和变量名一致可以简写 7. 类的支持:ES6 中添加了对类的支持，引入了 class 关键字。JS 本身就是面向对象，ES6 中提供的类实际上只是 JS 原型模式包装。现在有了 class,对象的创建，继承更直观，父类方法的调用，实例化，静态方法和构造函数更加形象化 8. .函数的参数默认值: 9. promise ::: ## 42 全局作用域 ::: details - 直接编写在 script 标签中的 JS 代码，都在全局作用域 - 全局作用域在页面打开时创建，在页面关闭时销毁 - 在全局作用域中有一个全局对象 window， - 它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用 - 在全局作用域中： - 创建的变量都会作为 window 对象的属性保存 - 创建的函数都会作为 window 对象的方法保存 - 全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到 ::: ## 43 函数作用域 ::: details - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁 - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的 - 在函数作用域中可以访问到全局作用域的变量 - 在全局作用域中无法访问到函数作用域的变量 - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用 - 如果没有则向上一级作用域中寻找，直到找到全局作用域， - 如果全局作用域中依然没有找到，则会报错 ReferenceError - 在函数中要访问全局变量可以使用 window 对象（如果同时存在块级对象和全局对象） - 在函数作用域也有声明提前的特性， - 使用 var 关键字声明的变量，会在函数中所有的代码执行之前被声明 - 函数声明也会在函数中所有的代码执行之前执行 ```js function fun3() { fun4() //在执行之前，fun4 已经声明过了 console.log(a) //undefined var a = 35 function fun4() { alert("I'm fun4") } } ``` - 在函数中，不使用 var 声明的变量都会成为全局变量 - 定义`形参`就相当于在函数作用域中声明了变量 ::: ## 44 可选链操作符 ::: details [ES2020 新语法：可选链操作符 `?.`](https://blog.csdn.net/weixin_43487782/article/details/110524901) 可选链不能用于赋值注意：可选链只能用于访问属性，不能用来赋值。 ::: ## 45 Event 对象的通用属性/方法 ::: details ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.6gp4x0h8n300.png) ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.4aig05ej60o0.png) ::: ## 46 [stopPropagation 与 stopImmediatePropagation 的区别](https://blog.csdn.net/weixin_42420703/article/details/104585427) ## 47 执行上下文与执行上下文栈 ::: details `执行上下文创建分为创建阶段与执行阶段两个阶段` - 变量提升与函数提升 - 变量提升: 在变量定义语句之前, 就可以访问到这个变量(undefined) - 函数提升: 在函数定义语句之前, 就执行该函数 - 先有变量提升, 再有函数提升 - 理解 - 执行上下文: 由 js 引擎自动创建的对象, 包含对应作用域中的所有变量属性 - 执行上下文栈: 用来管理产生的多个执行上下文 - 分类: - 全局: window - 函数: 对程序员来说是透明的 - 生命周期 - 全局 : 准备执行全局代码前产生, 当页面刷新/关闭页面时死亡 - 函数 : 调用函数时产生, 函数执行完时死亡 - 包含哪些属性: - 全局 : - 用 var 定义的全局变量 ==>undefined - 使用 function 声明的函数 ===>function - this ===>window - 函数 - 用 var 定义的局部变量 ==>undefined - 使用 function 声明的函数 ===>function - this ===> 调用函数的对象, 如果没有指定就是 window - 形参变量 ===>对应实参值 - arguments ===>实参列表的伪数组 - `执行上下文创建和初始化的过程` 由于执行栈 LIFO 的特性，所以可以理解为，JS 代码执行完毕前在执行栈底部永远有个全局执行上下文。 - 全局执行上下文 - 在全局代码执行前最先创建一个全局执行上下文(window) - 对全局数据进行预处理 - var 定义的全局变量==>undefined, 添加为 window 的属性 - function 声明的全局函数==>赋值(fun), 添加为 window 的方法 - this==>赋值(window) - 开始执行全局代码 - 函数执行上下文:`同一个函数被多次调用，都会创建一个新的上下文` 【注意递归，经常迷惑，不同函数的执行上下文是不一样的，里面的变量也是不一样的，也就是不同函数的作用域是不同的】 - 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文`对象`（不是一个正式的对象，而是一个虚拟的对象，是一块内存空间，存在执行栈中）只有执行才会创建空间 - 对局部数据进行预处理 - 形参变量==>赋值(实参)，`添加为执行上下文的属性` - arguments==>赋值(实参列表), 添加为执行上下文的属性 - `var定义的局部变量==>undefined`, 添加为执行上下文的属性 - function 声明的函数 ==>赋值(fun), 添加为执行上下文的方法 - this==>赋值(调用函数的对象) - 开始执行函数体代码 - `函数执行完毕之后，其所在的执行上下文就会被销毁` ::: ## 48 作用域与作用域链 ::: details 注意查找作用域的时候，如果找到了就会直接返回，而不是还一直往上找。还有一点就是用在函数内部没有 var 定义的变量，上它的上一级作用域查找，也就是说没有 var 定义的变量不一定是 window 的变量没有用 var 声明的变量为全局变量”这样的说法不太正确，需要在这句话前面加一个前提，如果 1. `变量前面没有用var声明`， 2. `在变量所在的作用域链中没有这个变量名称，则设置该变量为全局变量`。 - 理解: - 作用域: 一块代码区域, 在编码时就确定了, 不会再变化 - 作用域链: 多个嵌套的作用域形成的由内向外的结构, 用于查找变量 - 分类: - 全局 - 函数 - js 没有块作用域(在 ES6 之前) - 作用 - 作用域: `隔离变量, 可以在不同作用域定义同名的变量不冲突` - 作用域链: 查找变量 - 查找的过程：查找一个变量的查找规则： - 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入 2 - 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入 3 - 再次执行 2 的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常 - 区别作用域与执行上下文： - 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义的时候已经确定了，而不是在函数调用的时候确定的。全局执行上下文环境是在全局作用域确定了之后，js 代码马上执行之前创建的函数执行上下文是在调用函数时，函数体代码执行之前创建的 - 作用域是静态的，只要函数定义好了就一直存在，且不会变化上下文环境是动态的，调用函数时创建，函数调用结束之后上下文环境就会被释放掉 - 联系:上下文环境(对象)是从属于所在的作用域全局上下文环境 ==> 全局作用域函数上下文环境 ==> 对应的函数作用域 ::: ## 49 内存溢出与内存泄露 ::: details 1. 内存溢出（一杯水） - 一种程序运行出现的错误 - 当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误 2. 内存泄露（一部分只是导致可用内存变小，不会导致崩溃，只是一个安全隐患） - 占用的内存没有及时释放（这里泄漏一点，那里泄漏一点，内存很快就没了） - 内存泄露积累多了就容易导致内存溢出（`量变到质变`） - 常见的内存泄露: - 意外的全局变量 - 没有及时清理的计时器(setInterval)或回调函数 - 闭包 ::: ## 50 对象 ::: details 1. 什么是对象? 代表现实中的某个事物, 是该事物在编程中的抽象多个数据的集合体(封装体) 用于保存多个数据的容器 2. 为什么要用对象? 便于对多个数据进行统一管理 3. 对象的组成属性：代表现实事物的状态数据 - 由属性名和属性值组成 - 属性名都是字符串类型, 属性值是任意类型方法：代表现实事物的行为数据是特别的属性==>属性值是函数 4. 如何访问对象内部数据? `.属性名`: 编码简单, 但有时不能用 `['属性名']`: 编码麻烦, 但通用 5. 问题: 什么时候必须使用['属性名']的方式? 属性名不是合法的标识名，包含特殊字符: - 空格等属性名不确定 ```js // 创建对象 var p = {} /*情形一: 属性名不是合法的标识名*/ /*需求: 添加一个属性: content-type: text/json */ // p.content-type = 'text/json' //不正确 p['content-type'] = 'text/json' /*情形二: 属性名不确定*/ var prop = 'xxx' var value = 123 // p.prop = value //不正确 p[prop] = value console.log(p['content-type'], p[prop]) ``` ## 创建对象的方法 1. Object 构造函数模式套路: 先创建空 Object 对象, 再动态添加属性/方法 ```js // 先创建空Object对象 var p = new Object() //等价于 p = {} // 再动态添加属性/方法 p.name = 'Tom' p.age = 12 ``` 适用场景: 起始时不确定对象内部数据问题: 语句太多 2. 对象字面量模式套路: 使用{}创建对象, 同时指定属性/方法 ```js var p = { name: 'Tom', age: 12, setName: function (name) { this.name = name }, } //测试 console.log(p.name, p.age) p.setName('JACK') console.log(p.name, p.age) var p2 = { //如果创建多个对象代码很重复 name: 'Bob', age: 13, setName: function (name) { this.name = name }, } ``` 适用场景: 起始时对象内部数据是确定的问题: 如果创建多个对象, 有重复代码 3. 工厂模式套路: 通过工厂函数动态创建对象并返回 ```js function createPerson(name, age) { //返回一个对象的函数===>工厂函数 var obj = { name: name, age: age, setName: function (name) { this.name = name }, } return obj } // 创建2个人 var p1 = createPerson('Tom', 12) var p2 = createPerson('Bob', 13) // p1/p2是Object类型 function createStudent(name, price) { var obj = { name: name, price: price, } return obj } var s = createStudent('张三', 12000) // s也是Object ``` 适用场景: 需要创建多个对象问题: 对象没有一个具体的类型, 都是 Object 类型 4. 自定义构造函数模式套路: 自定义构造函数, 通过 new 创建对象适用场景: 需要创建多个类型确定的对象问题: 每个对象都有相同的数据, 浪费内存【想办法放在原型链上】 ```js //定义类型 function Person(name, age) { this.name = name this.age = age this.setName = function (name) { this.name = name } } var p1 = new Person('Tom', 12) p1.setName('Jack') console.log(p1.name, p1.age) console.log(p1 instanceof Person) function Student(name, price) { this.name = name this.price = price } var s = new Student('Bob', 13000) console.log(s instanceof Student) var p2 = new Person('JACK', 23) //p1 p2 都有setName方法，每个对象都存有相同的数据浪费了浪费内存 //要注意，虽然这个两个方法相同，但是却属于不同的对象，但它们又有相同的原型链 //因为父对象都是Person，所以它们的隐式原型都指向它们的构造函数的显式原型 // 也就是 p1.__proto__ === __p2.proto__ === Person.prototype console.log(p1, p2) console.log(p1.__proto__ === p2.__proto__) //true console.log(p1.__proto__ === Person.prototype) //true ``` 5. 构造函数加原型的组合模式构造函数+原型的组合模式 ```js function Person(name, age) { //在构造函数中只初始化一般函数 this.name = name this.age = age } //方法加到原型链上 Person.prototype.setName = function (name) { this.name = name } var p1 = new Person('Tom', 23) var p2 = new Person('Jack', 24) console.log(p1, p2) ``` 套路: 自定义构造函数, `属性`在函数中初始化, `方法`添加到原型上适用场景: 需要创建多个类型确定的对象 ::: ## 51 JS 预编译 ::: details [深入理解 JS 预编译——AO 对象及 GO 对象](https://blog.csdn.net/weixin_44909683/article/details/106084956) ## GO 对象 GO 对象全称为 global object（全局对象，等同于 window），在开始预编译时产生的对象，比 AO 对象先产生，用于存放全局变量，也称为全局作用域。 1. 生成 GO 对象 2. 将变量声明的变量名当做 GO 对象的属性名，值为 undefinded 3. 将声明函数的函数名当做 GO 对象的属性名，值为函数体 ## AO 对象 AO 对象全称为：activation object （活跃对象/执行期上下文），在函数执行前执行函数预编译，此时会产生一个 AO 对象，AO 对象保存该函数的参数变量函数预编译步骤 1. 产生 AO 对象 2. 将函数的参数以及函数里面声明的变量当做 AO 对象的属性名，值全部为 undefined。 3. 将实参的值赋值给形参。 4. 在函数里面声明的函数，函数名作为 AO 对象的属性名，值赋值给函数体。（若参数名和函数名重叠，则函数体值会覆盖参数值） ::: ## 52 为什么 JavaScript 是单线程？ ::: details JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么 JavaScript 不能有多个线程呢？这样能提高效率啊。 JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定 JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？(线程是交互执行的，要解决这种方法，可以加互斥锁，但是比较麻烦) 为了利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，`但是子线程完全受主线程控制，且不得操作DOM`。所以，这个新标准并没有改变 JavaScript 单线程的本质当然，我们可以为浏览器引入“锁”的机制来解决这些冲突，但这会大大提高复杂性当然对于不可避免的耗时操作（如：繁重的运算，多重循环），HTML5 提出了 Web Worker，它会在当前 JavaScript 的执行主线程中利用 Worker 类新开辟一个额外的线程来加载和运行特定的 JavaScript 文件，这个新的线程和 JavaScript 的主线程之间并不会互相影响和阻塞执行，而且在`Web Worker中提供了这个新线程和JavaScript主线程之间数据交换的接口：postMessage和onMessage事件`。但在 HTML5 Web Worker 中是不能操作 DOM 的，任何需要操作 DOM 的任务都需要委托给 JavaScript 主线程来执行，所以虽然引入 HTML5 Web Worker，但仍然没有改线 JavaScript 单线程的本质。这个是浏览器提供的 api，并不属于 js 本身。虽然 JS 运行在浏览器中，是单线程的，每个 window 一个 JS 线程，但浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步不是单线程的 ## 如何证明 js 执行是单线程的? 1. setTimeout()的回调函数是在主线程执行的如果 js 是多线程的话，控制台就应该输出 200ms，因为如果是多线程，setTimeout 会在第二行创建个新的线程，并立刻执行，只需要 2s 就完成了 ```js console.time('time') setTimeout(function () { console.timeEnd('time') }, 200) for (let i = 0; i < 9999999; i++) {} ``` console.time() 方法是计算器的起始方法，结束方法为 console.timeEnd() ，该方法执行后会将执行时长显示在控制台上。括号里面的可以写时间之前的指定字符串但这段代码输出的是大于 200 的其它数，所以这个定时器肯定不是立刻执行的，而是等 for 循环完成之后再执行，所以 js 是单线程的。 js 异步就是这样的，等主任务完成之后再去执行，而不是创建个新线程，所以，js 是单线程 2. 回调函数只有在运行栈中的代码全部执行完后才有可能执行 ## 定时器真是定时执行的吗? 定时器并不能保证真正定时执行一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受) ```js //注意不加按钮点击时间，时间超过得更大，因为算上了编译的时间 document.getElementById('btn').onclick = function () { var start = Date.now() console.log('启动定时器前...') setTimeout(function () { console.log('定时器执行了', Date.now() - start) //时间超过了很多 }, 200) console.log('启动定时器后...') // 做一个长时间的工作 for (var i = 0; i < 1000000000; i++) {} } ``` 定时器是在主线程执行的, js 是单线程的 ::: ## 53 Web Worker ::: details 1. Web Workers 是 HTML5 提供的一个 javascript 多线程解决方案 2. 我们可以将一些大计算量的代码交由 web Worker 运行而`不冻结用户界面`(页面依然能点，比如点击输入框等) 3. 但是子线程完全受主线程控制，`且不得操作DOM`。所以，这个新标准并没有改变 JavaScript 单线程的本质 4. 相关 API - Worker: 构造函数, 加载分线程执行的 js 文件 - Worker.prototype.onmessage: 用于接收另一个线程的回调函数 - Worker.prototype.postMessage: 向另一个线程发送消息 5. 使用： - 创建在分线程执行的 js 文件 ```js var onmessage = function (event) { //不能用函数声明 console.log('onMessage()22') var upper = event.data.toUpperCase() //通过event.data获得发送来的数据 postMessage(upper) //将获取到的数据发送会主线程 } ``` - 在主线程中的 js 中发消息并设置回调 ```js //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL var worker = new Worker('worker.js') //括号里是要执行的js文件路径 //接收worker传过来的数据函数 worker.onmessage = function (event) { console.log(event.data) } //向worker发送数据 worker.postMessage('hello world') ``` 流程： 1. 主线程向分线程发送数据 2. 分线程接收到主线程发送的数据 3. 分线程向主线程返回数据 4. 主线程接收分线程返回的数据注意：分线程中的全局对象不再是 window, 所以在分线程中不可能更新界面，也不能调用 window 中的方法，例如 alert，但 console 还有，因为在分线程中的全局对象上也有，注意这不是 window 上的 6. 缺点 - 慢（只是不冻结页面，但还是得等它返回数据） - 不能跨域加载 JS - worker 内代码不能访问 DOM(更新 UI) - 不是每个浏览器都支持这个新特性 ![]() ::: ## 54 js 中的浮点数精度问题 ::: details 1. 导致原因 JavaScript 内部只有一种数字类型 Number，也就是说，JavaScript 语言的底层根本没有整数，所有数字都是以 IEEE-754 标准格式 64 位浮点数形式储存，`1`与`1.0`是相同的。但因为有些小数以二进制表示位数是无穷的，而 JavaScript 会把超出 53 位之后的二进制舍弃 2. IEEE 二进制浮点数算术标准（IEEE 754） IEEE 二进制浮点数算术标准（IEEE 754）是 20 世纪 80 年代以来最广泛使用的浮点数运算标准，为许多 CPU 与浮点运算器所采用。这个标准定义了表示浮点数的格式（包括负零-0）与反常值（denormal number）），一些特殊数值（无穷（Inf）与非数值（NaN）），以及这些数值的“浮点数运算符”；它也指明了四种数值舍入规则和五种例外状况（包括例外发生的时机与处理方式）。 3. 浮点数的存储 JS 的浮点数实现也是遵循 IEEE 754 标准，采用双精度存储（double precision），使用 64 位固定长度来表示，其中 1 位用来表示符号位，11 位用来表示指数，52 位表示尾数。 - 符号位(sign)：第 1 位是正负数符号位，0 代表正数，1 代表负数 - 指数位(Exponent)：中间 11 位存储指数，用来表示次方数 - 尾数位(mantissa)：最后的 52 位是尾数，超出部分自动进一舍零 4. 浮点数的计算步骤（0.1+0.2） 1. 首先，十进制的 0.1 和 0.2 会转换成二进制的，但是由于浮点数用二进制表示是无穷的 ```js 0.1——>0.0001 1001 1001 1001 ...(1001循环) 0.2——>0.0011 0011 0011 0011 ...(0011循环) ``` 2. IEEE754 标准的 64 位双精度浮点数的小数部分最多支持 53 位二进制，多余的二进制数字被截断，所以两者相加之后的二进制之和是 ```js 0.0100110011001100110011001100110011001100110011001101 ``` 3. 将截断之后的二进制数字再转换为十进制，就成了 0.30000000000000004，所以在计算时产生了误差 5. 解决办法：引用类库 1. [Math.js](https://mathjs.org/) 2. [decimal.js](http://mikemcl.github.io/decimal.js/) 3. [big.js](http://mikemcl.github.io/big.js/) 4. json-bigint 思路 1 ：在知道小数位个数的前提下，可以考虑通过将浮点数放大倍数到整型(最后再除以相应倍数)，再进行运算操作，这样就能得到正确的结果了 ```js 0.1 + 0.2 ——> (0.1 * 10 + 0.2 * 10) / 10 // 0.3 0.8 * 3 ——> ( 0.85 * 100 * 3) / 100 //2.4 ``` ::: ## 55 字符串的操作方法 ::: details ## 字符串替换方法 - replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 _string_.replace(searchvalue,newvalueFunction) searchvalue：必须。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。 newvalueFunction：必需。一个字符串值。规定了替换文本或`生成替换文本的函数`（函数要 return 一个字符串）。 ## 字符串重复 - repeat()：返回新的字符串，表示将字符串重复指定次数返回。 str.repeat(number) 如果参数是小数，向下取整如果参数是 0 至 -1 之间的小数，会进行取整运算，`0 至 -1 之间的小数取整得到 -0`，等同于 repeat 零次 `console.log("Hello,".repeat(-0.5)); // ""` 如果参数是 NaN，等同于 repeat 零次如果参数是负数或者 Infinity ，会报错如果传入的参数是字符串，则会先将字符串转化为数字 ## 字符串补全常用于补全位数 - **padStart**：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。 - **padEnd**：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度（而不是补全的长度），第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。 ```js console.log('h'.padStart(5, 'o')) // "ooooh" console.log('h'.padEnd(5, 'o')) // "hoooo" console.log('h'.padStart(5)) // " h" ``` 如果指定的长度小于或者等于原字符串的长度，则返回原字符串: 如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串: ```js console.log('hello'.padStart(5, 'A')) // "hello" console.log('hello'.padEnd(10, ',world!')) // "hello,worl" ``` ## 子串识别 - **includes()**：返回布尔值，判断是否找到参数字符串。 - **startsWith()**：返回布尔值，判断参数字符串是否在原字符串的头部。 - **endsWith()**：返回布尔值，判断参数字符串是否在原字符串的尾部。以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。这三个方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf 和 lastIndexOf 这两个方法，它们会将正则表达式转换为字符串并搜索它。 ::: ## 56 平时有关注过前端的内存处理吗? ::: details 1. 内存的声明周期内存分配：当我们申明变量、函数、对象的时候，系统会⾃动为他们分配内存内存使⽤：即读写内存，也就是使⽤变量、函数等内存回收：使⽤完毕，由垃圾回收机制⾃动回收不再使⽤的内存 2. Js 中的内存分配 ```js const n = 123; // 给数值变量分配内存 const s = “azerty”; // 给字符串分配内存 const o = { a: 1, b: null }; // 给对象及其包含的值分配内存 ``` 3. Js 中的内存使⽤使⽤值的过程实际上是对分配内存进⾏读取与写⼊的操作。读取与写⼊可能是写⼊⼀个变量或者⼀个对象的属性值，甚⾄传递函数的参数。 ```js var a = 10 // 分配内存 console.log(a) // 对内存的使⽤ ``` 4. Js 中的垃圾回收机制垃圾回收算法主要依赖于引⽤的概念。在内存管理的环境中，⼀个对象如果有访问另⼀个对象的权限（隐式或者显式），叫做⼀个对象引⽤另⼀个对象。例如，⼀个 Javascript 对象具有对它原型的引⽤（隐式引⽤）和对它属性的引⽤（显式引⽤）。在这⾥，“对象”的概念不仅特指 JavaScript 对象，还包括函数作⽤域（或者全局词法作⽤域） **引⽤计数垃圾回收** 引⽤计数算法定义“内存不再使⽤”的标准很简单，就是看⼀个对象是否有指向它的引⽤。如果没有其他对象指向它了，说明该对象已经不再需要了。但它却存在⼀个致命的问题：循环引⽤。如果两个对象相互引⽤，尽管他们已不再使⽤，垃圾回收不会进⾏回收，导致内存泄露。 **标记清除算法：** 标记清除算法将“不再使⽤的对象”定义为“⽆法达到的对象”。简单来说，就是从根部（在 JS 中就是全局对象出发定时扫描内存中的对象。凡是能从根部到达的对象，都是还需要使⽤的。那些⽆法由根部出发触及到的对象被标记为不再使⽤，稍后进⾏回收。 1. 垃圾收集器在运⾏的时候会给存储在内存中的所有变量都加上标记。 2. 从根部出发将能触及到的对象的标记清除。 3. 那些还存在标记的变量被视为准备删除的变量。 4. 最后垃圾收集器会执⾏最后⼀步内存清除的⼯作，销毁那些带标记的值并回收它们所占⽤的内存空间 5. 常⻅的内存泄露 - 全局变量 ```js function foo() { bar1 = ‘some text’; // 没有声明变量实际上是全局变量 => window.bar1 this.bar2 = ‘some text’ // 全局变量 => window.bar2 } foo() ``` - 未被清理的定时器和回调函数如果后续 renderer 元素被移除，整个定时器实际上没有任何作⽤。但如果你没有回收定时器，整个定时器依然有效, 不但定时器⽆法被内存回收，定时器函数中的依赖也⽆法回收。在这个案例中的 serverData 也⽆法被回收。 ```js var serverData = loadData(); setInterval(function() { var renderer = document.getElementById(‘renderer’); if(renderer) { renderer.innerHTML = JSON.stringify(serverData); } }, 5000); // 每 5 秒调⽤⼀次 ``` - 闭包在 JS 开发中，我们会经常⽤到闭包，⼀个内部函数，有权访问包含其的外部函数中的变量。下⾯这种情况下，闭包也会造成内存泄露 ```js var theThing = null; var replaceThing = function () { var originalThing = theThing; var unused = function () { if (originalThing) // 对于 ‘originalThing’的引⽤ console.log(“hi”); }; theThing = { longStr: new Array(1000000).join(‘*’), someMethod: function () { console.log(“message”); } }; }; setInterval(replaceThing, 1000); ``` 这段代码，每次调⽤ replaceThing 时，theThing 获得了包含⼀个巨⼤的数组和⼀个对于新闭包 someMethod 的对象。同时 unused 是⼀个引⽤了 originalThing 的闭包。这个范例的关键在于，闭包之间是共享作⽤域的，尽管 unused 可能⼀直没有被调⽤，但是 someMethod 可能会被调⽤，就会导致⽆法对其内存进⾏回收。当这段代码被反复执⾏时，内存会持续增⻓。 - DOM 引⽤（现在我们基本上都是使用框架了，基本很少直接操作 Dom 了很多时候, 我们对 Dom 的操作, 会把 Dom 的引⽤保存在⼀个数组或者 Map 中。 ```js var elements = { image: document.getElementById(‘image’) }; function doStuff() { elements.image.src = ‘http://example.com/image_name.png’; } function removeImage() { document.body.removeChild(document.getElementById(‘image’)); // 这个时候我们对于 #image 仍然有⼀个引⽤, Image 元素, 仍然⽆法被内存回收. } //这时候要记得赋值为null //elements.image = null; ``` 上述案例中，即使我们对于 image 元素进⾏了移除，但是仍然有对 image 元素的引⽤，依然⽆法对其进⾏内存回收 - 未清理的 Console 输出如何避免内存泄露？减少不必要的全局变量，使⽤严格模式避免意外创建全局变量。在你使⽤完数据后，及时解除引⽤（闭包中的变量，dom 引⽤，定时器清除）府城 null。组织好你的逻辑，避免死循环等造成浏览器卡顿，崩溃的问题 ::: ## 57 垃圾回收 ::: details 1. 垃圾产生&为何回收我们知道写代码时创建一个基本类型、对象、函数……都是需要占用内存的，但是我们并不关注这些，因为这是引擎为我们分配的，我们不需要显式手动的去分配内存 ```js let test = { name: 'isboyjc', } test = [1, 2, 3, 4, 5] ``` 我们知道 `JavaScript` 的引用数据类型是保存在堆内存中的，然后在栈内存中保存一个对堆内存中实际对象的引用，所以，`JavaScript` 中对引用数据类型的操作都是操作对象的引用而不是实际的对象。可以简单理解为，栈内存中保存了一个地址，这个地址和堆内存中的实际值是相关的那上面代码首先我们声明了一个变量 `test`，它引用了对象 `{name: 'isboyjc'}`，接着我们把这个变量重新赋值了一个数组对象，也就变成了该变量引用了一个数组，那么之前的对象引用关系就没有了 ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.5b7jasvvvmc0.png) 程序的运行需要内存，只要程序提出要求，操作系统或者运行时就必须提供内存，那么对于持续运行的服务进程，必须要及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则就会导致进程崩溃 2. 标记清除法此算法分为 `标记` 和 `清除` 两个阶段，标记阶段即为所有活动对象做上标记，清除阶段则把没有标记（也就是非活动对象）销毁引擎在执行 GC（使用标记清除算法）时，需要从出发点去遍历内存中所有的对象去打标记，而这个出发点有很多，我们称之为一组 `根` 对象，而所谓的根对象，其实在浏览器环境中包括又不止于 `全局Window对象`、`文档DOM树` 等整个标记清除算法大致过程就像下面这样 - 垃圾收集器在运行时会给内存中的所有变量都加上一个标记，假设内存中所有对象都是垃圾，全标记为 0 - 然后从各个根对象开始遍历，把不是垃圾的节点改成 1 - 清理所有标记为 0 的垃圾，销毁并回收它们所占用的内存空间 - 最后，把所有内存中对象标记修改为 0，等待下一轮垃圾回收 **「优点」** 标记清除算法的优点只有一个，那就是实现比较简单，打标记也无非打与不打两种情况，这使得一位二进制位（0 和 1）就可以为其标记，非常简单 **「缺点」** - **「内存碎片化」**，空闲内存块是不连续的，容易出现很多空闲内存块，还可能会出现分配所需内存过大的对象时找不到合适的块 - **「分配速度慢」**，因为即便是使用 `First-fit` 策略，其操作仍是一个 `O(n)` 的操作，最坏情况是每次都要遍历到最后，同时因为碎片化，大对象的分配效率会更慢 **「缺点」** 归根结底，标记清除算法的缺点在于清除之后剩余的对象位置不变而导致的空闲内存不连续，所以只要解决这一点，两个缺点都可以完美解决了而 **「标记整理（Mark-Compact）算法」** 就可以有效地解决，它的标记阶段和标记清除算法没有什么不同，只是标记结束后，标记整理算法会将活着的对象（即不需要清理的对象）向内存的一端移动，最后清理掉边界的内存 3. 引用计数算法引用计数（Reference Counting），这其实是早先的一种垃圾回收算法，它把 `对象是否不再需要` 简化定义为 `对象有没有其他对象引用到它`，如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收，目前很少使用这种算法了，因为它的问题很多，不过我们还是需要了解一下它的策略是跟踪记录每个变量值被使用的次数 - 当声明了一个变量并且将一个引用类型赋值给该变量的时候这个值的引用次数就为 1 - 如果同一个值又被赋给另一个变量，那么引用数加 1 - 如果该变量的值被其他的值覆盖了，则引用次数减 1 - 当这个值的引用次数变为 0 的时候，说明没有变量在使用，这个值没法被访问了，回收空间，垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的内存 ```js let a = new Object() // 此对象的引用计数为 1（a引用） let b = a // 此对象的引用计数是 2（a,b引用） a = null // 此对象的引用计数为 1（b引用） b = null // 此对象的引用计数为 0（无引用） ... // GC 回收此对象 ``` 这种方式是不是很简单？确实很简单，不过在引用计数这种算法出现没多久，就遇到了一个很严重的问题——循环引用，即对象 A 有一个指针指向对象 B，而对象 B 也引用了对象 A ，如下面这个例子 ```js function test() { let A = new Object() let B = new Object() A.b = B B.a = A } ``` 如上所示，对象 A 和 B 通过各自的属性相互引用着，按照上文的引用计数策略，它们的引用数量都是 2，但是，在函数 `test` 执行完成之后，对象 A 和 B 是要被清理的，但使用引用计数则不会被清理，因为它们的引用数量不会变成 0，假如此函数在程序中被多次调用，那么就会造成大量的内存不会被释放我们再用标记清除的角度看一下，当函数结束后，两个对象都不在作用域中，A 和 B 都会被当作非活动对象来清除掉，相比之下，引用计数则不会释放，也就会造成大量无用内存占用，这也是后来放弃引用计数，使用标记清除的原因之一 **「优点」** 引用计数算法的优点我们对比标记清除来看就会清晰很多，首先引用计数在引用值为 0 时，也就是在变成垃圾的那一刻就会被回收，所以它可以立即回收垃圾而标记清除算法需要每隔一段时间进行一次，那在应用程序（JS 脚本）运行过程中线程就必须要暂停去执行一段时间的 `GC`，另外，标记清除算法需要遍历堆里的活动以及非活动对象来清除，而引用计数则只需要在引用时计数就可以了 **「缺点」** 引用计数的缺点想必也都很明朗了，首先它需要一个计数器，而此计数器需要占很大的位置，因为我们也不知道被引用数量的上限，还有就是无法解决循环引用无法回收的问题，这也是最严重的 4. 补充： JavaScript 的垃圾回收机制有着很多的步骤，除了了标记-清除，其实还有其它的过程，例如：标记-整理，在清空部分垃圾数据后释放了一定的内存空间后会可能会留下大面积的不连续内存片段，导致后续可能无法为某些对象分配连续内存，此时需要整理一下内存空间；交替执行，因为 JavaScript 是运行在主线程上的，所以执行垃圾回收机制时会暂停 js 的运行，若垃圾回收执行时间过长，则会给用户带来明显的卡顿现象，`所以垃圾回收机制会被分成一个个的小任务，穿插在js任务之中，即交替执行`，尽可能得保证不会带来明显的卡顿感 [「硬核 JS」你真的了解垃圾回收机制吗](https://mp.weixin.qq.com/s/3Orv6t_QU9yI9A1qGySNDQ) ::: ## 58 函数柯里化 ::: details `柯里化(Currying)` 是把接收多个参数的原函数变换成接受一个单一参数（原来函数的第一个参数的函数)并返回一个新的函数，新的函数能够接受余下的参数，并返回和原函数相同的结果。 1. 参数对复用 2. 提高实用性 3. 延迟执行只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。柯里化的函数可以延迟接收参数，就是比如一个函数需要接收的参数是两个，执行的时候必须接收两个参数，否则没法执行。但是柯里化后的函数，可以先接收一个参数 ```js // 普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingAdd(x) { return function (y) { return x + y } } add(1, 2) // 3 curryingAdd(1)(2) // 3 ``` ::: ## 59 JS 模块化 ::: details `nodeJS`里面的模块是基于`commonJS`规范实现的，原理是文件的读写，导出文件要使用`exports`、`module.exports`，引入文件用`require`。每个文件就是一个模块；每个文件里面的代码会用默认写在一个闭包函数里面`AMD`规范则是非同步加载模块，允许指定回调函数，`AMD` 是 `RequireJS` 在推广过程中对模块定义的规范化产出。 `AMD`推崇**依赖前置**, `CMD`推崇**依赖就近**。对于依赖的模块 AMD 是提前执行，CMD 是延迟执行。在`ES6`中，我们可以使用 `import` 关键字引入模块，通过 `expoRt` 关键字导出模块，但是由于 ES6 目前无法在浏览器中执行，所以，我们只能通过`babel`将不被支持的`import`编译为当前受到广泛支持的 `require`。 CommonJs 和 ES6 模块化的区别： 1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。 2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。前端模块化：CommonJS,AMD,CMD,ES import 和 require 导入的区别： 1. import 的 ES6 标准模块；require 是 AMD 规范引入方式； 2. import 是编译时调用，所以必须放在文件开头，是解构的过程;require 是运行时调用，所以 require 理论上可以运用在代码的任何地方;是赋值过程。其实 require 的结果就是对象、数字、字符串、函数等，再把 require 的结果赋值给某个变量 ::: ## 60 异步加载 JS 方式 ::: details 1. 匿名函数自调动态创建 script 标签加载 js ```js ;(function () { var scriptEle = document.createElement('script') scriptEle.type = 'text/javascript' scriptEle.async = true scriptEle.src = 'http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js' var x = document.getElementsByTagName('head')[0] x.insertBefore(scriptEle, x.firstChild) })() ``` 2. async 属性 ```js // async属性规定一旦加载脚本可用，则会异步执行 ``` 3. defer 属性 ```js // defer属性规定是否对脚本执行进行延迟，直到页面加载为止 ``` ::: ## 61 函数声明和函数传参 ::: details ### 函数声明 Function 类型代表一个函数，每一个函数都是一个 Function 类型的对象。而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。函数的声明有两种方式： - function sum(){} - var sum = function(){}; - 由于存在函数声明提升的过程，第一种方式在函数声明之前就可以调用函数，而第二种不行因为定义的是 sum ```js sum(2, 3) // //sum2(2,3) //sum2 is not a function 因为这时候sum2只是一个普通变量，而且是undefined console.log(sum2) // undefined function sum(a, b) { console.log(a + b) } var sum2 = (function sum2(a, b) { console.log(a + b) console.log('hello') })`函数提升的优先级比变量提升要高，且不会被同名变量声明覆盖,但会被同名变量定义覆盖` ``` ### 函数传参函数也可以作为参数函数也是一个对象，所以函数和其他对象一样也可以作为一个参数传递给另外一个函数。但是要注意的是使用函数作为参数时，变量后边千万不要加()，不加()表示将函数本身作为参数，加上以后表示将函数执行的结果作为参数。 ::: ## 61 定时器问题 ::: details 注意开启多个定时器的隐藏问题在开启定时器之前，最好将需要将当前元素上的其他定时器关闭 // clearInterval(timer); clearInterval()可以接收任意参数，如果参数是一个有效的定时器的标识，则停止对应的定时器如果参数不是一个有效的标识，则什么也不做 `setTimeout()方法的返回值是一个唯一的数值`，这个数值有什么用呢？如果你想要终止 setTimeout()方法的执行，那就必须使用 clearTimeout()方法来终止，而使用这个方法的时候，系统必须知道你到底要终止的是哪一个 setTimeout()方法(因为你可能同时调用了好几个 setTimeout()方法)，这样 clearTimeout()方法就需要一个参数，这个参数就是 setTimeout()方法的返回值(数值)，用这个数值来唯一确定结束哪一个 setTimeout()方法。 ::: ## 61 谈谈回调函数 ::: details 回调函数的理解 - 什么函数才是回调函数? - 你定义的 - 你没有调用 - 但它最终执行了(在一定条件下或某个时刻) - 常用的回调函数 - dom 事件回调函数 - 定时器回调函数 - ajax 请求回调函数 - 生命周期回调函数 ::: ## 62 数组空元素问题 :::details for ...of 与 for 如果数组中存在空元素，同样会执行 forEach() 对于空数组是不会执行回调函数的。 ::: ## 63 对象的访问方法 :::details var obj={name:'fuuf',age:19} 第一种，用.访问 obj.name 第二种用[]访问 obj['name'] //此时 name 是字符串，要加引号注意事项使用第二种方法访问时，如果是变量是不需要加引号的，例如 for(var i in obj){ console.log(obj[i]); //i 作为变量，不需要加引号 } 访问对象的方法的时候，只能用.访问 for of for in 两者都是严格的迭代语句 for in 获取`enumerable:true`的属性键(枚举对象中非符号键【不是用 Symbol 定义的】的属性) 遍历属性值。不受到`enumerable`限制。 ```js //在数组原型上增加了方法`gogo`, `for in`结果中出现了，而 `for of`结果冲未出现。 //定义了属性2不能被遍历， `for in`结果中未出现，而 `for of`结果中出现了。 // 原型上增加方法 Array.prototype.gogo = function () { console.log('gogo') } var a = [1, 2, 3] // key值2不可以枚举 Object.defineProperty(a, 2, { enumerable: false, }) Object.defineProperty(a, '2', { enumerable: false, }) for (let p in a) { // 索引被遍历出来是字符串类型 console.log(p, typeof p) // 0 string; 1 string; gogo string } console.log('---') for (let v of a) { console.log(v) // 1 2 3 } ``` ::: ## 63 [GUI 线程与 js 线程的关系](https://www.jianshu.com/p/afbbc65d2530) :::details 浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript 引擎线程，GUI 渲染线程，浏览器事件触发线程当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。 ::: ## 64 谈谈你对 AMD、CMD 的理解 :::details - `CommonJS`是服务器端模块的规范，`Node.js`采用了这个规范。`CommonJS`规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。`AMD`规范则是非同步加载模块，允许指定回调函数 - `AMD`推荐的风格通过返回一个对象做为模块对象，`CommonJS`的风格通过对`module.exports`或`exports`的属性赋值来达到暴露模块对象的目的 **es6 模块 CommonJS、AMD、CMD** - `CommonJS` 的规范中，每个 `JavaScript` 文件就是一个独立的模块上下文（`module context`），在这个上下文中默认创建的属性都是私有的。也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。 - `CommonJS`是同步加载模块,在浏览器中会出现堵塞情况，所以不适用 - `AMD` 异步，需要定义回调`define`方式 - `es6` 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用`export`关键字输出该变量 `es6`还可以导出类、方法，自动适用严格模式 :::