一道原型链的题目,让我质疑了自己的原型知识

88 阅读1分钟

废话不多说上题

function Foo() {
  Foo.a = function () {
    console.log(1);
  };
  this.a = function () {
    console.log(2);
  };
}

Foo.prototype.a = function () {
  console.log(4);
};

Function.prototype.a = function () {
  console.log(3);
};

Foo.a();

let obj = new Foo();
obj.a();
Foo.a();

希望你的答案不是什么2,4,2,或者4,2,1什么的
本题目涉及到的知识点

  • 所有函数都是由Function构造的;任意函数._ proto _ === Function.prototype
  • 构造函数在new之前和之后有不同(我以前不知道。。。我是个智障)
  • 基础的原型知识
  • new操作干了什么
答案: 3 2 1

先说第一个Foo.a(),当我们在自身上找不到属性或者方法时,会去哪里找???原型!对吧,所以它的原型是什么呢?

image.png

该在 [[Prototype]] 里面找对吧,(也就是__proto__)
下图是 [[Prototype]] 的内容

image.png
下图是 Function.prototype的内容

image.png
是一样的对吧!还不相信?这下总信了吧

image.png
所以知识点:所有函数都是由Function构造的;任意函数._ proto _ === Function.prototype
第一个输出3,没问题吧!

我们来说第二个,我们用构造函数new了一个obj对吧,输出2 没有问题对吧,有问题看下图红宝书原话,重点看括号4,再不懂就转行了吧(狗头保命)

image.png

最后一个输出1,这个是当时给我整的最迷的,请看下图,new之后明显多了一个a属性对吧,所以直接从当Foo.a()时,直接在自身上找,不去原型上找,我以前一直以为,构造函数声明了属性,在自身上就有了,实际上是new之后才有

image.png
最后一波总结,要是再不会,真的可以考虑转行了(这次不狗头保命了,该你活该)

image.png