金三银四，那些烧脑的JS面试题及原理
Q: JS代码是按顺序执行的吗？ A: JS代码执行过程中，需要先做变量提升，而之所以需要实现变量提升是因为JS代码在执行之前需要先编译 1、变量提升 变量和函数声明会被存放到变量环境中，变量的默认值会被设置为undefined var scope = 'global scope' function a(){ // 3、顶层变量环境声明了scope初始化为undefined function b(){ // 2、b函数的上层作用域是a，向上找scope console.log(scope) } return b; // 1、虽然声明在return语句后面，依然会提升到a函数作用域的顶层 var scope = 'local scope' } a()() // undefined 1.1、同名处理 同名函数，选择最后声明的 变量和函数同名，选择函数 var a = 1 var getNum = function() { a = 2 } function getNum() { a = 3 } getNum() console.log(a) // 2 // 变量和函数同名选择提升函数，函数提升包含初始化和赋值，接着执行函数，var声明的getNum被赋值为一个函数执行完成更改变量a为2 1.2、提升阶段 创建 初始化 赋值 let 提升 x x var 提升 提升 x function 提升 提升 提升 在块作用域内，let声明的变量仅在创建时被提升，在初始化之前使用变量，就会形成一个暂时性死区 var name = 'World' ;(function () { if (typeof name === 'undefined') { var name = "HuaMu"; console.info('Goodbye ' + name) } else { console.info('Hello ' + name) } })() // if分支内的name会被提升到外层，且同全局变量同名，则访问不到外层的name，var仅创建和初始化，并未赋值，则值为undefined，满足if条件 // Goodbye HuaMu 2、调用栈 在执行上下文创建完成后，JS引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文，又称调用栈 2.1、函数调用 JS引擎会为函数创建执行上下文，并将其压入调用栈 JS引擎执行函数代码 执行完毕后，JS引擎将该函数的执行上下文弹出栈 2.2、栈溢出 当分配的调用栈空间被占满时，会引发“栈溢出”问题。即超过了最大栈容量或最大调用深度 2.2.1、场景 <!-- todo --> 3、作用域 作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。主要有全局作用域、函数作用域以及块级作用域 当前作用域与上层作用域有同名变量时，无法访问和影响上层变量 let a = 1 function b(a) { a = 2 console.log(a) } b(a) // 2 console.log(a) // 1 4、作用域链 通过作用域查找变量的链条称为作用域链，而作用域链是通过词法作用域来确定的。词法作用域由函数声明的位置来决定，是静态的，即在代码阶段就决定好了，和函数是怎么调用的没有关系 // 连等操作是从右向左执行的，相当于b = 10、let a = b，相当于隐式创建为一个全局变量b let a = b = 10; ;(function(){ // 跟着作用域链查找到全局变量b，并修改为20 // 由于重新声明了，a变量只是局部变量，不影响全局变量a let a = b = 20 })() console.log(a) // 10 console.log(b) // 20 函数只会在第一次执行的时候被编译，因此编译时变量环境和词法环境最顶层数据已确定 var i = 1 function b() { console.log(i) } function a() { var i = 2 b() } // 由于a函数在全局作用域被定义，即便b函数在a函数内执行，它也只能访问到全局的作用域 a() // 1 5、闭包 一个作用域引用着一个本该被销毁的作用域，称之为闭包。即一个函数引用着父作用域的变量，在父函数执行结束后依然进行调用 6、this this是函数执行上下文对象，是动态变化的值，它没有作用域的限制，嵌套函数中的this不会从外层函数中继承，可通过箭头函数、self处理 6.1、类型 全局执行上下文中的this: window 函数执行上下文中的this: 严格模式 ? undefined: window var v_out = 'v_out'; let c_out = 'c_out'; var inner = { v_out: 'v_in', c_out: 'c_in', v_func: function () { return this.v_out }, c_func: function () { return this.c_out }, func:()=>{ return this.v_out } }; // 获取对象作用域内的函数，在全局环境下调用 this 指向 window const v_method = inner.v_func; const c_method = inner.c_func; // 顶层 v_out 变量会提升挂载到 window v_method(); // 'v_out' // 在块作用域内，const声明的变量不会挂载到 window，且父作用域不能访问子作用域 c_method(); // undefined // 赋值表达式和逗号表达式会返回最后一个值本身，即inner.v_func函数本身，调用位置是全局环境 (inner.v_func, inner.v_func)(); // 'v_out' (inner.v_func = inner.v_func)(); // 'v_out' // 对象的方法调用，this指向该对象 inner.v_func() // 'v_in' (inner.v_func)() // 'v_in' // 箭头函数没有自己的执行上下文，它继承调用函数的this，在这里是window inner.func() // 'v_out' 6.2、更改this指向 绑定优先级为：new > 显示绑定(call、apply、bind) > 隐式绑定(调用函数对象) > 默认绑定(window) 6.2.1、通过函数的call、apply、bind方法设置 c_method.call(inner) c_method.apply(inner) c_method.bind(inner)() 简单实现：call、apply 将当前函数链接到指定的上下文中，即将函数设置为对象属性 当前函数在context上下文中执行 移除context中已执行的当前函数 /** * 简单实现apply * @param {Function} fn 当前运行的函数 * @param {Object} context 指定的上下文 * @param {Array} args 参数集合 * @returns */ const apply = (fn,context=window,args=[])=>{ // Symbol是es6增加的第六个基本类型，对于对象属性就是uuid const id = Symbol(); // 将当前函数链接到指定的上下文中 context[id] = fn; // 当前函数在context上下文中执行 const res = context[id](...args) // 移除context中已执行的当前函数 delete context[id] return res; } // -------test------- // const context = { value:1 } function fn (name,isGirl){ console.log("🚀 ~ ", name,isGirl,this.value) } apply(fn,context,['huamu',true]) // 🚀 ~ huamu true 1 简单实现：bind 与call、apply不一样的点是bind返回一个新函数 function bind (fn, context=window, ...args) { return (...args2)=> apply(fn,context,[...args,...args2]) } 6.2.2、通过调用函数对象：指向对象本身 this的绑定是函数真正执行的位置 6.2.3、通过构造函数 function Foo() { getName = function () { console.log(1) } return this } Foo.getName = function () { console.log(2) } Foo.prototype.getName = function () { console.log(3) } var getName = function () { console.log(4) } function getName() { console.log(5) } // 执行Foo函数的静态方法 Foo.getName() // 2 // 函数getName提升并赋值，执行getName函数表达式 getName() // 4 // 在全局环境下执行Foo函数，this指向window，执行函数内的getName方法，覆盖了全局环境下的getName Foo().getName() // 1 getName() // 1 // new用于调用函数，即 new Foo.getName() 相当于 new (Foo.getName)()，执行了Foo函数的静态方法 new Foo.getName() // 2 // new 和 . 的优先级一样高，从左往右执行，相当于 (new Foo()).getName()，new会创建一个新对象，执行新对象的getName方法，在新对象本身找不到该方法，因此向原型找 new Foo().getName() // 3 new new Foo().getName() 简单实现：new 创建一个新对象，并指向函数原型 绑定this到新对象 返回对象 const newFn = (fn, ...arg) => { const obj = Object.create(fn.prototype); fn.apply(obj,arg) return obj } 拓展：Object.create方法会创建一个对象，并且将该对象的__proto__属性指向传入的对象 const person = { address: { country:"china" }, number: 111, say: function () { console.log(`it's ${this.name}, from ${this.address.country}, nums ${this.number}`) }, setCountry:function (country,number) { this.address.country=country this.number = number } } // 1、p1、p2 的原型对象指向了同一个对象 const p1 = Object.create(person) const p2 = Object.create(person) // 2、添加属性 p1.name = "huahua" // 3、在原型上找到setCountry函数，并且找到引用值address和原始值numbe属性，引用值会在所有实例共享 p1.setCountry("nanji",666) p2.name = "mumu" // 4、p2 的修改值会覆盖 p1的，最终country的值都为beiji p2.setCountry("beiji",999) p1.say() // it's huahua, from beiji, nums 666 p2.say() // it's mumu, from beiji, nums 999 6.2.4、实例 const value = 1; const objContext = { value : 2, getThis:function() { // 嵌套函数中的`this`不会从外层函数中继承 function fn1() { console.log("🚀 ~ fn1",this.value) // undefined } fn1() // 把 this 保存为一个 self 变量，再利用变量的作用域机制传递给嵌套函数 const self = this; function fn2() { console.log("🚀 ~ fn2 self",self.value) // 2 } fn2() // 箭头函数没有自己的执行上下文，会继承调用函数中的 this const fn3 = () => { console.log("🚀 ~ fn3 箭头函数",this.value) // 2 } fn3() // 箭头函数不会绑定局部变量，所有涉及它们的引用都会沿袭向上查找外层作用域链来处理，因此this的绑定只有一次 function fn4() { return () => { return () => { return () => { console.log("🚀 ~ fn4 箭头函数",this.value) // 42 }; }; }; } fn4.call( { value: 42 } )()()() // 构造函数优先级最高 function fn5(value) { this.value = value } const fn = new fn5(100) console.log("🚀 ~ fn5 构造函数", fn.value, this.value) // 100 2 } } 7、原型 7.1、函数对象 & 普通对象 通过 new Function 创建的对象称之为函数对象，其他则为普通对象，普通对象的构造函数是 Object // 函数对象 function fn(){}; const fn = () =>{}; const fn = new Function('str') // 普通对象 const obj = {} const obj = new Object() const obj = new fn() 每个对象都有内置__proto__属性，指向创建它的构造函数的原型对象，但只有函数对象才有prototype属性，指向函数的原型对象 7.2、原型对象 每个原型对象默认拥有一个constructor指针，指向prototype属性所在的函数 7.2.1、person1.__proto__ 是什么？ 因为：person1 的构造函数是 Person 所以：person1.__proto__ === Person.prototype 7.2.2、Person.__proto__ 是什么？ 因为：Person 的构造函数是 Function 所以：Person.__proto__ === Function.prototype 7.2.3、Person.prototype.__proto__ 是什么？ 因为：Person.prototype 是构造函数的一个实例，是个普通对象，其构造函数是 Object 所以：Person.prototype.__proto__ === Object.prototype Function.prototype.__proto__ === Object.prototype 7.2.4、Object.__proto__ 是什么？ 因为：所有函数对象的__proto__都指向Function.prototype，它是一个空函数 所以：Object.__proto__ === Function.prototype 7.2.5、Object.prototype.__proto__ 是什么？ 因为：Object.prototype 处于 原型链的顶端，为null 所以：Object.prototype.__proto__ === null 7.2.6、12个JS内置构造器对象 8个可访问构造器 同 Object 指向 Function.prototype Number、Boolean、String、Function、Array、RegExp、Error、Date 2个以对象形式存在， 其 proto 指向 Object.prototype Math、JSON 1个不能直接访问的 Global、1个仅在函数调用时由JS引擎创建的 Arguments 8、继承 原型继承 构造函数继承 组合继承 class 继承：主要依靠extends、super（让JavaScript引擎去实现原来需要我们自己编写的原型链代码） 9、模块 9.1、模块化的意义 若不采用模块化，则引入js文件时必须确保引入顺序正确，否则无法运行。在文件数量大、依赖关系不明确的情况很难保证，因此出现了模块化 9.2、CommonJS & AMD 在ES6以前，JS没有模块体系。只有社区指定的一些模块加载方案，如用于服务器端同步加载的CommonJS和用于浏览器端异步加载的AMD、CMD 9.2.1、CommonJS(Node.js) 一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。拥有四个重要变量：module、exports、require、global exports本身是一个变量对象，指向module.exports的{}模块，只能通过.语法向外暴露变量。而module.exports既可通过.也可使用=赋值，其中exports是module的属性，指向{}模块 //在这里写上需要向外暴露的函数、变量 module.exports = { add, update } // 引用自定义模块必须加./路径，不加的话只会去node_modules文件找 var math = require('./math') // 引用核心模块时，不需要带路径 var http = require('http') 9.2.2、AMD(require.js)、CMD(sea.js) 虽然都是并行加载js文件，但AMD推崇依赖前置、提前执行，即预加载，CMD推崇依赖就近、延迟执行，即懒加载。拥有三个重要变量：指定引用路径的require.config、定义模块的definde以及加载模块的require /** AMD写法 **/ define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { // 在最前面声明并初始化了要用到的所有模块 a.doSomething(); if (false) { // 即便没用到某个模块 b，但 b 还是提前执行了 b.doSomething() } }); /** CMD写法 **/ define(function(require, exports, module) { //在需要时申明 var a = require('./a'); a.doSomething(); if (false) { var b = require('./b'); b.doSomething(); } }); 9.3、ESM CommonJS和AMD输出的是对象，引入时需查找对象属性，只能在运行时确定模块的依赖关系以及输入输出变量，即运行时加载，而ES6模块的设计思想，是尽量的静态化，它导出的不是对象，而是一个个接口，使得编译时就能确定模块的依赖关系和输入输出变量，即静态加载 9.3.1、原理解析 // index.js import { m } from './module'; // module.js const m = 1; const n = 2; export { m, n }; 将上面源码进行打包 // 1. 是一个立即执行函数 (function (modules) { var installedModules = {}; // 4. 处理入口文件模块 function __webpack_require__(moduleId) { if (installedModules[moduleId]) { return installedModules[moduleId].exports; } // 5. 创建一个模块 var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; // 6. 执行入口文件模块函数 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); module.l = true; // 7. 返回 return module.exports; } __webpack_require__.d = function (exports, name, getter) { if (!__webpack_require__.o(exports, name)) { // 判断name是不是exports自己的属性 Object.defineProperty(exports, name, {enumerable: true, get: getter}); } }; __webpack_require__.r = function (exports) { if (typeof Symbol !== 'undefined' && Symbol.toStringTag) { // Symbol.toStringTag作为对象的属性，值表示这个对象的自定义类型 [Object Module] // 通常只作为Object.prototype.toString()的返回值 Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'}); } Object.defineProperty(exports, '__esModule', {value: true}); }; __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; // 3. 传入入口文件id return __webpack_require__(__webpack_require__.s = "./index.js"); })( // 2. 模块对象作为参数传入 { "./index.js": (function (module, __webpack_exports__, __webpack_require__) { // __webpack_exports__就是module.exports "use strict"; // 添加了__esModule和Symbol.toStringTag属性 __webpack_require__.r(__webpack_exports__); var _module__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./module.js"); }), "./module.js": (function (module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); // 把m/n这些变量添加到module.exports中，并设置getter为直接返回值 __webpack_require__.d(__webpack_exports__, "m", function () {return m;}); __webpack_require__.d(__webpack_exports__, "n", function () {return n;}); var m = 1; var n = 2; }) }); 将模块对象传入一个立即执行的函数 传入文件id，执行__webpack_require__函数 创建一个module，并绑定this到module.exports，同时传入module和module.exports对象 __webpack_require__.r给module.exports对象添加一个Symbol.toStringTag属性，值为{value: 'Module'}，使得module.exports调用toString可返回[Object Module]表示一个模块 __webpack_require__.d将要导出的变量添加到module.exports，设置getter返回同名变量的值，使得变量更改，外边的引用也会变化 返回module.exports 注意喔：ESM遇到加载命令import时，只生成一个动态的只读引用，在需要调用时才去模块里取值 9.4、require和import的区别 CommonJS 模块化方案 require/exports 是为服务器端开发设计的。服务器模块系统同步读取模块文件内容，编译执行后得到模块接口。而ES6 模块化方案 import/export 是为浏览器设计的，浏览器模块系统异步加载脚本文件 require/exports 是运行时动态加载，，import/export 是静态编译 require/exports 输出的是一个值的拷贝，import/export 模块输出的是值的引用，即文件引用的模块值改变，require 引入的模块值不会改变，而 import 引入的模块值会改变 用法不同 ES6 模块可以在 import 引用语句前使用模块，CommonJS 则需要先引用后使用 import/export 只能在模块顶层使用，不能在函数、判断语句等代码块之中引用，而require/exports可以 import/export 默认采用严格模式 // require/exports const fs = require('fs') exports.fs = fs module.exports = fs // import/export import fileSystem, {readFile} from 'fs' // 引入 export default 导出的模块不用加 {},引入非 export default 导出的模块需要加 {} 10、babel 对源码字符串进行 parse，生成 AST，把对代码的修改转为对 AST 的增删改，转换完 AST 之后再打印成目标代码字符串 10.1、babel插件开发的API 10.1.1、parse 阶段 使用@babel/parser 把源码转成 AST require('@babel/parser').parse(source, { sourceType: 'module', // 解析 es module 语法 plugins: ['jsx'], // 指定jsx 等插件来解析对应的语法 }); 10.1.2、transform 阶段 使用 @babel/traverse 遍历 AST，并调用 visitor 函数修改 AST，@babel/types 用于创建、判断 AST 节点，提供了 isX、assertX 等 api，若批量创建，则可使用@babel/template require('@babel/traverse').default(ast, { // do something }) 10.1.3、generate 阶段 使用@babel/generate 把 AST 打印为目标代码字符串，同时生成 sourcemap，@babel/code-frame 用于错误时打印代码位置 const { code,map } = generator(ast, { sourceMaps: true }) 11、正则 11.1、基础语法 匹配模式 // + 前导字符必须在目标字符串中连续出现1次起 /\d+/ // * ~ 连续0次起 /\d*/ // ? ~ 0、1次 /\d?/ // ^ 定位字符串首个字符，$ 末尾字符 /^\d$/ // () 为一个捕获组，[]匹配单个字符，元素关系为或 /([\s\S]*?)["']/ // 任意字符 + "|' 匹配字符 // \s 匹配空白字符(空格、换行、缩进等)、\S相反 /[\s\S]*/ // 匹配全部内容 // \w 匹配单词([A-Za-z0-9_])、\W相反 /[\w\W]*/ // 匹配全部内容 // \b 匹配不全是\w的位置 /\bnice\b/ // a nice day -> a是显式位置，a和n之间的位置则为隐式位置，即a位置到n位置前则是\b匹配的位置，同样，e位置到d位置前也是\b匹配的，因此可匹配到 nice /\b.\bnice\b/ // a nice day -> 匹配到 a nice 匹配数字 /[0-9]/ /\d/ // 单个数字 /[0-9]+/ /\d*/ // 多个数字 /[\d]{1,3}/ // 指定个数，1-3个数字 11.2、实例解析 实用http路由表达式 /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/ 拆解匹配 http + (0|1个)s + :// + (0|1个) www. + (1-256个) -|a-z|A-Z|0-9|@|:|%|.|_|+|~|#|= + . + (1-6个) a-z|A-Z|0-9|(|) + 匹配不全是\w的位置 + (任意个)-|a-z|A-Z|0-9|(|)|@|:|%|_|+|.|~|#|?|&|/|=
