Js面向對象(1): 理解對象

目標

• 理解對象
• 建立對象實例
• 理解Js中的繼承

前言

對象是JavaScript的基礎

什麼是面向對象？

面向對象編程（Object Oriented Programming，縮寫爲 OOP）是目前主流的編程範式。 它將真實應用場景中各類複雜的關係，抽象出來，用對象之間的協做來模擬這種關係。 因此，對象是對單個實物的抽象，面向對象編程就是將事物之間的關係抽象成對象來實現

Js中的面向對象？

ECMAScript中沒有類的概念，因此它的對象也與基於類的語言中的對象有所不一樣。 ECMA-262中對象的定義爲：「無序屬性的集合，其屬性能夠爲基本值、對象、或者函數」，每個對象都是基於一個引用類型建立。 簡單來講，對象是一個容器，封裝了 「屬性」 和 「方法」

理解對象

JavaScript中一共有6+1種主要的類型（ES6中新增symbol）

• string
• number
• boolean
• null
• undefined
• **symbol
• object

原始類型並不是對象（string、number、boolean、null、undefined和symbol

因此，JavaScript 中萬物皆是對象，這顯然是錯誤的。

那麼Js中哪些是對象？

• 函數（一等公民）
• 數組
• 其餘內置對象
  • Object String Number Boolean Function Array Date RegExp Error
  • 注意，這是大寫的，不是原始類型

詳細知識點暫不討論...
下面簡單說說對象的基礎知識點

對象基礎

一、建立對象

兩種最簡單的建立對象方法，複雜一些的在建立對象中展開。

• New Object實例

const Person=new Object();
Person.name='Leo';
Person.age=10;
Person.job='Web developer';

Person.sayName= function (){
	alert(this.name);
};
複製代碼

• 使用對象字面量 {}

const Person={
	name:"Leo",
	age:10,
	job:' Web developer',
	saytName: function() {
		console.log(this.name)
	}
	
}
複製代碼

二、對象成員

參考上面的Person，一個對象由許多個成員組成，成員含有：

• 名字
• 值

例如Person對象的第一個成員，成員名爲name,值爲Leo。
對象成員的值能夠是Js中任意的數據類型，分爲兩類：

• 屬性，
• 方法

當成員的值爲一個函數的時候，被稱爲方法，如Person的sayName是它的一個對象方法
其他都歸爲屬性

三、訪問/設置對象的屬性和方法

Js提供兩種方法來訪問/設置對象成員的值

• 點表示法
• 括號表示法

兩種方法都支持鏈式的調用，
括號表示法只能對屬性進行操做，
點表示法能夠操做屬性和方法，

注意，使用括號表示法可使用變量，
而點表示法不能使用變量，只能使用對象的成員名字字面量

四、深刻對象的屬性

4.一、屬性的類型

• 數據屬性：包含數據，可讀取，寫入 。包含如下特性：
  • [[Configurable]] 表示該屬性可否進行修改，好比刪除、修改特性，改成訪問器屬性。默認爲true
  • [[Enumerable]] 是否可枚舉，默認爲true
  • [[Writable]] 能否修改,默認爲true
  • [[Value]] 該屬性對應的值
• 訪問器屬性
  • [[Configurable]]
  • [[Enumerable]]
  • [[Get]] 屬性被讀取時調用的方法
  • [[Set]] 屬性被寫入時調用的方法

訪問器屬性不能直接定義，只能經過Object.defineProperty()來定義

Vue的響應式就是基於Object.defineProperty()實現的

4.二、修改屬性的特性

修改特定屬性

Object.defineProperty( 對象 ，屬性名 ， { 
    特性的描述符: 值,
    [[Enumerable]]:false,
    [[Writable]]`:false
})
複製代碼

一次性修改多個屬性

Object.defineProperties( 對象 ， { 
	屬性名:{
	    特性的描述符: 值,
	    [[Enumerable]]:false,
	    [[Writable]]`:false
	},
	age:{
	    [[Writable]]`:false
    }
})
複製代碼

4.三、讀取屬性的特性

Object.getOwnPropertyDescriptor( 對象 , 要讀取的屬性的特性 )
複製代碼

小結

此處應該有個小結，不過還沒想好該寫些什麼。

水平有限，不許確的地方，歡迎指正。

參考：

• 《JavaScript高級程序設計》
• MDN文檔
• 《你不知道的JavaScript》
• 《JavaScript入門》 阮一峯
• 本身畫的前端知識體系思惟導圖 | PressOn