物件與繼承 -2

物件導向程式設計(OOP)分為層次有：
Layer 1： 單一物件的物件導向(OOP)
Layer 2： 物件的原型鍊(Prototype chains)
Layer 3: 建構器(Constructor)作為實體的工廠
Layer 4: 衍生子類別(subclassing)藉由繼承現有建構器來建立新的建構器

Layer 1： 單一物件的物件導向(OOP)

JS中所有物件都是mappings特性or屬性(property)：

• key : value
• 字串 : 任何js的值、函式(methods方法)

特性又分成三種

1. 具名的資料特性 properties(named data properties)
   • 最常見 key: value的mappings關係
2. 具名的存取器特性 accessors (named accessor properties)
   • 調用時像是在讀取或寫入特性
   • eg. setter, getter
3. 內部特性 (internal properties)
   • js無法直接取用，可用間接方式存取

const obj = {name: '123'};
console.log(Object.getPrototypeOf(obj));

物件字面值, 點號運算子

const student = {
   name: 'Allen',
   describe: function(){
     return  `his name is ${this.name}`
   },
};

//讀取
student.name; //Allen
//呼叫方法
student.describe(); //'his name is Allen'
//設定
student.name = 'John';
//刪除 
//key, value皆會被刪除 不能刪除繼承而來的特性
delete student.name;  //true
student.name // undefined 


//帶入特性描述器
Object.defineProperty(student, 'name', {
 value: 'Tom',
 configurable: false
});

delete student.name; //false

特殊key值

• 變數不能用的保留字 var, function…etc
• 數字為key字時為字串，點號運算子只能存取key值為識別字
• ‘任意字串’

  const obj = {
      function: 1,
      0.2 : 'hello',
      'how are you': 'fine',
  };
  
  obj['0.2'];
  obj['how are you'];

方框運算子 [experssion]

const obj = {
    0.2 : 'hello',
    describe: function(){
     return true;
   },
};
'

//讀取
obj[0.1+0.1]; //數字強制轉字串 //'hello'
//呼叫方法
obj['describe'](); //'his name is Allen'
//設定
obj['color'] = 'red';
//刪除 
delete obj['color']; // true

轉為物件 Object()

參數值	結果
不帶參數	{}
undefined	{}
null	{}
Boolean值bool	new Boolean(bool)
數值 num	new Number(num)
字串值str	new String(str)
物件	obj(不變)

this 函式中隱藏的參數

• 寬鬆模式sloppy mode： this指向為全域物件window

• 嚴格模式strict mode： undefined

• 函式中 this 是函式被調用時的那個物件(receiver)

• call(), apply(), bind()

常見陷阱 nested function

const obj = {
    firstName: 'Jane',
    friends : ['Allen', 'John'],
    loop: function(){
     'use strict'; 
     this.friends.forEach(
      function(friend){
        console.log(`${this.firstName}的朋友是${friend}`);
      });
   },
};

obj.loop();
//use strict this會是 undefined
// 寬鬆模式 this 指向全域window.firstName undefined


解法1. that = this

const obj = {
    firstName: 'Jane',
    friends : ['Allen', 'John'],
    loop: function(){
     'use strict'; 
     let that = this; 
     this.friends.forEach(
      function(friend){
        console.log(`${that.firstName}的朋友是${friend}`);
      });
   },
};

解法2. bind()

const obj = {
    firstName: 'Jane',
    friends : ['Allen', 'John'],
    loop: function(){
     'use strict';
     this.friends.forEach(
      function(friend){
        console.log(`${this.firstName}的朋友是${friend}`);
      }.bind(this));
   },
};

解法3. 指定callback的this值

const obj = {
    firstName: 'Jane',
    friends : ['Allen', 'John'],
    loop: function(){
     'use strict';
     this.friends.forEach(
      function(friend){
        console.log(`${this.firstName}的朋友是${friend}`);
      },this);
   },
};


解法4. 箭頭函式

const obj = {
    firstName: 'Jane',
    friends : ['Allen', 'John'],
    loop: function(){
     'use strict';
     this.friends.forEach((friend)=>{
       console.log(`${this.firstName}的朋友是${friend}`);
     });
   },
};

'

Layer 2： 物件的原型鍊(Prototype chains)

JavaScript 是一個以原型為基礎 (Prototype-based)、多範型的、動態語言。支援物件導向(Object-oriented programming, OOP)、指令式以及宣告式 (如函數式程式設計)。

物件導向程式設計 OOP

是將 軟體 想像成由一群物件交互合作所組成，而非以往以函數 (Function) 或簡單的指令集交互合作所組成。在物件導向的架構中，每個物件都具有接收訊息，處理資料以及發送訊息給其他物件的能力。每個物件都可視為獨一無二的個體，他們扮演不同的角色並有不同的能力及責任。物件導向程式設計強調模組化，使得程式碼變的較容易開發和理解。

類別 (Class) 和 物件 (Object)

類別 (Class)

類別是用來定義物件的屬性 (properties) 和方法 (methods)的藍圖。

物件 (Object)

物件為一個類別的實體 (Instance)，包含屬性 (properties)與方法 (methods)的資料結構。

上述有提到Javascript是以原型為基礎 (Prototype-based)的語言，不用先設計藍圖(類別)就可以建立物件，是無類別的 (Classless)。

那JS沒有類別要如何用原型基礎來實現物件導向的概念呢？JS的物件透過原型(Prototype)相互繼承各自功能，形成原型鍊(Prototype Chain)。建立物件時，會用一個函式function也就是建構器 (Constructor)來定義物件的藍圖，類似類別的概念。

ES6有個class的新語法，只是個語法糖，讓建構器 (Constructor)的寫法更簡潔易懂，更近似於其他物件導向語言C++、JAVA定義類別的方式，但JavaScript仍然是基於原型的語言。

Object.create() 建立繼承給定原形的新物件

用(物件a)作為原型來建立新的物件b
新物件b繼承了物件a的屬性與方法

const a = {name: 'A'};  
// a ---> Object.prototype ---> null
const b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.name) // A


//第二個引數可帶入描述器
const b = Object.create(a, {
       realName: {value: 'B', writable: true}
     }); 
     
console.log(b.name, b.realName);  //A, B

Object.setPrototypeOf()

可帶入兩個參數 第一個為接受繼承的物件 第二個為原型
以下例子結果與create一樣

const a = {name: 'A'};  
const b = {};
Object.setPrototypeOf(b, a);
console.log(b.name) // A

getPrototypeOf() 讀取一個原型

Object.getPrototypeOf(b)=== a //true

isPrototypeOf() 是否為另一個物件原型

a.isPrototypeOf(b) //true

__proto__ 特殊特性

• dunder proto (doubble underscore proto)
• 非標準ECMAScript5規費

存取器 Accessors

取值器(getter) & 設值器(setter)

用 物件字面值 定義存取器

let a = {
  ary: [10, 20, 30],
  get addData(){
    return this.ary;
  },
  set addData(a){
    this.ary.push(a);
  },
};
a.addData = 40;
console.log(a); // [10, 20, 30, 40]
a.addData = 50;
console.log(a); // [10, 20, 30, 40, 50]

用 特性描述器 定義存取器

let a = Object.create(
 Object.prototype, {
  ary: {
   value: [10, 20, 30]
  },
  addData:{
   get: function(){
      return this.ary;
   },
   set: function(a){
      this.ary.push(a);
   },
  }
 }
);

a.addData = 40;
console.log(a); // [10, 20, 30, 40]
a.addData = 50;
console.log(a); // [10, 20, 30, 40, 50]

特性屬性(property attributes)

key值	預設值
一般特性有以下屬性
value	undefined	特性的值
writable	false	是否可以被更改
存取器有以下屬性
get	undefined	取值器
set	undefined	存值器
所有特性都有以下屬性
enumerable	false	設定特性是否不可列舉
configurable	false	定義特性是否可以被刪除、或修改特性內的 writable、enumerable 及 configurable 設定。例外: length

特性描述器 or 屬性描述器(property descriptor)

定義屬性

Object.defineProperty(obj, propKey, propDesc)

Object.defineProperties(obj, propDesc)

取得屬性

Object.getOwnPropertyDescriptor(obj, propKey)

Object.getOwnPropertyDescriptors(obj)

const obj = {};
Object.defineProperty(obj, 'foo', {
  value: 42,
  writable: false,
  configurable: true
});

Object.getOwnPropertyDescriptor(obj, 'foo');
//{
// value: 42, 
// writable: false, 
// enumerable: false, 
// configurable: true 
// }

//指定
obj.foo = 'b';
console.log(obj.foo); //42

Object.getOwnPropertyDescriptor(obj, 'bar');
//undefined

Object.defineProperties(obj, {
 foo: {
  value: 10,
  enumerable : true,
 },
 bar: {
  value: 20,
  writable: true,
  configurable: true,
 }
});

Object.getOwnPropertyDescriptors(obj);

// {
//     "foo": {
//         "value": 10,
//         "writable": true,
//         "enumerable": true,
//         "configurable": true
//     },
//     "bar": {
//         "value": 20,
//         "writable": true,
//         "enumerable": false,
//         "configurable": true
//     }
// }

特性的迭代與偵測

列出自有特性的key值

• Object.getOwnPropertyNames(obj)
• Object.keys(obj)

列出所有特性的key值

• for-in 迴圈

hasOwnProperty() 此物件本身是否有這個屬性 (原型的屬性不算)

var a = {name: 'Zoe'}; 
var b = {sex: 'female'}; 
Object.setPrototypeOf(b, a); 

console.log(b.hasOwnProperty('sex'));  //true
console.log(b.hasOwnProperty('name'));  //false
console.log(b.hasOwnProperty.call(a, 'name'));  
//true

key值 in obj 此物件是否有這個屬性 (包含原型的屬性)

var a = {name: 'Zoe'}; 
var b = {sex: 'female'}; 
Object.setPrototypeOf(b, a); 

console.log('name' in b);  //true
console.log('sex' in b);  //true

計算物件自有特性的數量Object.keys(obj).length

Object.keys(b).length  //1

可列舉不可列舉

||自有可列舉特性|原型可列舉特性|不可列舉特性 |
| ——– | ——– | ——– |——– |——– |
for…in| O| O| X|
Object.keys| O| X| X|
Object.getOwnPropertyNames|O|X|O|

保護物件: （弱 -> 強）

1. 防止擴充 Object.preventExtensions(obj)

檢查是否可擴充 Object.isExtensible(obj) true/false

const obj = {};
Object.preventExtensions(obj);

obj.bar='b';
obj.bar //undefined

Object.defineProperty(obj, 'foo', {
    value: 10
});
// Uncaught TypeError: Cannot define property foo,
// object is not extensible

2. 密封 Object.seal(obj)

防止擴充，把 configurable 設成-> false （唯讀狀態）
只可變更已有的key值的value值

檢查是否密封 Object.isSeal(obj) true/false

const obj = {foo: 'a'};
Object.seal(obj);

obj.bar='b';
obj.bar //undefined

Object.defineProperty(obj, 'foo', {
    value: 10
});
// 只可變更已有的key值的value值

3. 凍結 Object.freeze(obj)

以上效果皆有並且無法寫入已有的key值的value值

檢查是否凍結 Object.isFrozen(obj) true/false

陷阱

保護只是淺層(shallow)

Object.prototype 原型也是可變的

–

Layer 3: 建構器(Constructor)作為實體的工廠

Layer 4: 衍生子類別(subclassing)藉由繼承現有建構器來建立新的建構器