掌握这些主题,你就能成为 JavaScript 面试高手 - 第 2 部分
在本系列的第一部分中,我们介绍了一些基本但非常重要的主题,这些主题对于理解 JS 的工作原理至关重要,事实上,本文中的主题很大程度上取决于我们之前讨论的内容,现在就查看一下。
还在等什么?快来开始吧。
4. 闭包“房间里的大象”:
上次我们讨论了 JS 如何从作用域链中受益以及如何安排作用域链,那么让我们考虑一个有趣的案例,如果我们有一个函数在另一个函数中,想象一下嵌套函数中有一个“console.log()”语句,它可以访问什么变量?
- 嵌套函数内部与语句处于同一级别的变量定义。
- 传递给嵌套函数的参数“从技术上讲,它们只是在运行函数时获取值的变量”。
- 父函数中的变量和参数。
- 一直到“检查上一部分范围中的盘子堆栈理论”,全局范围内有什么。
当您在运行父函数时尝试返回嵌套函数时,会发生一些很酷的事情,为了工作,嵌套函数会从我们在第 3 点中提到的范围中创建自己的副本“不复制”,不是那里的所有变量,只有内部函数工作所需的变量。
话虽如此,现在当我们在函数中返回一个函数时,我们可以访问之前无法访问的中间层,返回函数现在被一个变量盒子包裹着,这些变量我们无法在其他地方获取,我们现在在那个盒子里有一个状态,我们可以对这个变量进行处理,只有我们需要的处理和我们在返回函数中指定的处理,在这个例子中,检查我们如何在其本地范围之外访问“count”并增加它,只能增加,不能删除,也不能更改,“count”对外界仍然是私有的! 事实上,用模块和IIFE(立即调用函数表达式)之类的东西包装这个逻辑,现在我们可以编写自己的包和模块,并与其他人共享有用的状态,但只能按照我们的规范。
总而言之,如果你被问到“你对闭包了解多少?”这样的问题,一个非常好且果断的开头应该是:闭包是在函数内部返回另一个函数的过程,它受益于作用域链,并为特定作用域提供状态和隐私保护。太棒了!
5.面向对象的JS:
曾经有人问我一个问题:JS 是面向对象的吗?JS 中的类提供了什么?继承是如何工作的?
要回答这个问题,我们需要深入研究语言的时间线。如果我们有一个对象,一个用“{}”声明的对象字面量,它具有属性、键值对,那么你需要将属性以函数的形式添加到它上面,嗯,它们被称为方法,但这太直接了。我们可以使用函数作为构造函数,在一开始实例化一个空对象,并将属性值作为函数参数传递,在函数结束时返回这个对象。现在,我们有一个样板,它接受值并将其赋给相同的属性。 实际上,在创建构造函数的新实例时,你可以替换实例化和返回对象的第一步和最后一步,通过在定义新实例时使用“new”关键字,它将创建一个“this”对象,你可以向其添加属性,然后在最后返回它。 如果我们想添加另一个具有额外属性和方法的对象,而又不丢失原有的属性和方法,该怎么办?如果您必须定义一个对象,您可以使用对象文字或其他很酷的功能,例如“Object.create”,如果您在创建“const newObject = Object.create(originalObject)”中传递它,则可以使用它来扩展原始对象;现在所有原始属性都委托给新对象,您现在可以在它的基础上构建。
回到我们的构造函数,你可以使用这个特性将所有方法存储在一个对象中,然后使用“Object.create”将这些方法移动到你的构造函数中,但我们的函数实际上有一个内置点叫做“prototype”,你可以在其中保存所有方法,这正是“new”关键字的作用,你一开始以为“this”是一个空对象,但实际上它是一个“Object.create”,使用“prototype”保存所有方法。继承之路:现在我们开始清楚了,一旦方法位于一个地方“又称原型”,我们就可以负责将方法从一个构造函数传递到另一个构造函数,我们称之为原型继承,那么我们如何传递属性本身呢?构造函数有一个很酷的方法“call”,当你在子函数中时,你可以使用它作为“Parent.call(this, ... 你想要扩展的属性列表)”,这将从父级复制属性实例,但现在将从调用“call”方法的地方赋予它值,实现继承!在 ES6 中,你可以使用类 而不是构造函数,在类中你有一个构造函数,你可以在其中列出你的属性,添加方法从未如此简单,它在底层所做的就是将它们添加到原型中。 子类可以在定义类时通过使用“extends MainClass”来继承类,正如你所期望的,它所做的就是使用“Object.create”传递原型方法并使用“call”来处理我们的属性。 最后,类只是我们所说的语法糖,一种预定义的方式,可以轻松模仿构造函数的功能,这代表了我们如何样板我们的对象,以实现继承,但正如我们之前在 JS 中所说,它只是原型继承。
我希望这篇文章对你有帮助,下次再见。
鏂囩珷鏉ユ簮锛�https://dev.to/gurutobe/covering-these-topics-makes-you-a-javascript-interview-boss-part-2-45m7