2020年了,別再重複學習原型了
阿新 • • 發佈:2020-05-14
# 前置
原型是 JavaScript 巧妙的設計,它非常容易理解。都 2020 年了,看完這篇希望你以後不需要再重複學習 JavaScript 原型了。如有不當之處,懇請指點一二!
# 單詞
下面是相關單詞及其翻譯,牢牢記住它們就成功一半了。
- constructor 構造器
- proto & prototype 原型;雛形;最初形態
# constructor
```js
function Drink() {}
const a = new Drink()
console.log(a.constructor) // ƒ Drink() {}
```
a 是由函式 Drink 構造而來的。
# prototype
簡單寫點程式碼,後面全是 `console.log`。
```js
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 指向且在函式內部隱式地建立了一個物件,然後再稱之為 “建構函式”。僅此而已。
如果你對第三步中的操作有困惑,看幾個簡單的例子:
確保上面的內容你能十分清晰,否則不要進行下面的內容。
```js
console.log(o.b) // 2
```
o 的值是通過 `new f()` 得到的物件,this 指向這個物件,函式中給 this 添加了屬性 b 為其賦值為 2,並將他返回。所以 這裡打印出 2。`f.prototype` 是無法被訪問到的,這種情況還被稱之為 property shadowing ---**屬性遮蔽**。
```js
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 是幹什麼的了:
```js
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`;為什麼呢?
```js
console.log({}.constructor) // ƒ Object() { [native code] }
console.log({}.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null
```
看到這裡,應該十分清晰了。這就是最終為什麼會返回 undefind 的原因:`Object.prototype.__proto__` 指向 null。
# 小練習
做一個簡單又不給你解釋的小練習吧!
```js
console.log(o.b)
console.log(o.__proto__.b)
console.log(o.d)
```
```js
// 2
// 3
// undefined
```
# 重要提示
對於 `Object.prototype.__proto__`:
![](https://gitee.com/guangzan/imagehost/raw/master/markdown/proto-tip.jpg)
# 測試程式碼
如果看完還是不太明白,動手試一試吧!我把本文用到的程式碼片段放到此處供你快速拷貝。
```js
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
```