js的综合面试题

2401_85124286

于 2024-06-15 20:55:29 发布

阅读量660

点赞数 28

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_85124286/article/details/139708357

版权

new new Foo().getName();

首先更新代码结构，如下

在这里插入图片描述

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

在这里插入图片描述

进一步：根据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）

总结:

这里考查的知识点有