一道经典的 JavaScript 面试题

最新推荐文章于 2023-02-07 10:59:32 发布

lalalalala～

最新推荐文章于 2023-02-07 10:59:32 发布

阅读量310

点赞数 1

分类专栏：面试文章标签： JavaScript 面试题变量对象

本文链接：https://blog.youkuaiyun.com/weixin_42186513/article/details/84254923

版权

面试专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了一段JavaScript代码中的作用域规则、函数调用及原型链查找机制，展示了不同上下文中函数getName的执行结果，揭示了全局对象、构造函数、原型链对函数调用的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

已知以下一段代码，请回答问题。

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();

请回答：各部分的输出是什么？
2
4
1
1
2
3
3

解答思路：

最开始的变量对象：

VO (globalContext) = {
	Foo:{
		<reference to function>,
		return this
	}
	getName: <reference to function>{alert(5)}
}

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

VO (globalContext) = {
	Foo:{
		<reference to function>,
		getName: <reference to function>{alert(2)},
		return this
	}	
	getName: <reference to function>{alert(5)}

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

VO (globalContext) = {
	Foo:{
		<reference to function>,
		getName: <reference to function>{alert(2)},
		prototype: {
			getName: <reference to function>{alert(3)}
		},
		return this
	}
	getName: <reference to function>{alert(5)}	
}

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

VO (globalContext) = {
	Foo:{
		<reference to function>,
		getName: <reference to function>{alert(2)},
		prototype: {
			getName: <reference to function>{alert(3)}
		},
		return this
	}
	getName: <reference to function>{alert(4)}	
}

执行 Foo.getName()：
从 VO 中看到：alert(2)
执行 getName()：
从 VO 中看到：alert(4)
执行 Foo().getName()：
Foo() 调用之后返回 this（指向window），所以 Foo().getName() 等价于 window.getName()
但是Foo() 调用改变了 VO

VO (globalContext) = {
	Foo:{
		<reference to function>,
		getName: <reference to function>{alert(2)},
		prototype: {
			getName: <reference to function>{alert(3)}
		},
		return this
	}
	getName: <reference to function>{alert(1)}	
}

所以 Foo().getName() 最后返回 alert(1)

执行 new Foo.getName()：
因为 new 操作符的优先级低于属性访问符，所以先执行 Foo.getName()，返回 alert(2)
执行 new Foo().getName()：
Foo() 和 new Foo() 相比， new Foo() 优先级更高，所以先执行 new Foo()，new 出来的对象继承了 Foo.prototype ，因此 alert(3)
执行 new new Foo().getName()：
先执行 new Foo()，所以alert(3)