js的综合面试题

题目

 <script>

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

• 首先更新代码结构，如下

当变量定义与函数名冲突时

进一步：根据js代码的执行顺序

进一步分析下面代码的调用运行

    Foo.getName();
    getName();
    Foo().getName();
    getName();
    new Foo.getName();
    new Foo().getName();
    new new Foo().getName();

1） Foo.getName();-----这里直接找到24行，即Foo函数添加了一个getName方法（后面的代码没有改变），所以------------------------------alert（2）；
2）getName();--------这里相当于全局的函数getName()，找到26行，alert(4)；
3）Foo().getName();------这里要考虑运算符优先级问题，. > [ ] > new > ()，点的优先级最高，但是注意().无法执行调用
因此这里的执行顺序为–（Foo()).getName();
首先Foo()表示对函数Foo的调用

  function Foo(){
      getName=function(){
        alert(1);
        return this;
      }
    }

分析：

• 在Foo函数中，首先可以看到并没有使用var 定义getName，即自身没有i当以，那么向上级作用域中查找，直到全局作用域，这里的getName表示的全局作用域上的函数，这里同时执行了改变全局作用域函数getName–alert（1），也就是谁，执行了Foo()之后，全局函数getName即26行的alert（4）变成alert（1）
• 同时return this–由于Foo（）是直接以函数的形式调用，所以这里this指向的是window对象（忘记了可以回头看我的blog（js中的this）https://blog.csdn.net/weixin_46872121/article/details/110290192
  因此
  （Foo()).getName()------>window.getName()
  window.getName()相当于向全局中查找getName()函数，此时已被改变，所以-------alert（1）

4）getName();------等价于window.getName()--------alert（1）

5）new Foo.getName();--------根据运算符的执行顺序---------(new (Foo.getName())
因此首先是Foo.getName()-----即 function(){ alert(2);}
(new (Foo.getName()))------>( new function(){ alert(2);} ) ------> 2 (虽然使用new会创建一个实例对象，但是这里并没有体现用处，所以最终-------------------alert（2）

6）new Foo().getName();---------（new Foo()）.getName();------(new Foo()).getName()
即首先是new Foo()----创建以实例对象foo
foo.getName()-----实例对象查找属性，首先在自身中查找 ，没有则在隐式原型属性中查找，
在这里由于foo实例对象中（即有Foo()构造方法创建的foo并没有getName()方法，注意里面的getName是全局的不属于构造方法中的，而看25行，Foo往显示原型prototype中添加了getName方法，这个现实原型属性，所有由Foo构造方法创建的实例对象都能访问到，因此，foo.getName()-------alert（3）

7）new new Foo().getName();-------new new Foo() ).getName()----new (new Foo() ).getName())
即new foo.getName()-----new function(){ alert(3); }----alert(3)
实现原理同理于6）

总结:

这里考查的知识点有

• 使用function定义的函数与使用var定义的变量的提升
• 当变量定义与函数名冲突时，优先保留函数，声明的变量被忽略
• 运算符优先级：. > [ ] > new > ()
• 变量的查找规则：自身—上一级----…----全局
• 实例对象属性查找规则：自身------隐式原型属性
• this的指向：当以函数的形式调用时this指向window，当以方法的形式调用时指向实例对象
• 在函数中可以改变全局变量或函数的值
• 在函数中的变量或者函数，没有使用var定义，则不是自身的属性，向作用域中查找