前端同学经常忽视的一个 JavaScript 面试题 - 有视频分析！

前端同学经常忽视的一个 JavaScript 面试题

        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
        getName();                   //4
        Foo().getName();             //1
        getName();                   //1
        new Foo.getName();           //2
        new Foo().getName();         //3
        new new Foo().getName();     //3

- 解析：

//第二道
var getName = function () { console.log(4); }; //匿名函数
function getName() { console.log(5); } //有名函数

    // 预解析：js中针对变量和函数的一种提前解析
    // 代码的执行规则：
    /*
        ① 系统将代码从文本中读出来，加入到内存（代码段）
        ② 对代码进行编译处理（词法分析、
        ③ 开始执行代码：顺序执行，从上往下语法分析）
    */

    // 预解析结果
    /*
        1.变量的   声明   会放到整个代码的最前面
            * 只针对自己的作用域
            * 只有var有这个效果：let没有
            * var a = 10;   // 声明部分：var a ，赋值部分 a = 10
        2.函数的定义会提到整个代码的最前面（函数在变量后）
    */

    var getName;
    function getName() { console.log(5); }
    getName = function () { console.log(4); }

//第三道：
//作用域
// 内部对象this：在对象的 函数里面使用，代表当前对象本身（我自己）

// 第五道：
// 运算符优先级
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

    new Foo.getName();      //==> 
    new (Foo.getName)();

// 第六道：
new Foo().getName(); //==>
(new Foo()).getName();

    // 构造函数返回值
    // new 关键字工作原理 （4个步骤）
    // a.创建空对象 ： { }
    // b.将this指向这个对象： this = {}
    // c.执行赋值代码
    // d.返回这个对象

    // 原型

// 第七道：
new new Foo().getName(); //==>
new ((new Foo()).getName)();

• 有需要的同学可以看看视频解析~

前端同学经常忽视的一个 JavaScript 面试题