js笔试经典面试题

缺乏、安全感 2024-04-18 10:41 81阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70][]

此题是我综合之前的开发经验以及遇到的JS各种坑汇集而成。此题涉及的知识点众多，包括变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等等。

此题包含7小问，分别说下。

浏览器执行Js程序的时候，分两步：

（1）预解析 在代码解读之前发生，相当于一个"仓库"，放一些东西，比如var、function、参数等。 预解析时变量都是未定义的，函数则是整个函数块。 预解析时遇到重名的，会覆盖。变量与函数，留函数；函数与函数，留后面解析的。 当代码在一个环境中执行时，会创建变量对象的一个作用域链。是域就要预解析。

（2）执行代码 代码自上而下，从左往右的执行，读到表达式时，预解析仓库中的东西发生改变。

我们来分析题目  
先预解析，预解析仓库里有：

注意预解析时getName重名了，留函数。
    
    function Foo() {
        getName = function () { console.log (1); };
        return this;
    }
    function getName() { console.log (5);}

执行代码：

注意下面这个：
            function fn(){console.log(1)}
            console.log(fn())  //  2  
            function fn(){console.log(2)}
    
    前4行由于是函数声明，所以没卵用
    第5行：给Foo对象添加getName方法
    第6行：给Foo的原型对象添加getName方法
    第7行： *注意*遇到了表达式，域解析仓库中getName变为第7行的赋值语句
        此时预解析仓库变为：
            function Foo() {
                getName = function () { console.log (1); };
                return this;
            }
            getName = function () { console.log (4);};
    第8行：*注意*由于是函数声明，所以不影响预解析仓库

**第一问**

先看此题的上半部分做了什么，首先定义了一个叫Foo的函数，之后为Foo创建了一个叫getName的静态属性存储了一个匿名函数，之后为Foo的原型对象新创建了一个叫getName的匿名函数。之后又通过函数变量表达式创建了一个getName的函数，最后再声明一个叫getName函数。

第一问的 Foo.getName 自然是访问Foo函数上存储的静态属性，自然是2，没什么可说的。

**第二问**

如果单独看这条执行语句，一般会有个全局声明的函数方式5"function getName()\{\} ",但要是放在这么个复杂的上下文环境中，那肯定是不一样的啦，因为还有个方式4 “var getName = function()\{\}” 来捣乱，这就要考察一个知识点（你妈和你媳妇掉水里，你救谁的问题？nonono，可没那么纠结），当定义的变量和声明的函数重名了怎么办？答：它们都会进行预解析，函数声明提前于变量声明，但是最终会被变量覆盖！so方式4获胜，输出结果为“4”！  
**第三问**

本句，有个执行顺序的，先执行方式1的“Foo()”,结果是"this" 并指向window，并产生了一个全局getName(window.getName)指针指向一个匿名函数，然后再执行"this.getName()" , 其实就是执行刚刚造出来的那个全局getName指向的匿名函数，所以输出“1”.  
此处考察了两个知识点，一个是变量作用域问题，一个是this指向问题。

返回this，由于Foo()相当于window.Foo()，所以this指向window， Foo().getName()相当于window.getName()

**第四问**

直接调用getName函数，相当于 window.getName() ，因为这个变量已经被Foo函数（第3问执行时）执行时修改了，遂结果与第三问相同，为1

**第五问**

第五问 new Foo.getName(); ,此处考察的是js的运算符优先级问题。

通过查上表可以得知点（.）的优先级高于new操作，遂相当于是:

**new (Foo.getName)();**  
所以实际上将getName函数作为了构造函数来执行，遂弹出2。

**第六问**

第六问 new Foo().getName() ，首先看运算符优先级括号高于new，实际执行为

(new Foo()).getName()  
遂先执行Foo函数，而Foo此时作为构造函数却有返回值，所以这里需要说明下js中的构造函数返回值问题。

构造函数的返回值

在传统语言中，构造函数不应该有返回值，实际执行的返回值就是此构造函数的实例化对象。

而在js中构造函数可以有返回值也可以没有。

**1、没有返回值则按照其他语言一样返回实例化对象。**

![2019090515263287.png][]

**2、若有返回值则检查其返回值是否为引用类型。**如果是非引用类型，如基本类型（string,number,boolean,null,undefined）则与无返回值相同，实际返回其实例化对象。

![20190905152655154.png][]

**3、若返回值是引用类型，则实际返回值为这个引用类型。**

![20190905152759851.png][]

原题中，返回的是this，而this在构造函数中本来就代表当前实例化对象，遂最终Foo函数返回实例化对象。

之后调用实例化对象的getName函数，因为在Foo构造函数中没有为实例化对象添加任何属性，遂到当前对象的原型对象（prototype）中寻找getName，找到了。

遂最终输出3。

[![image\_thumb][image_thumb]][image_thumb_image_thumb]

**第七问**

第七问, new new Foo().getName(); 同样是运算符优先级问题。

最终实际执行为：

new ((new Foo()).getName)();  
先初始化Foo的实例化对象，然后将其原型上的getName函数作为构造函数再次new。

遂最终结果为3

这里成员访问的优先级是最高的，因此先执行了 .getName，但是在进行左侧取值的时候， new Foo() 可以理解为两种运算：new 带参数（即 new Foo()）和函数调用（即 先 Foo() 取值之后再 new），而 new 带参数的优先级是高于函数调用的，因此先执行了 new Foo()，或得 Foo 类的实例对象，再进行了成员访问 .getName。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/786effa56b654ad68429eb11674dd8f4.png
[2019090515263287.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/12e59f0a0ed74abc95db095053272663.png
[20190905152655154.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/09423ddb8db1499fa2ffece9730702cd.png
[20190905152759851.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3105808c5dcb4735986f2cdb0e3faea8.png
[image_thumb]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvNzQ2MTU4LzIwMTYwMi83NDYxNTgtMjAxNjAyMTQxNzI5NDkzMjUtNDE4ODEzMTg0LnBuZw?x-oss-process=image/format,png
[image_thumb_image_thumb]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8f9fa915c7d54617adc8f341550b8ba2.png