JS中的面向對象OOP理論基礎

標記語言：

• HTML5
• CSS3
• ...

編程語言：

• POP(Procedure Oriented)面向過程程序設計：
  • C語言
  • ...
• OOP(object Oriented Programming)面向對象程序設計：
  • JAVA
  • PHP
  • PYTHON / GO / RUBY
  • ...
  • JAVASCRIPT / NODE.JS

面向對象程序設計中的三大概念：

• 對象：泛指，JS中咱們操做和研究的事務都是對象
• 類：把抽象的對象，按照功能特色，進行的詳細劃分，劃分紅爲不少的類別
• 實例：每一種類別中具體的事務

1、對象

有句話說的好：面向對象編程的世界裏「萬物皆對象」；

就好像咱們的大天然同樣，咱們畫圖瞭解一下

對象就像是咱們上圖中的大天然，這裏面的東西是在是太太多了...，咱們就先了解一下就好；

2、內置類

根據JS中事務的特徵，進行類別劃分，而默認劃分好的類別，就是內置類

• -1).數據類型中的內置類

  • Number類：每個數字都是這個類的一個實例
  • String類
  • Boolean類
  • Null類 / Undefined類（瀏覽器中禁止咱們本身訪問這兩個類）
  • Symbol類
  • Object 對象數據類型類：全部的對象數據類型都是這個類的一個實例
    • Object {}普通對象就是它的實例
    • Array數組類 每個數組是Array類的實例也是Object類的實例
    • RegExp正則類
    • Date日期類
    • ...
  • Function類：全部的函數都是這個類的實例

• -2).DOM元素對象或者DOM元素集合也都有本身的內置類

  • ...

  • Node 節點類

    • Element 元素標籤類
      • HTMLElement HTML元素標籤類
        • HTMLDivElement 每個DIV元素對象是它的一個實例
        • HTMLAnchorElement每一個A元素對象是它的一個實例
        • 每個元素標籤對象都有一個本身對應的內置類
      • XMLElement
      • ...
    • Text 文本節點類
    • Document 文檔節點類
      • HTMLDocument每個document都是它的一個實例
    • ...

  • HTMLCollection 元素集合類：基於getElementsByTagName等方法獲取到的元素集合都是它的一個實例

  • NodeList 節點集合類

• ......

JS自己就是按照「面向對象思想（類和實例）」設計出來的語言，因此咱們不管是研究和學習JS，仍是在工做中進行項目開發(組件封裝)，也都應該按照面向對象的思想來學習和開發，例如：我想研究數組

3、以研究數組爲例

• 1.每個數組都是Array這個類的實例，每一個實例都是單獨的一個個體（互相是不衝突的，相似於沒有如出一轍的兩我的，在JS中也基本上沒有徹底同樣的兩個實例[有特殊狀況]）
• 2.咱們拿出某一個實例去分析其特色和結構，那麼Array的其它實例也具有相同的特色和結構
• 3.數組中有不少瀏覽器內置的方法，這些方法都是類提供給實例的，每個實例都能具有和使用這些方法（前提是當前類的實例才能使用，若是不是它的實例，則不能使用）

let arr1=[12,23];
let arr2=[12,23];
console.log(arr1===arr2); //=>false 不一樣的堆內存地址

// push是Array這個類提供的方法，只要是Array類的實例（數組是它的實例）均可以調用這些方法
let arr = [10, 20];
arr.push(30);
console.log(arr); //=>[10,20,30]

// ARGUMENTS不是Array的實例，不能調它提供的方法
function func() {
	// ARGUMENTS實參集合中存儲了傳遞的實參信息，它是一個類數組（相似於數組的結構，可是它不是數組，不是Array類的實例）
	arguments.push(30); //=>Uncaught TypeError: arguments.push is not a function
	console.log(arguments);
}
func(10, 20);
複製代碼

內置類咱們先簡單瞭解這些；

當咱們須要本身作一些事情的時候，咱們本身基於構造函數，建立的類就是自定義類；

構造函數模式也是咱們JS學習的重點，因此單獨拿出一篇講解，今天的內容到此結束，下一篇內容爲「構造函數建立自定義類」

思惟導圖