js综合面试题

题目

// 已知
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();

1. 考虑到变量提升和函数提升

function Foo() {
  getName = function() { alert (1) };
  return this;
}
var getName;
function getName()  { alert (5) };
// -----变量提升只提升声明变量部分，而函数提升全部
Foo.getName = function () { alert (2) };
Foo.prototype.getName = function ()  { alert (3) };
getName = function ()  { alert (4) };

2. 由于var getName和function getName()命名冲突，var getName会被忽略

function Foo() {
  getName = function() { alert (1) };
  return this;
}
// var getName;
function getName()  { alert (5) };
// -----变量提升只提升声明变量部分，而函数提升全部
Foo.getName = function () { alert (2) };
Foo.prototype.getName = function ()  { alert (3) };
getName = function ()  { alert (4) };

3.由于最后一行对getName进行赋值，所以function getName() { alert (5) };变了

function Foo() {
  getName = function() { alert (1) };
  return this;
}
// var getName;
// function getName()  { alert (5) };
// -----变量提升只提升声明变量部分，而函数提升全部
Foo.getName = function () { alert (2) };
Foo.prototype.getName = function ()  { alert (3) };
getName = function ()  { alert (4) };

4.接下来看输出结果

Foo.getName(); // 2
getName(); // 4
Foo().getName(); // (Foo()).getName() ---> 执行Foo()函数然后寻找getName变量，沿着作用域链找--->找到最后一行的alert(4)，重新赋值为alert(1)

5.由于执行了Foo().getName()

function Foo() {
  getName = function() { alert (1) };
  return this;
}
// var getName;
// function getName()  { alert (5) };
// -----变量提升只提升声明变量部分，而函数提升全部
Foo.getName = function () { alert (2) };
Foo.prototype.getName = function ()  { alert (3) };
// getName = function ()  { alert (4) };
getName = function ()  { alert (1) };

5.接下来继续看输出结果

Foo.getName(); // 2
getName(); // 4
Foo().getName(); // (Foo()).getName() ---> window.getName()----> 1
getName(); // 1

6.接下来继续看输出结果，主要考察点运算符的顺序

new Foo.getName(); 
// new (Foo.getName()) ---> new一个函数则会执行一个函数并返回一个实例对象 ---> 2
new Foo().getName(); 
// 点运算符见到()不能进行点调用 ---> (new Foo()).getName()  ---> foo.getName() ---> 实例对象找属性沿着原型链找（自身，prototype, __prototype__, Object）--->  3
new new Foo().getName(); 
// new (new Foo()).getName)() ---> new (foo.getName)() ---> 3

refer to https://www.bilibili.com/video/BV1nb411P7tQ?p=12&spm_id_from=pageDriver