Prototype chain

※Prototype chain (原形鏈)

function Xxx(){}
    
let x1 = new Xxx();
Xxx.prototype.abc = 1;
    
let x2 = new Xxx();
x2.def = 2;
    
let x3 = new Xxx();
x3.ghi = 3;
    
console.log(x1.abc); // 1
console.log(x2.abc); // 1
console.log(x3.abc); // 1
    
console.log(x1.def); // undefined
console.log(x2.def); // 2
console.log(x3.def); // undefined
    
console.log(x1.ghi); // undefined
console.log(x2.ghi); // undefined
console.log(x3.ghi); // 3

※原形就是物件的公用空間，誰 new 這個物件，誰就可以使用，如下圖：

※要注意的是，原形也是物件，所以物件都有公用空間，也就是原形的原形，但只有定義兩層而已

※可以用__proto__屬性查看

function Xxx(){}
let x = new Xxx();
Xxx.prototype.abc = 2;
    
console.log(x.__proto__);
console.log(x.__proto__.__proto__);
console.log(x.__proto__.__proto__.__proto__); // null

※Chrome 的圖

※兩個紅框的內容是一樣的

※原形的原形的方法

function Xxx(){}
let x = new Xxx();
x.ooo = 1;
Xxx.prototype.abc = 2;
    
console.log("ooo" in x); // true
console.log(x.hasOwnProperty("ooo")); // true
    
console.log("abc" in x); // true
console.log(x.hasOwnProperty("abc")); // false，只找自己，不會往prototype找
    
// 還可以使用 hasOwnProperty 找 hasOwnProperty
console.log(x.hasOwnProperty("hasOwnProperty")); // false
console.log(x.__proto__.hasOwnProperty("hasOwnProperty")); // false
console.log(x.__proto__.__proto__.hasOwnProperty("hasOwnProperty")); // true

※如果定義和原形一樣的變數，會由自己先找，沒有才往原形找，再沒有又往原形的原形找，再沒有，就回傳 undefined

※直接印 x ，會去找原形的原形的 toString方法，想改可以用 x.toString = () => {return "";}; 去覆寫
但較新的瀏覽器版本已經不呼叫 toString 方法了