一道颇有难度的JavaScript题

╰半夏微凉° 2022-05-28 10:40 109阅读 0赞

分享一道稍微有难度的JavaScript题目。

请问上述代码在浏览器环境下，输出结果是多少？

揭晓一下最终答案:

2    4    1    1    2    3    3    3 //外层new: Uncaught TypeError: (intermediate value).getName(...) is not a constructor

来介绍一下new

new constructor[([arguments])]

`constructor`

一个指定对象实例的类型的类或函数。

`arguments`

一个用来被 `constructor` 调用的参数列表。

创建一个用户自定义的对象需要两步：

1.  通过编写函数来定义对象类型。
2.  通过`new`来创建对象实例。

创建一个对象类型，需要创建一个指定其名称和属性的函数；对象的属性可以指向其他对象，看下面的例子：

当代码 `new ``Foo``(...)` 执行时，会发生以下事情：

1.  一个继承自 `Foo``.prototype` 的新对象被创建。
2.  使用指定的参数调用构造函数 `Foo` ，并将 `this` 绑定到新创建的对象。`new Foo` 等同于 `new ``Foo``()`，也就是没有指定参数列表，`Foo` 不带任何参数调用的情况。
3.  由构造函数返回的对象就是 `new` 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

你始终可以对已定义的对象添加新的属性。例如， `car1.color = "black"` 语句给 `car1` 添加了一个新的属性 `color` ， 并给这个属性赋值 "`black`"。但是，这不会影响任何其他对象。要将新属性添加到相同类型的所有对象，你必须将该属性添加到`Car`对象类型的定义中。

你可以使用 `Function.prototype` 属性将共享属性添加到以前定义的对象类型。这定义了一个由该函数创建的所有对象共享的属性，而不仅仅是对象类型的其中一个实例。下面的代码将一个值为`null`的color属性添加到`car`类型的所有对象，然后仅在实例对象`car1`中用字符串“`black`”覆盖该值。

下面，来正式分析:  
　　前四道难度不是很大，主要是后三道，基本是全军覆没，感叹实在是太绕了了。后面慢慢分析了一下，逐个讲一下吧。

首先必须注意一个问题

function Foo() {
        getName = function () { 
            console.log('1');
        };
        return this;
    }

在函数内部声明的`getName`变量，前面是不带有`var`、`let`,`const`的，所以其实根据**LHS**(这个的介绍可以去的我博客看一下关于LHS和RHS的总结)，声明的`getName`是在全局范围内(也是就`window`)。  
　　其次需要明确你是否知道下面代码在浏览器中的执行结果：

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

上述代码的执行结果是:`4`。原因是这样的，`var`声明的变量和函数声明`function`都会被提升，但是函数声明的提升的级别是比  
`var`要高的，所以上面的代码的实际执行结果是：

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

后一个函数表达式`getName`覆盖了前面的函数声明`getName`,实际执行的是函数表达式（也就是是为什么JavaScript永远不会有函数重载这么一说了），所以输出的是`4`。  
　　首先我给下面的代码添加一下必要的注释：

//函数声明
    function Foo() {
        //全局变量
        getName = function () { 
            console.log('1');
        };
        return this;
    }
    //为函数添加属性getName,其类型是Function，所以这里也可以看出来，Function也是一种Object
    Foo.getName = function () {
        console.log('2');
    };
    //为Foo的原型添加方法getName
    Foo.prototype.getName = function () { 
        console.log('3');
    };
    var getName = function () { 
        console.log('4');
    };
    function getName() { 
        console.log(5);
    }

下面执行第一条语句：

Foo.getName();

函数`Foo`本身并没有执行，执行的是函数的属性`getName`，当然输出的是：`2`.  
　　接下来执行：

getName();

这是在全局范围内执行了`getName()`，有两条对应的`getName`的声明，根据前面我们所提到的提升的级别来看实际执行是函数表达式：

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

所以输出的是`4`。  
　　接下来执行

Foo().getName();

首先看一下JavaScript的操作符优先级,从高到低排序  
![1460000007979733_w_1332_h_1128][]  
　　从上面可以看出来`()`与`.`优先级相同，所以`Foo().getName()`从左至右执行。首先运行`Foo()`,全局的`getName`被覆盖成输出`console.log('1')`,并且返回的`this`此时代表的是`window`。随后相当于执行的`window.getName()`,那么输出的实际就是`1`(被覆盖)。  
　　下面到了

getName();

这个不用说了，执行的还是：`1`(和上面一毛一样)。  
　　下面到了三个最难的部分：

new Foo.getName();

对于这条语句的执行，有两种可能：

(new Foo).getName()

或

new (Foo.getName)()

但是我们根据操作符优先级表可以得知，其实上`.`操作符要比`new`优先级要高，所以实际执行的是第二种，所以是对

Foo.getName = function () {
        console.log('2');
    };

函数执行了`new`操作，当然输出的是`2`。  
下面到了执行

new Foo().getName();

这个语句的可能性也有两种：

(new Foo()).getName();

或者

new (Foo().getName)();

那么应该是那种的呢？原来我以为会是第二种的执行方式，后面通过浏览器调试发现真实的执行的方式是第一种。我看到题目的作者是这么解释的：

> 首先看运算符优先级括号高于new。实际执行为(new Foo()).getName()。遂先执行Foo函数。

我觉得上面的解释是有问题的，对比上面两种执行方式，第一种是先执行`new`，然后执行的是`.`操作符，然后执行的是`()`。第二种是先执行了`()`,再执行的是`.`，最后执行`new`操作符。如果真的按照引用所说的用优先级的方式判别，其实恰恰应该执行的是第二种而不是第一种。  
　　后来总算找到原因了，原来之前那个出现的比较多的JavaScript优先级的表并不完整，万能的MDN给出了最权威的JavaScript优先级表[运算符优先级][Link 1]  
　　我列举出最重要的部分（由高到低）：  
　　![1460000007979734_w_1196_h_630][]  
　　所以带参数的`new`操作符是优先级最高的，这下就没有问题了，执行顺序确实应该是第一种。  
　　那么按照`(new Foo()).getName();`来执行，情况就就很简单了，`(new Foo())`返回了新生成的对象，该对象没有`getName()`方法，所以在`prototype`中找到了`getName()`方法。所以输出的是`3`。  
　　胜利就在眼前，我们看一下最后一问。

new new Foo().getName();

和上一步一样的方法，我们按照优先级表给分析一下这个语句到底是怎么执行的。  
　　首先带参数的`new`操作符优先级最高，第一步划分为：

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

第二步划分为：

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

所以执行`(new Foo()).getName`这个函数是对应的Foo.prototype.getName,所以执行`new (Foo.prototype.getName)()`肯定输出的是`3`。  
　　哈哈哈，这么难得题终于解决了，开心~总结一下吧，首先JavaScript知识最好去MDN去查，万一别的地方写错了真的是害人不浅。其次，如果在写代码的时候还是少利用操作符优先级这种东西，一旦不明确的地方就立刻用`()`，代码的可阅读性真的是很重要！很重要！很重要！毕竟代码还是给人看~  
　　如果有写的不正确的地方，欢迎大家指出，资历深浅，请多指教。欢迎大家去围观我的博客呀~~[http://mrerhu.github.io][http_mrerhu.github.io]  
  
原文地址: [https://segmentfault.com/a/1190000007979730][https_segmentfault.com_a_1190000007979730]

[1460000007979733_w_1332_h_1128]: /images/20220528/eade331ca83942529db2956c7747c03c.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
[1460000007979734_w_1196_h_630]: /images/20220528/effbae324f3e4580bf5a1d71eb5cdaf4.png
[http_mrerhu.github.io]: http://mrerhu.github.io/
[https_segmentfault.com_a_1190000007979730]: https://segmentfault.com/a/1190000007979730