JS - 一道经典的JavaScript面试题

最新推荐文章于 2023-01-16 20:51:25 发布

kelly0721

最新推荐文章于 2023-01-16 20:51:25 发布

阅读量162

点赞数

分类专栏： JS 面试

本文链接：https://blog.csdn.net/kelly0721/article/details/115909622

版权

JS 同时被 2 个专栏收录

50 篇文章 3 订阅

订阅专栏

面试

2 篇文章 0 订阅

订阅专栏

一、题目

function Foo() {
    getName = function () { console.log (1); };
    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();

// 答案
2
4
1
1
2
3
3

二、解析

步骤

定义了一个叫Foo的函数
Foo创建了一个叫getName的静态属性，存储了一个匿名函数
Foo的原型对象新创建了一个叫getName的匿名函数
通过函数表达式创建了一个getName的函数
创建了一个叫getName的声明函数。

三、详解

第一问

Foo.getName();

访问Foo函数上存储的静态属性，输出2

第二问

getName();

直接调用getName函数。既然是直接调用那么就是访问当前上文作用域内的叫getName的函数

这里涉及到变量声明提升，和函数表达式和函数声明的区别。

在Javascript中，定义函数有两种类型

函数声明

// 函数声明
function wscat(type) {
	return type === "wscat";
}

函数表达式

// 函数表达式
var oaoafly = function(type) {
	return type === "oaoafly";
}

一个变量提升例子

JavaScript 解释器中存在一种变量声明被提升的机制，也就是说函数声明会被提升到作用域的最前面，即使写代码的时候是写在最后面，也还是会被提升至最前面。
而用函数表达式创建的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用

getName() //oaoafly
var getName = function() {
	console.log('wscat')
}
getName() //wscat
function getName() {
	console.log('oaoafly')
}
getName() //wscat

var getName//变量被提升，此时为undefined          
getName()//oaoafly 函数被提升 这里受函数声明的影响，虽然函数声明在最后可以被提升到最前面了
var getName = function() {
	console.log('wscat')
}//函数表达式此时才开始覆盖函数声明的定义
getName()//wscat
function getName() {
	console.log('oaoafly')
}
getName()//wscat 这里就执行了函数表达式的值

可以分解为两个简单的问题

var getName;
console.log(getName)//undefined
getName()//Uncaught TypeError: getName is not a function
var getName = function() {
	console.log('wscat')
}

var getName;
console.log(getName)//function getName() {console.log('oaoafly')}
getName()//oaoafly
function getName() {
	console.log('oaoafly')
}

总结：Javascript中函数声明和函数表达式是存在区别的，函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用。而函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。

所以第二问的答案就是4，5的函数声明被4的函数表达式覆盖了

第三问

Foo().getName();

先执行了Foo函数，然后调用Foo函数的返回值对象的getName属性函数。

Foo函数的第一句getName = function () { console.log (1); };是一句函数赋值语句，注意它没有var声明，所以先向当前Foo函数作用域内寻找getName变量，没有。再向当前函数作用域上层，即外层作用域内寻找是否含有getName变量，找到了，也就是第二问中的console.log (4)函数，将此变量的值赋值为function(){console.log (1)}。
此处实际上是将外层作用域内的getName函数修改了。

注意：此处若依然没有找到会一直向上查找到window对象，若window对象中也没有getName属性，就在window对象中创建一个getName变量。

之后Foo函数的返回值是this，this的指向是由所在函数的调用方式决定的。而此处的直接调用方式，this指向window对象。
遂Foo函数返回的是window对象，相当于执行 window.getName() ，而window中的getName已经被修改为console.log(1)，所以最终会输出1

所以第三问的答案就是1