Js物件導向(1): 理解物件

LeoooY發表於2019-02-13
JS物件

目標

  • 理解物件
  • 建立物件例項
  • 理解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
    • 注意，這是大寫的，不是原始型別

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

物件基礎

1、建立物件

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

  • 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)
	}
	
}
複製程式碼

2、物件成員

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

  • 名字
  • 值

例如Person物件的第一個成員，成員名為name,值為Leo。
物件成員的值可以是Js中任意的資料型別，分為兩類：

  • 屬性，
  • 方法

當成員的值為一個函式的時候，被稱為方法，如Person的sayName是它的一個物件方法
其餘都歸為屬性

3、訪問/設定物件的屬性和方法

Js提供兩種方法來訪問/設定物件成員的值

  • 點表示法
  • 括號表示法

兩種方法都支援鏈式的呼叫，
括號表示法只能對屬性進行操作，
點表示法可以操作屬性和方法，

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

4、深入物件的屬性

4.1、屬性的型別

  • 資料屬性：包含資料，可讀取，寫入 。包含以下特性：
    • [[Configurable]] 表示該屬效能否進行修改，比如刪除、修改特性，改為訪問器屬性。預設為true
    • [[Enumerable]] 是否可列舉，預設為true
    • [[Writable]] 可否修改,預設為true
    • [[Value]] 該屬性對應的值
  • 訪問器屬性
    • [[Configurable]]
    • [[Enumerable]]
    • [[Get]] 屬性被讀取時呼叫的方法
    • [[Set]] 屬性被寫入時呼叫的方法

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

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

4.2、修改屬性的特性

修改特定屬性

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

一次性修改多個屬性

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

4.3、讀取屬性的特性

Object.getOwnPropertyDescriptor( 物件 , 要讀取的屬性的特性 )
複製程式碼

小結

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

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

參考：

相關文章