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

yy736044583 發布于2019-08-29 18:47 / 1672人閱讀

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。

筆記說明

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

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

為什么 JavaScript（直到 ES6）有對象的概念，但是卻沒有像其他的語言那樣，有類的概念呢？

為什么在 JavaScript 對象里可以自由添加屬性，而其他的語言卻不能呢？

2、什么是面向對象？ 2.1、JavaScript 對象的特征 2.1.1、對象的特征（來自《面向對象分析與設計》一書）

對象具有唯一標識性：即使完全相同的兩個對象，也并非同一個對象。

對象有狀態：對象具有狀態，同一對象可能處于不同狀態之下。

對象具有行為：即對象的狀態，可能因為它的行為產生變遷。

關于第一點：

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

關于第二、三點:

c++中稱"狀態和行為"為成員變量和成員函數

java中則稱它們為屬性和方法

javaScript中將狀態和行為統一抽象為屬性

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

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

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

2.1.2、JavaScript 中對象獨有的特色

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

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

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

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

2.2、JavaScript 對象的兩類屬性 2.2.1、數據屬性

4個特征：

value：就是屬性的值.

writable：決定屬性能否被賦值.

enumerable：決定 for in 能否枚舉該屬性.

configurable：決定該屬性能否被刪除或者改變特征值.

2.2.2、訪問器（getter/setter）屬性

2.2.2.1、4個特征：

getter：函數或 undefined，在取屬性值時被調用.

setter：函數或 undefined，在設置屬性值時被調用.

enumerable：決定 for in 能否枚舉該屬性.

configurable：決定該屬性能否被刪除或者改變特征值.

2.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.3、小結

由于 JavaScript 的對象設計跟目前主流基于類的面向對象差異非常大，導致有“JavaScript 不是面向對象”這樣的說法。

JavaScript 語言標準也已經明確說明，JavaScript 是一門面向對象的語言，跟JavaScript 的高度動態性的對象系統密不可分。

個人總結

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114571.html

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

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些...

mayaohua 2019-08-02 16:15 評論0 收藏0
重學前端學習筆記（七）--JavaScript對象：面向對象還是基于對象？

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些...

xingpingz 2019-08-23 17:17 評論0 收藏0
重學前端學習筆記（八）--JavaScript中的原型和類

摘要：用構造器模擬類的兩種方法在構造器中修改，給添加屬性修改構造器的屬性指向的對象，它是從這個構造器構造出來的所有對象的原型。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kai...

nanfeiyan 2019-08-02 16:16 評論0 收藏0