极易被忽视的javascript面试题七问七答

一道挖掘JavaScript知识的面试题

在前端开发的面试中，有一道特别的题目，旨在全面考核面试者对JavaScript的掌握程度。这道题目看似简单，实则暗藏玄机，令人难以完全回答正确。令人惊讶的是，近两年的面试中，几乎没有面试者能够完全答对，并非题目难度过高，而是因为它涉及的知识点众多，且容易被忽视。

题目呈现的方式如下：

```javascript

function Foo() {

getName = function () { alert (1); };

return this;

}

Foo.getName = function () { alert (2); };

Foo.prototype.getName = function () { alert (3); };

var getName = function () { alert (4); };

function getName() { alert (5); }

// 请写出以下代码的输出结果

Foo.getName();

getName();

Foo().getName();

getName();

new Foo.getName();

new Foo().getName();

new new Foo().getName();

```

让我们逐一每个小问。

第一问：Foo.getName()的输出结果是什么？答案是2。因为Foo函数上有一个静态属性getName，它存储了一个匿名函数，直接调用此属性会执行这个匿名函数并弹出提示框显示数字2。

让我们一段神秘的JavaScript代码。在这段代码中，我们有一个名为Foo的函数和一些关于作用域与this指向的问题。让我们一步步这段代码，看看它的神奇之处。

我们有一个名为Foo的函数，它内部定义了一个名为getName的变量，并将其赋值为一个弹出警告框的函数。然后，它返回当前对象（通常是window对象）。紧接着，我们有一个全局变量名为getName，还有一个全局函数名为getName。当我们在Foo函数内部尝试访问getName时，JavaScript会遵循它的作用域规则来寻找这个变量或函数。如果当前作用域没有找到，它会向上查找直到找到为止。如果没有找到任何匹配项，它会在全局作用域（通常是window对象）中创建它。所以在这个情况下，Foo函数中的getName变量实际上覆盖了全局的getName函数。这意味着全局的getName函数被一个新的函数覆盖了。

接下来，当我们执行Foo()时，我们实际上是在调用Foo函数并获取其返回值对象的getName属性函数。由于Foo函数中的第一句代码是修改全局的getName函数，所以此时的getName已经被替换为弹出数字1的函数。当我们执行Foo().getName()时，实际上是执行了window对象的getName函数，也就是弹出数字1的函数。所以答案是输出数字1。这个示例展示了变量作用域和this指向在JavaScript中的重要作用。

接下来的几个问题是关于这个主题的延伸。第三问是关于直接调用getName函数的结果，因为Foo函数已经修改了全局的getName函数，所以结果是弹出数字1。第四问与第三问相同，直接调用全局的getName函数的结果是弹出数字1。第五问涉及到了运算符优先级的问题，因为点（.）运算符的优先级高于new运算符，所以先执行Foo.getName()，结果是弹出数字2。第六问涉及到了构造函数的返回值问题。在JavaScript中，构造函数可以有返回值也可以没有。如果没有返回值，那么它将返回实例化对象。在这个例子中，由于构造函数返回的是新创建的对象实例本身，因此最后输出的仍然是经过修改的getName函数的弹窗结果，即数字1。因此在这段神秘的代码中隐藏的是关于JavaScript作用域和this指向的深入理解以及运算符优先级和构造函数返回值的规则。关于JavaScript中的特定问题与理解

在编程的世界中，我们时常会遇到一些充满挑战的问题，这些问题往往涉及到一些看似简单的语法背后的深层次含义，例如本题目所提及的关于JavaScript中`this`关键字以及返回值的问题。这些问题的答案并不总是显而易见的，需要我们深入理解JavaScript的特性和工作原理。这不仅考验我们对语言的掌握程度，也考验我们分析问题、解决问题的能力。以下是对题目中提到的几个问题的。

第一问是关于函数返回值的类型检查。在JavaScript中，函数的返回值可以是任何类型，包括引用类型。如果返回值是引用类型，那么实际返回的就是这个引用类型的实例。如果返回值是非引用类型（如基本类型），那么实际上返回的是这个基本类型的实例。当函数返回`this`时，由于`this`在构造函数中代表当前实例化对象，所以Foo函数最终返回的是实例化对象本身。这种基本的语言特性对于理解后续的问题至关重要。

第二问和第三问涉及到调用实例化对象的`getName`函数。在JavaScript中，如果一个对象没有某个属性或方法，那么会在其原型链上寻找这个属性或方法。在这个例子中，由于Foo的实例化对象没有`getName`属性，所以在其原型对象上寻找`getName`方法，并成功找到，所以能够正常输出。这涉及到JavaScript的原型链机制，是理解这个问题的重要基础。

第七问则涉及到运算符优先级和嵌套构造函数的问题。在实际执行过程中，首先会初始化Foo的实例化对象，然后将其原型上的`getName`函数作为新的构造函数进行调用。这种嵌套构造函数的调用方式可能会让初学者感到困惑，但只要我们理解了JavaScript的构造函数和原型链机制，就能够理解这种操作背后的逻辑。这些问题的难度并不是特别大，但足以让我们深入理解JavaScript的一些特性。但在实际的工作场景中，这些问题都是可能会遇到的，因此我们需要认真对待，深入理解。

从答题情况来看，这些问题的正确率并不理想。许多人在面对这些问题时显得过于急躁或轻视，没有深入理解问题的本质。希望这篇文章能够帮助大家更好地理解JavaScript的一些特性，提高解决问题的能力。编程不仅仅是掌握语言的语法，更是对问题进行分析、理解、解决的过程。我们需要保持耐心，深入，不断提高自己的编程技能。这样，我们才能在编程的世界中走得更远。通过以上的和讨论，我们可以对这些问题有更深入的理解，也希望这篇文章能帮助大家提高在解决实际问题时的正确率和效率。