一道有意思的js面试题

给大家分享一道比较有意思的js面试题

  	function Foo() {
		getName = function () { 
			console.log (1); 
		};
		console.log(this)
	  return this;
	}
	Foo.getName = function () { 
		console.log (2); 
	};
	Foo.prototype.getName = function () { 
		console.log('prototype'); 
	};
	var getName = function () { 
		console.log (4);
	};
	function getName() { 
		console.log (5);
	}
 
	// 小伙伴们写出一下的输出结果
	 Foo.getName(); // 调用函数的静态方法 
	 getName();   // 函数作用域提升  4
	 Foo()  // 函数调用 window
	 getName();  // 1
	 new Foo.getName();  // 2
	 new Foo().getName();   // baidugoogle
	 new new Foo().getName(); 

公布输出结果

• Foo.getName(); 输出>>> 2
• getName(); 输出>>> 4
• Foo() 输出>>> window对象
• getName()输出>>> 1
• new Foo.getName(); 输出>>> 2
• new Foo().getName(); 输出>>>Foo对象以及 prototype
• new new Foo().getName(); 输出>>> Foo对象以及 prototype

解析输出结果

• Foo.getName(); 输出>>> 2
  • 静态方法通过Foo.直接定义；静态方法可以直接通过Foo.来调用
• getName(); 输出>>> 4

  • 函数声明是整体提升到顶部

  • 函数表达式：变量声明提升，只提升变量，不提升所赋的值，

    	var getName = function () { 
    		console.log (4);
    	};
    	function getName() { 
    		console.log (5);
    	}
    	// 提升以后演变的代码
    	function getName() { 
    			console.log (5);
    	}
    	var getName=''
    	getName=function () { 
    			console.log (4);
    	};
    

• Foo() 输出>>> window对象
  • 直接调用函数，函数中的this指向外部 window
  • window对象下添加getName函数覆盖重命名函数
• getName()输出>>> 1
  • 调用后Foo函数后window对象重新覆盖了getName函数所以输出1
• new Foo.getName(); 输出>>> 2
  • 运算符优先级括号高于new【new Foo() > Foo() > new Foo】，先运算Foo.getName() 结果为“2”，再new一个Foo实例对象。
• new Foo().getName(); 输出>>>Foo对象以及 prototype
  • 先执行new Foo() 返回Foo实例对象并继承了构造函数的原型对象
  • 不明白可以了解new操作符做了哪些事
• new new Foo().getName(); 输出>>> Foo对象以及 prototype
  • 运算符优先级括号高于new【new Foo() > Foo() > new Foo】
  • 执行顺序 new Foo() getName 最后再执行new

以上是我自己个人理解，如有不对请指正