寫(xiě)在前面

此系列來(lái)源于開(kāi)源項(xiàng)目：前端 100 問(wèn)：能搞懂 80%的請(qǐng)把簡(jiǎn)歷給我
為了備戰(zhàn) 2021 春招
每天一題，督促自己
從多方面多角度總結(jié)答案，豐富知識(shí)
請(qǐng)寫(xiě)出如下代碼的打印結(jié)果
簡(jiǎn)書(shū)整合地址：前端 100 問(wèn)

正文回答

問(wèn)題&回答

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

// 以上只是 Foo 的構(gòu)建方法，沒(méi)有產(chǎn)生實(shí)例，此刻也沒(méi)有執(zhí)行

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

// 現(xiàn)在在 Foo 上掛載了原型方法 a ，方法輸出值為 3

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

// 現(xiàn)在在 Foo 上掛載了直接方法 a ，輸出值為 4

Foo.a();

// 立刻執(zhí)行了 Foo 上的 a 方法，也就是剛剛定義的，所以
// # 輸出 4

let obj = new Foo();

/* 這里調(diào)用了 Foo 的構(gòu)建方法。Foo 的構(gòu)建方法主要做了兩件事：
1. 將全局的 Foo 上的直接方法 a 替換為一個(gè)輸出 1 的方法。
2. 在新對(duì)象上掛載直接方法 a ，輸出值為 2。
*/

obj.a();

// 因?yàn)橛兄苯臃椒?a ，不需要去訪問(wèn)原型鏈，所以使用的是構(gòu)建方法里所定義的 this.a，
// # 輸出 2

Foo.a();

// 構(gòu)建方法里已經(jīng)替換了全局 Foo 上的 a 方法，所以
// # 輸出 1