js 原型链、作用域经典面试题（附解析）

最新推荐文章于 2025-06-12 09:36:07 发布

WWang_07

最新推荐文章于 2025-06-12 09:36:07 发布

阅读量572

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/WWang_07/article/details/120599494

笔记专栏收录该内容

11 篇文章

订阅专栏

本文详细解析了JavaScript中function、原型和全局变量在getName方法调用中的行为差异，涉及函数表达式、原型链查找及作用域规则。重点在于`Foo.getName()`、`getName()`和`newFoo.getName()`的输出结果解释。

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


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();//2 此时函数未执行，可将Foo看为一个对象，调用对象中的getName方法

getName();//4 预编译过程中，首先寻找变量声明var getName，为undefined。
        //再寻找函数声明getName(){}，并赋值，此时getName:getName(){}，
        //代码开始执行，执行到为getName变量赋值，此时getName:function(){console.log(4)}
        
Foo().getName();//1 Foo()时函数执行，函数体内有getName方法，但未使用var声明，
        //所以getName的作用域是全局，Foo()指向结果返回值为this，this此时指向全局
        //所以此时调用的是全局的getName()
        
getName();//1 独立调用，经上一步Foo()执行之后，其函数体中的getName方法已存在于全局

new Foo.getName();//2 符号.的优先级比new高，所以先执行Foo.getName()
        //仍可看为调用Foo对象中的getName()方法，为2，new 2也为2
        
new Foo().getName();//3 new Foo()为默认规则，所以先执行，
            //new Foo().getName()可看为构造函数Foo的实例化对象.getName()，
            //此时构造函数中没有this.getName(){}方法供实例对象调用，
            //所以要在构造函数的原型对象上找，原型对象中存在此方法，所以为3
            
new new Foo().getName();//3 此步骤与上步类似，只多了一个new，所以为new 3，结果还是3