前端

JS的new关键字考题一则

在sf.gg看到这样一个问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Foo() {
  getName = function () {
    alert(1);
  };
  return this;
}
Foo.prototype.getName = function () {
  alert(3);
};
var getName = function () {
  alert(4);
};
function getName() {
  alert(5);
}

new Foo().getName();

自己也尝试解答下。

从上至下，扫一遍，首先要处理下声明提升问题。

这个不难理解，处理后的代码是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var getName = undefined;

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

getName = function () {
  alert(4);
};

function getName() {
  alert(5);
}

new Foo().getName();

这里能看出，4是不能被弹出的，因为被5覆盖了。而且，getName 是定义在了全局上，访问的话是 window.getName。

但是，如果执行了 Foo()，则会把 getName 再次覆盖，此时只能弹出1。

不过，这个其实和最终的答案没啥关系…

主要可以看出 Foo 是构造函数，在其原型链上增加了方法 getName。

最后一句我已开始也看错了，主要是少看了括号。

最后一句可以看成

1
2
var test = new Foo();
test.getName(); // 3

这样就好理解了。新创建的对象访问Foo的原型链，就可以得到结果3。

我把最后一句看成了 new Foo.getName，结果没有找到

1
2
3
4
Foo.getName = function(){
  ...
  return this;  
};

这种内容…

看来是我想的太复杂了…