JavaScript 开发人员面试问题：提升、原型继承以及属性与属性

参加工作面试总是让人感到害怕。如果你正在面试一个全新的职业领域，这种感觉会更加强烈。无论你是刚从大学毕业、完成了编程训练营，还是自学成才的 Web 开发者，你都需要确保自己已经准备好应对面试中可能被问到的各种问题。在这个新系列中，我将选择一些 JavaScript 前端开发者面试中可能会被问到的主题。我这样做不仅是为了帮助你（读者）准备即将到来的面试，也是为了帮助我自己准备即将到来的面试。在本文中，我将介绍提升、原型继承以及属性 (Attribute) 与属性 (Property) 的区别。

提升

变量提升是指将变量声明“提升”或提升到其作用域的顶部。如果变量位于函数内部，则提升到局部/函数作用域的顶部。如果变量位于函数外部，则提升到全局作用域的顶部。无论变量声明在何处，都会执行此操作。

因此，如果我们在全局范围内写入以下内容：

我们会得到返回值undefined。返回的原因undefined是，它识别出该变量hello存在，但由于变量提升，变量声明被提升到全局作用域的顶部，但赋予该变量的实际值并没有被提升。代码编译后就像这样写：

原型继承

人们常说，JavaScript 中的一切都是对象。除了基本类型（数字、字符串、布尔值、undefined 和 null）之外。函数、数组、对象以及字符串、数字和布尔值的包装器都是对象。对象用于存储数据、保持代码简洁以及将应用程序构建成模块。JavaScript 使用构造函数或原型（其他编程语言称之为类）作为创建其他对象（实例）的蓝图。这通常通过创建构造函数来实现：

一旦定义了构造函数，就可以像这样创建实例：

你可能会想，这很酷，但这和原型继承有什么关系？等等，我马上就讲到这儿。

让我们来定义一下继承。继承简单来说就是一个对象能够访问另一个对象的属性和方法。“原型”一词指的是 JavaScript 是一种基于原型的编程语言。

现在回到我们的例子。在这里，我们将添加一个方法来计算狗的年龄（当然是以狗的年龄为单位），但我们将使用prototype属性将其添加到构造函数之外。

通过使用prototype属性，对象fido和fefe可以访问方法calculateAge。它们之所以能够访问此方法，是因为原型继承（我告诉过你，我会把它们整合在一起）。因此，如果我们运行fido.calculateAge()和fefe.calculateAge()，就能得到狗的年龄（以狗年为单位）。以下是完整的代码片段：

属性与特性

属性由 HTML（超文本标记语言）定义。它们提供有关 HTML 元素的附加信息。属性示例如下：

• 网址
• 源码
• 类型
• 价值
• 替代
• ETC…

属性由 DOM（文档对象模型）定义。浏览器解析 HTML 元素后，会创建一个 DOM 节点。由于此节点是一个对象，因此它具有属性。属性示例如下：

• 访问密钥
• 属性
• childElementCount
• 类名
• 接受
• 孩子们
• ETC…

属性和特性之间的主要区别是：

• 属性 (Attribute) 由 HTML 定义，而特性 (Property) 由 DOM 定义。
• DOM 属性由 HTML 属性初始化。
• 属性值不能改变。
• 属性值可能会改变。

正如您所看到的，HTML 属性和 DOM 属性是两个不同的东西。

我希望本文能帮助您更好地理解代码提升、原型继承以及 HTML 属性 (Attribute) 和 DOM 属性 (Property) 之间的区别。我更希望的是，它能帮助您在面试中脱颖而出，最终获得您申请的前端开发工作。祝您好运，并感谢您抽出时间阅读本文。

图片来源（按出现顺序）：

丹尼尔·法齐奥

塞缪尔·泽勒

梅丽莎·沃克·霍恩

布鲁诺·菲格雷多