[2019-10-12] 進階 JavaScript - 物件導向基礎與 prototype

[gracekrcx]

物件導向的基礎

（這是一個箱子裡，有多個你已定義好的功能(你想要的功能)，有需要你可以一直複製相同箱子的故事）
（在物件導向的世界裡，不太會有直接去 call 一個 function 的情形，例如 add()，通常會是對一個物件做操作，例如：obj.add()）

ECMAScript 6 中引入了類別 (class) 作為 JavaScript 現有原型程式(prototype-based)繼承的語法糖。

類別語法並不是要引入新的物件導向繼承模型到 JavaScript 中，而是提供一個更簡潔的語法來建立物件和處理繼承。
(JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.)

ES6 class

// class 像是一個設計圖
class Dog {
 setName(name){
  this.name = name // 這裡的 this 就是呼叫他的人，操控這個 instance 的人，在這裡就是 d
  console.log('this-->',this) // Dog {name: "PooBoo"}
 }
 sayHello(){
  console.log(this.name)
 }
}

var d = new Dog() // instance : 用 new 這個關鍵字去實體化
d.setName('PooBoo')
d.sayHello()
var d2 = new Dog()
console.log(d.sayHello() === d2.sayHello()) // true

ES6 class - Constructor

class Dog {
 // 在 new 的時候，其實就是在 call 這個 constructor 
 // 在被 new 時就會 call 這個 function 所以很適合做一些初始化的事情
 constructor(name) {
  this.name = name
 }
}

var d = new Dog('aaa') // new 時帶入參數

ES5 的 class 做了什麼

1. 用一個 function 去實作 constructor
2. 用 prototype 去實作 method

♥♥♥
ES5 裡可以把一個 function 當作一個 constructor 用，new 一個 function 產生一個 instance，背後的機制 javascript 會做好

---> 屬性，method 都放在 constructor

// 這個 function 就是 constructor
function Dog(name) {
 this.name = name
 this.getName = function() {
  return this.name
 }
}
var b = new Dog('FooPan')
var d = new Dog('BooPoo')
console.log( b.getName == d.getName)
// false，如果這樣寫 new 幾個 Dog 就會有幾個 getName function
// 因為 function 記憶體位置是不一樣的
// 比較好的寫法是 Dog.prototype.getName 

// 使用 prototype 寫法
function Dog(name) {
 this.name = name
 }
}
// 在 Dog 的 prototype 上加一個 function
Dog.prototype.getName = function(){
 return this.name
}
Dog.prototype.sayHello = function(){
 console.log(this.name)
}

var b = new Dog('FooPan')
var d = new Dog('BooPoo')
console.log(d) // d 就是 Dog 的 instance

console.log(b.getName === d.getName) // true

// d.__proto__ 是什麼
{getName: ƒ, sayHello: ƒ, constructor: ƒ}

// Dog.prototype(d.__proto__) 有 method and constructor
console.log(d.__proto__ === Dog.prototype) // true
console.log(Dog.__proto__ === Function.prototype) // true

instance 和 prototype 之間是如何串連的

1. 透過屬性 __proto__
2. 在 new 一個 instance 時，javascript 就幫你加了一個屬性 __proto__

soo.__proto__ === Dog.prototype  // true

從 prototype 來看「原型鍊」__proto__

instance 身上有 getName (但這樣就會有一直重複複製相同的 function 的問題)

結論：

1. 會先找 instance 裡有沒有 getName()
2. 如果沒有才會去 proto 找

function Dog(name) {
 this.name = name
 this.getName = function() {
  return 'MyName'
 }
}

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

var soo = new Dog('Soo')
console.log(soo.getName())
// 'MyName'

d 的 instance 身上沒有 sayHello，所以往上找 proto

prototype chain 原型練

d.sayHello()
查找順序

1. d
   身上有沒有 sayHello
2. d.__proto__
   有沒有 sayHello
3. d.__proto__.__proto__
   有沒有 sayHello
4. d.__proto__.__proto__.__proto__
   有沒有 sayHello // null
5. null 出現代表已經是最上層了

d.sayHello()

d.__proto__ === Dog.prototype
d.__proto__.__proto__ === Object.prototype  // 更上層
Dog.prototype.__proto__ === Object.prototype  // true

// 所以也可以在 Object 上設定 sayHello

Object.prototype.sayHello = function(){
 console.log('Object', this.name)
}

string.toUpperCase

透過 __proto__這個屬性，可以知道 s.toUpperCase 就是 String.prototype.toUpperCase() 這個 function

var s = 'abcd'
var newS = s.toUpperCase() 

s.toUpperCase === String.prototype.toUpperCase //true
s.__proto__ === String.prototype // true
s.__proto__.toUpperCase() === String.prototype.toUpperCase() // true

new 做了什麼事？

1. 產生一個新的 object
2. 執行 constructor，完成物件初始化，有了物件
3. 用 __proto__ 產生關聯

// 產生一個新的 Object

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

var soo = new Dog('Soo')
{
 name : 'Soo'
 getName : function(){ return name }
}

function test() {
 console.log(this)
}
test.call(true)  // 第一個參數就會是 this

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

Dog.prototype.sayHello = function(){
 console.log(this.myName)
}

var booPoo = newDog('booPoo') // newDog 要做 new 做的事情
booPoo.sayHello() // booPoo

// new 在做什麼
function newDog(name){
 var obj = {} // 產生一個新的 object

 Dog.call(obj, name) // 執行 constructor
 console.log(obj) // {myName: "booPoo"}

 obj.__proto__ = Dog.prototype // 用 __proto__ 產生關聯
 return obj
}

物件導向的繼承：Inheritance

繼承就像人會遺傳父母的DNA

1. 有共同的屬性時，就不用重複做一樣的東西
2. 父母有的東西，你都可以用
3. javascript 裡強制在用 this 前要先 call super()

class Dog {
 constructor(obj){
  console.log('1-->')
  this.name = obj.name
  this.age = obj.age
 }

 sayHello(){
  console.log(this.name)
 }
}
// BlackDog 繼承 Dog，Dog有的屬性 BlackDog 都可以用
class BlackDog extends Dog {
 // 沒有 constructor 所以他會去找他父層的 constructor 
 test(){
  console.log('test!', this) // BlackDog {name: "Black", age: undefined}
 }
}

const pooBoo = new BlackDog({name : 'Black'})
pooBoo.test()

BlackDog 自己加上 constructor

class Dog {
 constructor(obj){
  this.name = obj.name
  this.age = obj.age
 }

 sayHello(){
  console.log(this.name)
 }
}

class BlackDog extends Dog {
 constructor(obj){
  super(obj) 
  // 這裏 call super() 就是在 call 父層的 constructor
  // call Dog.constructor，強制這裡一定要 call super() 
  // 去避免沒有初始化就直接用 this call function
  this.sayHello()
 }
 test(){
  console.log('test!', this) // BlackDog {name: "Black", age: undefined}
 }
}

const pooBoo = new BlackDog({name : 'Black'})
pooBoo.test()

參考文章

Classes

[gracekrcx]

我覺得的物件導向開發

是一些功能的模組，變得比較有規範

例如：一個錢包

需要的功能有

1. 存錢
2. 領錢
3. 查詢戶頭裡的餘額

例如：會員個人資料模組

需要的功能有

1. 上傳照片
2. 新增個人資料
3. 修改個人資料
4. 查詢會員點數

例如：一隻狗

狗應該會有的行為，應該每隻狗都會有

1. 會跑
2. 會叫
3. 會翻滾

[gracekrcx]

在 ES6

可以使用 class 語法去寫物件導向

在 ES5

使用 function 當作 constructor 搭配 prototype 語法去寫物件導向