重學前端學習筆記（七）--JavaScript對象：面向對象仍是基於對象？

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄， 天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。

一、學習JavaScript面向對象時是否有這樣的疑惑？

• 爲何 JavaScript（直到 ES6）有對象的概念，可是卻沒有像其餘的語言那樣，有類的概念呢？
• 爲何在 JavaScript 對象裏能夠自由添加屬性，而其餘的語言卻不能呢？

二、什麼是面向對象？

2.一、JavaScript 對象的特徵

2.1.一、對象的特徵（來自《面向對象分析與設計》一書）

• 對象具備惟一標識性：即便徹底相同的兩個對象，也並不是同一個對象。
• 對象有狀態：對象具備狀態，同一對象可能處於不一樣狀態之下。
• 對象具備行爲：即對象的狀態，可能由於它的行爲產生變遷。

關於第一點：

var a1 = { a: 1 };
var a2 = { a: 1 };
console.log(a1 == a2); // false

關於第2、三點:

• c++中稱"狀態和行爲"爲成員變量和成員函數
• java中則稱它們爲屬性和方法
• javaScript中將狀態和行爲統一抽象爲屬性

winter舉了個例子，代碼以下：

var o = {
    d: 1,
    f() {
        console.log(this.d);
    }
};

上面代碼中，o是對象，d是一個屬性，而函數f也是一個屬性，只是寫法不同，總結來講，在JavaScript中，對象的狀態和行爲其實都被抽象爲了屬性。

2.1.二、JavaScript 中對象獨有的特點

對象具備高度的動態性，這是由於 JavaScript 賦予了使用者在運行時爲對象添改狀態和行爲的能力。

舉例說明運行時如何向一個對象添加屬性：

var o = { a: 1 };
o.b = 2;
console.log(o.a, o.b); //1 2

爲了提升抽象能力，JavaScript的屬性被設計成比別的語言更加複雜的形式，它提供了數據屬性和訪問器屬性（getter/setter）兩類。

2.二、JavaScript 對象的兩類屬性

2.2.一、數據屬性

4個特徵：

• value：就是屬性的值.
• writable：決定屬性可否被賦值.
• enumerable：決定 for in 可否枚舉該屬性.
• configurable：決定該屬性可否被刪除或者改變特徵值.

2.2.二、訪問器（getter/setter）屬性

2.2.2.一、4個特徵：

• getter：函數或 undefined，在取屬性值時被調用.
• setter：函數或 undefined，在設置屬性值時被調用.
• enumerable：決定 for in 可否枚舉該屬性.
• configurable：決定該屬性可否被刪除或者改變特徵值.

2.2.2.二、Object.getOwnPropertyDescripter 和 Object​.define​Property()

var o, d;

o = { get foo() { return 17; } };
d = Object.getOwnPropertyDescriptor(o, "foo");
// d {
//   configurable: true,
//   enumerable: true,
//   get: /*the getter function*/,
//   set: undefined
// }

o = { bar: 42 };
d = Object.getOwnPropertyDescriptor(o, "bar");
// d {
//   configurable: true,
//   enumerable: true,
//   value: 42,
//   writable: true
// }

o = {};
Object.defineProperty(o, "baz", {
  value: 8675309,
  writable: false,
  enumerable: false
});
d = Object.getOwnPropertyDescriptor(o, "baz");
// d {
//   value: 8675309,
//   writable: false,
//   enumerable: false,
//   configurable: false
// }

實際上 JavaScript 對象的運行時是一個「屬性的集合」，屬性以字符串或者 Symbol 爲 key，以數據屬性特徵值或者訪問器屬性特徵值爲 value。

2.三、小結

• 因爲 JavaScript 的對象設計跟目前主流基於類的面向對象差別很是大，致使有「JavaScript 不是面向對象」這樣的說法。
• JavaScript 語言標準也已經明確說明，JavaScript 是一門面向對象的語言，跟JavaScript 的高度動態性的對象系統密不可分。

我的總結

看完winter的這篇文章深感本身的基礎之薄弱，越模糊的東西越要清楚其本質，才能保持對事物的正確判斷。