15. getName 以及所有涉及到 prototype 的题

[fedono]

问题

function Foo() {
  getName = function () { console.log (1); };
  return this;
}
Foo.getName = function () { console.log (2);};
Foo.prototype.getName = function () { console.log (3);};
var getName = function () { console.log (4);};
function getName() { console.log (5);}

//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName(); 
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

[fedono]

解答

参考

• 前端程序员经常忽视的一个JavaScript面试题
• mdn-运算优先级

  要点

new Foo.getName() 中因为没有执行Foo() 这个函数，所以会首先获取静态属性 Foo.getName() 执行 new Foo().getName() 中执行了 Foo() 函数，所以顺序是 (new Foo()).getName() ，那么就是获取原型上的getName() 函数

[fedono]

写出以下的输出结果是什么

要注意的事，第二次中的 A.prototype 进行重写了

function A(){}
A.prototype.x = 10;

let a = new A();

A.prototype = {x: 20, y: 30};
let b = new A();

console.log(a.x);
console.log(a.y);
console.log(b.x);
console.log(b.y);

最后输出是

10
undefined
20
30

这时候打印

console.log(a.__proto__); // A { x: 10 }
console.log(b.__proto__); //  { x: 20, y: 30 }

如果不对 prototype 进行重写，也就是如下

function A(){}
A.prototype.x = 10;

let a = new A();

// A.prototype = {x: 20, y: 30};
A.prototype.y = 20;
let b = new A();

console.log(a.x);
console.log(a.y);
console.log(b.x);
console.log(b.y);

这时候打印

console.log(a.__proto__); //  A { x: 10, y: 20 }
console.log(b.__proto__); //  A { x: 10, y: 20 }