[JS201 筆記] 物件導向基礎與 prototype

這是 Lidemy 課程：[JS201] 進階 JavaScript：那些你一直搞不懂的地方：物件導向基礎與 prototype 課程筆記。

如果有人不小心看到，請不要太嚴格，這只是我上課的隨筆筆記XD 若有錯誤，請不要吝嗇糾正我，謝謝~

ES6 的物件導向範例：

ES6 才有 class 這個關鍵字。

class Dog { // 名稱開頭通常大寫

    // 建構子，作為初始化
    constructor(name) {
        this.name = name;
    }

    // setter 用來設置值
    setName(name) {
        this.name = name;
    }

    // getter 用來存取值
    getName() {
        return this.name;
    }

    sayHello() {
        console.log('hello' + this.name)
    }
}


let cat = new Dog('cat'); // cat 是 Dog 的 instance
cat.getName();
cat.sayHello();

ES5 的物件導向：

function Dog(name) {
    var myName = name;

    return {
        getName: function() {
            return myName;
        },
        sayHello: function() {
            console.log('hello' + myName);
        }
    }
}

var cat = Dog('cat');
cat.getName();
cat.sayHello();

var cat2 = Dog('cat2');
cat2.getName();
cat2.sayHello();

但是以上會有一個問題：cat.getName() !== cat2.getName()。 每創建一個 instance，就要耗費一個記憶體空間。 因此改用以下的寫法：

// 等同於建構子的作用
function Dog(name) {
    this.name = name;
}

// 設定 method
Dog.prototype.getName = function() {
    return this.name;
}

Dog.prototype,sayHello = function() {
    console.log('hello' + this.name)
}

// new 創建 Dog 的 instance
var cat = new Dog('cat');
console.log(cat);  // Dog {name: 'cat'}
cat.sayHello(); // hello cat

var cat2 = new Dog('cat2');
console.log(cat2);  // Dog {name: 'cat'}
cat2.sayHello(); // hello cat2


console.log(cat.sayHello === cat2.sayHello) // true

從 prototype 來看「原型鍊」

與 javascript 提供的屬性 __proto__ 有關：instance 透過 __proto__ 屬性得以連結 prototype。

從以下例子理解 prototype chain 原型鍊：

function Dog(name) {
    this.name = name;
}

Dog.prototype.getName = function() {
    return this.name;
}

Dog.prototype.sayHello = function() {
    console.log('hello ' + this.name)
}

var cat = new Dog('cat');
var cat2 = new Dog('cat2');

console.log(cat.__proto__ === Dog.prototype) // true
console.log(cat.__proto__.__proto__ === Object.prototype) // true
console.log(cat.__proto__.__proto__.__proto__ === null) // true

cat.sayHello()
/*
prototype chain 原型鍊
呼叫 cat.sayHello() 的時候，找 sayHello() 的順序
1. cat 身上有沒有 sayHello
2. cat.__proto__ 有沒有 sayHello
3. cat.__proto__.__proto__ 有沒有 sayHello
4. cat.__proto__.__proto__.__proto__ 有沒有 sayHello
5. null (找到頂了)
*/

// 順便看一下 Dog 的 __proto__ 是什麼
console.log(Dog.__proto__ === Function.prototype) // true

prototype 的其他應用：

// 自訂 method 讓其他 string 使用
String.prototype.first = function() {
    return this[0]
}

var a = '123';
console.log(a.first()); // 1

new 底層做了什麼

先有 call() 的基本觀念：

function test() {
    console.log(this);
}

// call 裡面傳什麼東西，this 就會是什麼
test.call('123'); // [String: '123']

以下實作 new 的原理：

function Dog(name) {
    this.name = name;
}

Dog.prototype.getName = function() {
    return this.name;
}

Dog.prototype.sayHello = function() {
    console.log('hello ' + this.name)
}

var cat = new Dog('cat');

/*
實作一個 function newDog(){...}，來執行以下程式碼：
var cat2 = newDog('cat2');
cat2.sayHello();
*/

function newDog(name) {
    var obj = {}; // 產生一個 obj
    Dog.call(obj, name); // call constructor 完成初始化物件
    obj.__proto__ = Dog.prototype; // 把 obj 關聯到 Dog 的 prototype
    return obj;
}

物件導向的繼承 Inheritance

繼承用在哪裡：若有共同的屬性可以直接繼承上層的，不用重複寫。

class Dog {

    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log('hello ' + this.name)
    }
}

class BlackDog extends Dog {
    constructor(name) {
        // super() 呼叫上層得已初始化。強制使用 super()。傳參數進去給上層的 constructor 使用。
        super(name); // Dog 的 constructor。
        this.sayHello(); // 初始化的時候就 say Hello
    }

    test() {
        console.log('test:', this.name)
    }
}

const black = new BlackDog('black'); // hello black
black.test();  // test: black