2020年了，別再重複學習原型了

DIVMonster發表於2020-05-14
原型

前置

原型是 JavaScript 巧妙的設計，它非常容易理解。都 2020 年了，看完這篇希望你以後不需要再重複學習 JavaScript 原型了。如有不當之處，懇請指點一二！

單詞

下面是相關單詞及其翻譯,牢牢記住它們就成功一半了。

  • constructor 構造器
  • proto & prototype 原型；雛形；最初形態

constructor

function Drink() {}

const a = new Drink()
console.log(a.constructor) // ƒ Drink() {}

a 是由函式 Drink 構造而來的。

prototype

簡單寫點程式碼，後面全是 console.log。

function f() {
  this.a = 1
  this.b = 2
}

const o = new f()
f.prototype.b = 3
f.prototype.c = 4

o 是 new f() 返回的結果，不妨回顧一下當執行 new f() 時， new 操作符對函式 f 做了些什麼事。

  1. 建立一個空物件（即{}）: var obj = Object.create(null)。
  2. 連結該物件（即設定該物件的建構函式）到另一個物件（本函式）， 這個空物件繼承其原型: obj.__proto__ = f.prototype。
  3. 使用指定的引數呼叫函式 f，new Foo 等同於 new Foo()，也就是 f 不帶任何引數呼叫的情況; 將步驟 1 建立的物件作為 this 的上下文（將 this 繫結到新建立的物件 | f 函式中的 this 的指標替換成 obj） ，f.call(obj)。
  4. 如果該函式沒有顯式地在函式中寫 return，則返回 this。

對於一個函式，如果不使用 new 操作它，它只是一個正常的函式；使用 new 操作符僅僅改變了它的 this 指向且在函式內部隱式地建立了一個物件，然後再稱之為 “建構函式”。僅此而已。

如果你對第三步中的操作有困惑，看幾個簡單的例子：

設定建構函式 
function f() {
  this.a = 1
  this.b = 2
}
f()
console.log(f.constructor) //ƒ Function() { [native code] }

function f() {
  this.a = 1
  this.b = 2
}

const o = new f()
console.log(o.constructor)
// ƒ f() {
//   this.a = 1
//   this.b = 2
// }
this指標替換 
function f() {
  console.log(this) // window
  this.a = 1
  this.b = 2
}

f()

function f() {
  console.log(this) // f {}
  this.a = 1
  this.b = 2
  console.log(this) // f {a: 1, b: 2}
}

new f()
什麼是call？ 
const drink = {
  name: 'Coca Cola',
  color: 'black',
  price: '3.5',
  intro: function () {
    console.log(`名稱：${this.name},顏色：${this.color},價格：${this.price}`)
  },
}

const computer = {
  name: 'Orange Juice',
  color: 'orange',
  price: '4',
}

drink.intro.call(computer) //名稱：Orange Juice,顏色：orange,價格：4

確保上面的內容你能十分清晰，否則不要進行下面的內容。

console.log(o.b) // 2

o 的值是通過 new f() 得到的物件，this 指向這個物件，函式中給 this 新增了屬性 b 為其賦值為 2，並將他返回。所以 這裡列印出 2。f.prototype 是無法被訪問到的，這種情況還被稱之為 property shadowing ---屬性遮蔽。

console.log(o.c) // 4
console.log(o.__proto__.c) // 4
console.log(o.__proto__ === f.prototype) // true

函式中並沒有給 this 新增 c 屬性併為其賦值 4，但是列印 o.c 返回 4。通過上文你已經知道 constructor 是幹什麼的了：

console.log(o.constructor.prototype.b) // 3

o 是由函式 f 構造的，o.constructor 返回函式 f，所以o.constructor.prototype === f.prototype, f.prototype 返回什麼呢？上面初始程式碼中直接寫好的，現在可以翻上去看看 f.prototype，所以 o.constructor.prototype.b 返回 3。查詢物件上的屬性就是先找自身再通過 __proto__ 一層一層往上找的：

  • 如果自身有該屬性直接獲取它的值；
  • 如果自身有且其構造器的 prototype 上也有，屬性遮蔽不會忘了吧；
  • 如果一直沿著 __proto__ 找但沒找到，會返回 undefined；為什麼呢？
console.log({}.constructor) // ƒ Object() { [native code] }
console.log({}.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null

看到這裡，應該十分清晰了。這就是最終為什麼會返回 undefind 的原因：Object.prototype.__proto__ 指向 null。

小練習

做一個簡單又不給你解釋的小練習吧！

console.log(o.b)
console.log(o.__proto__.b)
console.log(o.d)
答案 
// 2
// 3
// undefined

重要提示

對於 Object.prototype.__proto__：

測試程式碼

如果看完還是不太明白，動手試一試吧！我把本文用到的程式碼片段放到此處供你快速拷貝。

function f() {
  this.a = 1
  this.b = 2
}

const o = new f()
f.prototype.b = 3
f.prototype.c = 4

console.log(o.b) // 2

console.log(o.c) // 4
console.log(o.__proto__.c) // 4
console.log(o.__proto__ === f.prototype) // true

console.log(o.constructor.prototype.b) // 3

console.log(o.b) // 2
console.log(o.__proto__.b) // 3
console.log(o.d) // undefined

console.log({}.constructor) // ƒ Object() { [native code] }
console.log({}.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null

// --------- other --------
console.log(o.__proto__) // {b: 3, c: 4, constructor: ƒ}
console.log(o.__proto__.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null
console.log(o.__proto__.__proto__.__proto__) // null
console.log(f.prototype.__proto__ === Object.prototype) // true

相關文章