摘要：原文如果按面向?qū)ο蟮乃悸啡ブv的，還是很難去理解，我們可以從另一個(gè)方向去理解一下它。

原文：https://legacy.ofcrab.com/press/javascript-new.html

如果按面向?qū)ο蟮乃悸啡ブv JavaScript 的 new，還是很難去理解，我們可以從另一個(gè)方向去理解一下它。

我是一名程序員，也是一個(gè)人，我可能：

有一個(gè)響亮亮的名稱

在某一天出生

是個(gè)男人

我能行走

我還能跑步

還能跳躍

能說(shuō)話

我還能寫代碼

那么，在 JavaScript 中，我們可能像下面這樣表達(dá)我：

const me = {
  name: "大胡子農(nóng)同工潘半仙",
  birth: "1988-08-08",
  sex: "male",
  walk: function (speed, direction, duration) {
    // 以 speed 的速度向 direction 方向行走 duration 長(zhǎng)的時(shí)間
  },
  run: function (speed, direction, duration) {
    // 像跑步一樣，速度
  },
  jump: function (high, direction, angle) {
    // 以 angle 角度向 direction 方向跳 high 高
  },
  speak: function (letters) {
    // 說(shuō)出 letters 這些詞
  },
  coding: function (language, line) {
    // 寫程序呢
  }
}

當(dāng)然，這個(gè)世界上不可能只有我一個(gè)程序員，更不可能只有我一個(gè)人，就像我們這個(gè)小公司，就有七八百人，似乎所有這些人的數(shù)據(jù)都保存在數(shù)據(jù)庫(kù)里面：

我們從數(shù)據(jù)庫(kù)中查詢出上面這幾條記錄，在 JavaScript 可能表示為一個(gè)二維數(shù)據(jù)，然后要?jiǎng)?chuàng)建出這三個(gè)人來(lái)，可能是下面這樣的：

const people = DB.query()
// people = [["潘韜", "male", "1988-08-08"], [...], [...]]
for (let i = 0; i < people.length; i++) {
  let [name, sex, birth] = people[i]
  people[i] = {
    name,
    sex,
    birth,
    walk: function () {},
    run: function () {},
    jump: function () {},
    speak: function () {},
    coding: function () {}
  }
}

上面大家已經(jīng)發(fā)現(xiàn)，像上面這樣去創(chuàng)建三個(gè)對(duì)象， walk、run、jump、speak、coding 這五件能做的事情（方法），其實(shí)做法都一樣，但是我們卻重復(fù)的去描述該怎么做了，其實(shí)就占用了很多資源，所以，我們可能會(huì)像下面這樣改進(jìn)一下：

const walk = function walk () {}
const run = function run () {}
const jump = function jump () {}
const speak = function speak () {}
const coding = function coding () {}

for (let i = 0; i < people.length; i++) {
  let [name, sex, birth] = people[i]
  people[i] = {
    name,
    sex,
    birth,
    walk,
    run,
    jump,
    speak,
    coding
  }
}

不同的人共用相同的資源（方法）

對(duì)，人類相比于這個(gè)世界上的其它生物來(lái)講，數(shù)量根本就值得一提，如果像上面這樣，可能各種不同物種能做的事情都會(huì)要定義出不同的函數(shù)，蠕動(dòng)肯定不是人類會(huì)去做的事情，但很多別的生物會(huì)做，那么為了代碼管理方便，我們把人能做的所有事情都放在一個(gè)對(duì)象里面，這樣就相當(dāng)于有了一個(gè)命名空間了，不會(huì)再跟別的物種相沖突：

const whatPeopleCanDo = {
    walk: function () {},
    run: function () {},
    jump: function () {},
    speak: function () {},
    coding: function () {}
}
for (let i = 0; i < people.length; i++) {
  let [name, sex, birth] = people[i]
  people[i] = {
    name,
    sex,
    birth,
    ...whatPeopleCanDo
  }
}

但是，有的人可能我們并不知道他的 sex 信息是多少，有的也有可能不知道 birth 是多少，但是我們希望在創(chuàng)建這個(gè)人的時(shí)候，能給不知道的數(shù)據(jù)一些初始數(shù)據(jù)，所以， whatPeopleCanDo 并不能完全的表達(dá)出一個(gè)人，我們?cè)俑倪M(jìn)：

const peopleLike = {
    name: "",
    sex: "unknown",
    birth: "",
    walk: function () {},
    run: function () {},
    jump: function () {},
    speak: function () {},
    coding: function () {}
}
for (let i = 0; i < people.length; i++) {
  let [name, sex, birth] = people[i]
  people[i] = {
    ...peopleLike,
    name: name || peopleLike.name,
    sex: sex || peopleLike.sex,
    birth: birth || peopleLike.birth
  }
}

這樣一來(lái)，我們就可以為不知道的屬性加一些默認(rèn)值，我們稱 peopleLike 這個(gè)東東就為原型，它表示了像人類這樣的物種有哪些屬性，能干什么事情。

雖然上面已經(jīng)比最開始的版本好得多了，但是還是能有很大的改進(jìn)空間，我們現(xiàn)在像下面這樣改一下：

const peoplePrototype = {
    name: "",
    sex: "unknown",
    birth: "",
    walk: function () {},
    run: function () {},
    jump: function () {},
    speak: function () {},
    coding: function () {}
}
for (let i = 0; i < people.length; i++) {
  let [name, sex, birth] = people[i]
  people[i] = {
    name: name || peoplePrototype.name,
    sex: sex || peoplePrototype.sex,
    birth: birth || peoplePrototype.birth,
    __proto__: peoplePrototype
  }
}

我們不再把人類原型里面的所有方法都綁定到某個(gè)人身上，而是像上面這樣，用一個(gè)特殊的字段 __proto__ 來(lái)指定：我的原型是 peoplePrototype 這個(gè)對(duì)象，同時(shí)，我們還制定了一個(gè)規(guī)則：如果你想請(qǐng)求我的某個(gè)方法，在我自己身上沒有，那就去我的原型上面找吧，如果我的原型上面沒有，那就去我的原型的原型上面去找，直到某個(gè)位置，沒有更上層的原型為止

像上面這樣創(chuàng)建的 people 對(duì)象，有自己的屬性，但是當(dāng)我們?nèi)ピL問 people.speak() 方法的時(shí)候，其實(shí)訪問的是 people.__proto__.speak()，這是我們的規(guī)則。

我們總不能在需要?jiǎng)?chuàng)建新人的時(shí)候，都像上面這樣，自己去寫一個(gè)對(duì)象，然后再手工指定它的原型是什么，所以，我們可以創(chuàng)建一個(gè)函數(shù)，專門用來(lái)生成人類的：

const peoplePrototype = {
    name: "",
    sex: "unknown",
    birth: "",
    walk: function () {},
    run: function () {},
    jump: function () {},
    speak: function () {},
    coding: function () {}
}
const makePeople = function makePeople(name, sex, birth) {
  let people = {}
  people.name = name || peoplePrototype.name
  people.sex = sex || peoplePrototype.sex
  people.birth = birth || peoplePrototype.birth
  people.__proto__ = peoplePrototype
  return people
}

people = people.map(makePeople)

現(xiàn)在這樣我們只需要引入 makePeople 這個(gè)函數(shù)就可以隨時(shí)隨地創(chuàng)建新人了。

顯然，上面這樣并不是最好的辦法，定義了一個(gè)原型，又定義了一個(gè)原型對(duì)象，我們可以把這兩個(gè)合并到一起，所以，就可以有下面這樣的實(shí)現(xiàn)了：

const People = function People (name, sex, birth) {
  let people = {}
  people.name = name || People.prototype.name
  people.sex = sex || People.prototype.sex
  people.birth = birth || People.prototype.birth
  people.__proto__ = People.prototype
  return people
}

People.prototype = {
    name: "",
    sex: "unknown",
    birth: "",
    walk: function () {},
    run: function () {},
    jump: function () {},
    speak: function () {},
    coding: function () {}
}

我們直接把創(chuàng)建人類的那個(gè)函數(shù)叫作 People，這個(gè)函數(shù)有一個(gè)屬性叫 prototype，它表示用我這個(gè)函數(shù)創(chuàng)建的對(duì)象的原型是什么，這個(gè)函數(shù)做的事情還是以前那些事兒，創(chuàng)建臨時(shí)對(duì)象，設(shè)置對(duì)象的屬性，綁定一下原型，然后返回。

我們除了人，還有別的動(dòng)物，比如 Tiger、Fish等，按上面的方式，在 Tiger() 或者 Fish() 函數(shù)里面都會(huì)建立不同的 tiger 或者 fish 名稱的臨時(shí)對(duì)象，這樣太麻煩，我們把這種函數(shù)創(chuàng)建出來(lái)的對(duì)象，都可以統(tǒng)一叫作“這個(gè)對(duì)象” ，也就是 this object，不在關(guān)心是人是鬼，統(tǒng)一把所有的臨時(shí)對(duì)象都叫 thisObject 或者更簡(jiǎn)單的就叫作：這個(gè)，即 this。

const People = function People (name, sex, birth) {
  let this = {}
  this.name = name || People.prototype.name
  this.sex = sex || People.prototype.sex
  this.birth = birth || People.prototype.birth
  this.__proto__ = People.prototype
  return this
}

當(dāng)然，上面的這一段代碼是有問題的，只是假想一樣，這樣是不是可行。

到現(xiàn)在為止，我們發(fā)現(xiàn)了整個(gè)代碼的演變，是時(shí)候引出這個(gè) new 了，它來(lái)干什么呢？它后面接一個(gè)類似上面這種 People 的函數(shù)，表示我需要?jiǎng)?chuàng)建一個(gè) People 的實(shí)例，它的發(fā)明就是為了解決上面這些所有重復(fù)的事情，有了 new 之后，我們不需要再每一次定義一個(gè)臨時(shí)對(duì)象，在 new 的上下文關(guān)系中，會(huì)在 People 函數(shù)體內(nèi)自動(dòng)為創(chuàng)建一個(gè)臨時(shí)變量 this，這個(gè)就表示即將被創(chuàng)建出來(lái)的對(duì)象。同時(shí)，對(duì)于使用 new 創(chuàng)建的實(shí)例，會(huì)自動(dòng)的綁定到創(chuàng)建函數(shù)的 prototype 作為原型，還會(huì)自動(dòng)為 People 創(chuàng)建一個(gè) constructor 函數(shù)，表示這個(gè)原型的創(chuàng)建函數(shù)是什么，所以，我們可以改成下面這樣的了：

const People = function People (name, sex, birth) {
  this.name = name || People.prototype.name
  this.sex = sex || People.prototype.sex
  this.birth = birth || People.prototype.birth
}

People.prototype.name = ""
People.prototype.sex = "unknown"
People.prototype.birth = ""
People.prototype.walk = function () {}
People.prototype.run = function () {}
People.prototype.jump = function () {}
People.prototype.speak = function () {}
People.prototype.coding = function () {}

people = people.map(p => new People(...p))

new 到底干了什么？當(dāng) new People() 的時(shí)候

創(chuàng)建臨時(shí)變量 this，并將 this 綁定到 People 函數(shù)體里

執(zhí)行 People.prototype.constructor = People

執(zhí)行 this.__proto__ = People.prototype

執(zhí)行 People 函數(shù)體中的自定義

返回新創(chuàng)建的對(duì)象