???? 内容速览 ????实现ES5继承的4种方法原型和原型链作用域和作用域链Event Loop执行上下文闭包的理解和分析????查看全部教程 / 阅读原文????ES5继承题目：ES5中常用继承方法。方法一：绑定构造函数缺点：不能继承父类原型方法/属性function Animal(){ this.species = ‘动物’}function Cat(){ // 执行父类的构造方法, 上下文为实例对象 Animal.apply(this, arguments)}/** * 测试代码 /var cat = new Cat()console.log(cat.species) // output: 动物方法二：原型链继承缺点：无法向父类构造函数中传递参数；子类原型链上定义的方法有先后顺序问题。注意：js中交换原型链，均需要修复prototype.constructor指向问题。function Animal(species){ this.species = species}Animal.prototype.func = function(){ console.log(‘Animal’)}function Cat(){}/* * func方法是无效的, 因为后面原型链被重新指向了Animal实例 /Cat.prototype.func = function() { console.log(‘Cat’)}Cat.prototype = new Animal()Cat.prototype.constructor = Cat // 修复: 将Cat.prototype.constructor重新指向本身/* * 测试代码 /var cat = new Cat()cat.func() // output: Animalconsole.log(cat.species) // undefined方法3:组合继承结合绑定构造函数和原型链继承2种方式，缺点是：调用了2次父类的构造函数。function Animal(species){ this.species = species}Animal.prototype.func = function(){ console.log(‘Animal’)}function Cat(){ Animal.apply(this, arguments)}Cat.prototype = new Animal()Cat.prototype.constructor = Cat /* * 测试代码 /var cat = new Cat(‘cat’)cat.func() // output: Animalconsole.log(cat.species) // output: cat方法4:寄生组合继承改进了组合继承的缺点，只需要调用1次父类的构造函数。它是引用类型最理想的继承范式。（引自：《JavaScript高级程序设计》）/* * 寄生组合继承的核心代码 * @param {Function} sub 子类 * @param {Function} parent 父类 /function inheritPrototype(sub, parent) { // 拿到父类的原型 var prototype = Object(parent.prototype) // 改变constructor指向 prototype.constructor = sub // 父类原型赋给子类 sub.prototype = prototype}function Animal(species){ this.species = species}Animal.prototype.func = function(){ console.log(‘Animal’)}function Cat(){ Animal.apply(this, arguments) // 只调用了1次构造函数}inheritPrototype(Cat, Animal)/* * 测试代码 */var cat = new Cat(‘cat’)cat.func() // output: Animalconsole.log(cat.species) // output: cat原型和原型链所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象所有的函数，都有一个prototype属性，属性值也是一个普通的对象所有的引用类型（数组、对象、函数），proto__属性值指向它的构造函数的prototype属性值注：ES6的箭头函数没有prototype属性，但是有__proto__属性。const obj = {};// 引用类型的 proto 属性值指向它的构造函数的 prototype 属性值console.log(obj.proto === Object.prototype); // output: true原型题目：如何JS中的原型？// 构造函数function Foo(name, age) { this.name = name}Foo.prototype.alertName = function () { alert(this.name)}// 创建示例var f = new Foo(‘zhangsan’)f.printName = function () { console.log(this.name)}// 测试f.printName()f.alertName()但是执行alertName时发生了什么？这里再记住一个重点 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto（即它的构造函数的prototype）中寻找，因此f.alertName就会找到Foo.prototype.alertName。原型链题目：如何JS中的原型链？以上一题为基础，如果调用f.toString()。f试图从__proto__中寻找（即Foo.prototype），还是没找到toString()方法。继续向上找，从f.proto.__proto__中寻找（即Foo.prototype.__proto__中）。因为Foo.prototype就是一个普通对象，因此Foo.prototype.proto = Object.prototype最终对应到了Object.prototype.toString这是对深度遍历的过程，寻找的依据就是一个链式结构，所以叫做“原型链”。作用域和作用域链题目：如何理解 JS 的作用域和作用域链。①作用域ES5有”全局作用域“和”函数作用域“。ES6的let和const使得JS用了”块级作用域“。为了解决ES5的全局冲突，一般都是闭包编写：(function(){ … })()。将变量封装到函数作用域。②作用域链当前作用域没有找到定义，继续向父级作用域寻找，直至全局作用域。这种层级关系，就是作用域链。Event Loop单线程题目：讲解下面代码的执行过程和结果。var a = true;setTimeout(function(){ a = false;}, 100)while(a){ console.log(‘while执行了’)}这段代码会一直执行并且输出"while…"。JS是单线程的，先跑执行栈里的同步任务，然后再跑任务队列的异步任务。执行栈和任务队列题目：说一下JS的Event Loop。简单总结如下：JS是单线程的，其上面的所有任务都是在两个地方执行：执行栈和任务队列。前者是存放同步任务；后者是异步任务有结果后，就在其中放入一个事件。当执行栈的任务都执行完了（栈空），js会读取任务队列，并将可以执行的任务从任务队列丢到执行栈中执行。这个过程是循环进行，所以称作Loop。执行上下文题目：解释下“全局执行上下文“和“函数执行上下文”。①全局执行上下文解析JS时候，创建一个 全局执行上下文 环境。把代码中即将执行的（内部函数的不算，因为你不知道函数何时执行）变量、函数声明都拿出来。未赋值的变量就是undefined。下面这段代码输出：undefined；而不是抛出Error。因为在解析JS的时候，变量a已经存入了全局执行上下文中了。console.log(a);var a = 1;②函数执行上下文和全局执行上下文差不多，但是多了this和arguments和参数。在JS中，this是关键字，它作为内置变量，其值是在执行的时候确定（不是定义的时候确定）。闭包的理解和分析题目：解释下js的闭包直接上MDN的解释：闭包是函数和声明该函数的词法环境的组合。而在JavaScript中，函数是被作为一级对象使用的，它既可以本当作值返回，还可以当作参数传递。理解了：“Js中的函数运行在它们被定义的作用域，而不是它们被执行的作用域”（摘自《JavaScript语言精粹》） 这句话即可。题目：闭包优缺点闭包封住了变量作用域，有效地防止了全局污染；但同时，它也存在内存泄漏的风险：在浏览器端可以通过强制刷新解决，对用户体验影响不大在服务端，由于node的内存限制和累积效应，可能会造成进程退出甚至服务器沓机解决方法是显式对外暴露一个接口，专门用以清理变量：function mockData() { const mem = {} return { clear: () => mem = null, // 显式暴露清理接口 get: (page) => { if(page in mem) { return mem[page] } mem[page] = Math.random() } }}更多系列教程⭐在GitHub上收藏/订阅⭐《前端知识体系》JavaScript基础知识梳理(上)JavaScript基础知识梳理(下)谈谈promise/async/await的执行顺序与V8引擎的BUG前端面试中常考的源码实现Flex上手与实战……《设计模式手册》单例模式策略模式代理模式迭代器模式订阅-发布模式桥接模式备忘录模式模板模式抽象工厂模式……《Webpack4渐进式教程》webpack4 系列教程(二): 编译 ES6webpack4 系列教程(三): 多页面解决方案–提取公共代码webpack4 系列教程(四): 单页面解决方案–代码分割和懒加载webpack4 系列教程(五): 处理 CSSwebpack4 系列教程(八): JS Tree Shakingwebpack4 系列教程(十二)：处理第三方 JavaScript 库webpack4 系列教程(十五)：开发模式与 webpack-dev-server……⭐在GitHub上收藏/订阅⭐