题解：逻辑运算符、运算符的优先级、声明变量和声明函数的提升优先级、原型继承、闭包、覆盖等知识点。

所遇面试题解析

• 题目如下：
• 解析：

题目如下：

function Foo() {
getName = function () {
console.log (1);
};
console.log('this is'+this)
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.getName();
② getName();
③ Foo().getName();
④ getName();
⑤ new Foo.getName();
⑥ new Foo().getName();
⑦ new new Foo().getName();

题目的答案为① Foo.getName(); // 2
②getName(); // 4
③Foo().getName(); // 1
④getName(); // 1
⑤new Foo.getName(); // 2
⑥new Foo().getName(); //3
⑦new new Foo().getName(); // 3

解析：

//第一部分：一个构造函数里面有个全部变量getName 指向一个匿名函数
function Foo() {
getName = function () {
console.log (1);
};
return this;
}
// 第二部分：构造函数的一个属性getName 指向一个匿名函数
Foo.getName = function () {
console.log (2);
};
// 第三部分：构造函数的原型上有个getName方法
Foo.prototype.getName = function () {
console.log(‘baidu’ && ‘google’);
};
// 第四部分：定义一个变量指针指向一个匿名函数
var getName = function () {
console.log (4);
};
// 第五部分：声明一个叫getName的有名函数
function getName() {
console.log (5);
}

每块函数的意义都清楚了吧，接下来再分析执行语句的代码：

①Foo.getName() ：
容易和第三部分相混淆，虽然第三部分是给 Foo添加了一个原型，但是Foo.getName() 调用不到原型里面里面的东西。就是调用第二部分的函数代码块，结果为“2”！

② getName();
如果单独看这条执行语句，一般会有个全局声明的第五部分的"function getName(){} ",但要是放在这么个复杂的上下文环境中，那肯定是不一样的啦，因为还有个第四部分 “var getName = function(){}” 来捣乱，为什么输出4而不是5，这里考的是变量提升与函数声明提升。我们知道使用var声明变量会存在变量提升的情况，比如下面的例子中，即使在声明前使用变量a也不会报错，这是因为声明提前会让声明提升到代码的最上层，而赋值操作停留在原地，而函数声明（注意是函数声明，不是函数表达式或者构造函数创建函数）也会存在声明提前的情况，即我们可以在函数声明前调用函数。
变量声明会提升，函数声明也会提升，谁提升的更高呢？在JavaScript中明确指出，函数声明会被优先提升，也就是说都是提升，但是函数比变量提升更高。所以题目中的两个函数顺序可以改写成：

function getName() {
console.log(5);
};
var getName;
getName = function () {
console.log(4);
};

③Foo().getName();
本句，有个执行顺序的，先一部分的“Foo()”,结果是"this" 并指向window，并产生了一个全局getName(window.getName)指针指向一个匿名函数，然后再执行"this.getName()" , 其实就是执行刚刚造出来的那个全局getName指向的匿名函数，所以输出“1”.

④getName();
这里输出1已经毫无悬念，上一分析中，getName的值在Foo执行时被修改了，所以再调用getName一样等同于window.getName()，同样是输出1。

⑤new Foo.getName();
首先还是先看运算符优先级吧，我自个看完的结果是【new Foo() > Foo() > new Foo】，先运算方式2的Foo.getName() 结果为“2”，再new一个Foo实例对象。因此这里new的过程就相当于单纯把Foo.getName执行了一遍输出2，然后返回了一个空的实例，

⑥new Foo().getName();
这里考了new基本概念，首先这个调用分为两步，第一步new Foo()得到一个实例，第二步调用实例的getName方法。
我们知道new一个构造函数的过程大致为，以构造函数原型创建一个对象（继承原型链），调用构造函数并将this指向这个新建的对象，好让对象继承构造函数中的构造器属性，如果构造函数没有手动返回一个对象，则返回这个新建的对象。
所以在执行new Foo()时，先以Foo原型创建了一个对象，由于Foo.prototype上事先设置了一个getName方法（输出3的那个），所以这个对象可通过原型访问到这个方法，其次由于Foo内部也没提供什么构造器属性，最终返回了一个this（这个this指向实例），因此这里的this还是等同于我们前面概念提到的以Foo原型创建的对象，可以尝试输出这个实例，除了原型上有一个getName方法就没有其它任何属性，因此这里输出3。
我们可以将Foo函数改写成下面这样，其它不变，猜猜new Foo().getName()输出什么：

```javascript
`function Foo() {
getName = function () {
console.log(1);
};
return {
getName: function () {
console.log(6);
}
};
};`

>>⑦new new Foo().getName();
先执行new Foo(),变成了 new Foo的实例对象.getName(), 然后再执行 Foo的实例对象.getName(),
又回到了方式3函数块，结果为“google”，最后执行new Foo的实例对象。

• 点赞
• 收藏
• 分享
• 文章举报