javaScript系列 [02]-javaScript對象探析

時間 2019-11-05

原文原文鏈接

[02]-javaScript對象探析

題記：多年前，以很是偶然的方式關注了微信公衆號「面向對象」，本覺得這個公衆號主要以分享面向對象編程的乾貨爲主，不料其乃實實在在的猿圈相親平臺。經過查看公開資料，發現該公衆號儼然是在以本身的方式來幫助廣大單身程序猿們通往一條真真正正的面向對象編程之路，相對而言，編程和語言特性這些破事又算得了什麼呢，先「找到對象」彷佛纔是更高層面的話題。這篇文章，咱們不談如何」面向對象」，只着力於JavaScript中對象特徵、建立以及訪問。本文做爲純粹的技術文章，和「面向對象」公衆號利益無關。java

1.1 javaScript中對象的我的檔案

javaScript是一門基於弱類型、支持面向對象編程且基於原型繼承的腳本語言。正則表達式

對象說明編程

在JavaScript語言中，對象是可變的鍵值對集合（或者稱爲屬性的容器），經過對象咱們能夠方便的管理一組變量和函數。數組

用通俗的話來講，對象其實就是一堆變量和函數的集合。只是「定義」在對象中的變量，咱們稱爲屬性，「定義」在對象中的函數，咱們稱之爲方法。微信

數據類型和對象函數

JavaScript中的數據類型能夠分爲基本數據類型和複雜數據類型。
其中基本數據類型有：數字(number)、字符串(string)、布爾值(boolean)、undefined值和null。post

複雜數據類型能夠簡單理解爲對象類型。在JavaScript中，數組是對象、函數是對象、正則表達式是對象，對象天然也是對象，它們在使用typeof 運算符時獲得的結果爲object，即對象類型。測試

typeof對函數運算的結果爲function，對null運算的結果爲object，但這被認爲是一個錯誤。

JavaScript語言中的對象是無類型的，對象能夠擁有屬性和方法，屬性和方法都是以key-value的方式存儲的。咱們能夠籠統的把方法和屬性統一歸類爲屬性（由於方法名其實和屬性名沒有任何本質的區別，屬性和方法的分類方式只是對它們存儲的內容進行人爲區分），因此對象其實就是鍵值對的集合。ui

對象經過引用來傳遞，它們永遠不會被複制。this

對象的檢查

① 可使用typeof來對對象類型進行簡單的檢查，但須要注意排除null的狀況。

② 在開發中，常常會用到hasOwnProperty方法來過濾對象原型成員。

1.2 javaScript中對象的獲取方式

JavaScript中對象的建立有多種方式，根據特定的應用場景，咱們能夠選擇不一樣的更合適的方式來建立對象，簡單能夠概括爲如下狀況：

① 字面量的方式建立對象
② 內置構造函數建立對象
③ 封裝工廠函數建立對象
④ 定義構造函數建立對象
⑤ 調用系統方法建立對象

下面分別對上面列出的這些方式進行逐一介紹。

字面量的方式建立對象

基本寫法

1 var  bookObj = {
2        name:"聲名狼藉者的生活",
3        price:42.00,
4        author:"福柯",
5        press:"北京大學出版社",
6        read:function () {
7            console.log("個人書名爲:聲名狼藉者的的生活,做者爲福柯....");
8        }
9    };

上面的代碼中經過字面量的方式建立了bookObj對象，該對象擁有name、price、author和press屬性，還擁有read方法。

對象字面量提供了一種很是方便的建立新對象的表示方法，一個對象就是包圍在{}中的N(N>=0)個鍵值對。對象字面量能夠出如今任何容許表達式出現的地方。

內置構造函數建立對象

JavaScript中的內置構造函數主要有：

 
      String 
     
      Number 
     
      Boolean 
     
      Date 
     
      Array 
     
      Function 
     
      Object 
     
      RegExp

注意：(String Number Boolean 是區別於string number boolean的基本包裝類型)

基本寫法

1 var book = new Object();
2    book.name = "聲名狼藉者的生活";
3    book.price = 42.00;
4    book.author = "福柯";
5    book.press = "北京大學出版社";
6    book.read = function () {
7        console.log("個人書名爲:聲名狼藉者的的生活,做者爲福柯....");
8    };

這種寫法相對字面量建立方式而言不夠簡潔和直觀，並且自己的代碼複用性很差，不推薦。

工廠函數建立對象

工廠函數方式建立對象其本質是對內置構造函數建立對象的過程進行了封裝，適用於大規模「批量生產」同類型的對象。
基本寫法

 1 //提供工廠函數
 2 function createBookNew (name,price,author,press) {
 3     var book = new Object();
 4     book.name = name;
 5     book.price = price;
 6     book.author = author;
 7     book.press = press;
 8     book.read = function () {
 9         console.log("個人書名爲:"+book.name+",做者爲"+book.author+"....");
10     };
11     return book;
12 }
13 //使用工廠函數來建立對象
14 var book1 = createBookNew("聲名狼藉者的的生活","42.00","福柯","北京大學出版社");
15 var book2 = createBookNew("人性的枷鎖","49.00","毛姆","華東師範大學出版社");
16 var book3 = createBookNew("悟空傳","28.00","今何在","湖南文藝出版社");
17 //打印對象的屬性,調用對象的方法
18 console.log(book1.name);
19 console.log(book2.name);
20 console.log(book3.name);
21 book1.read();
22 book2.read();
23 book3.read();

總結工廠函數建立對象的實現過程

① 提供一個建立對象的函數（參數）
② 在函數內使用new 關鍵字和構造器建立對象
③ 設置對象的屬性和方法
④ 返回加工過的對象

自定義構造函數建立對象

基本寫法

 1  //提供構造函數
 2 function CreateBook (name,price,author,press) {
 3    //使用new調用該構造函數時,默認在內部會先建立Object類型的實例對象
 4    //並把該對象關聯到當前構造函數的原型對象上，並把函數內的this綁定到該對象
 5    //經過this來給實例對象設置屬性和方法
 6     this.name = name;
 7     this.price = price;
 8     this.author = author;
 9     this.press = press;
10     this.read = function () {
11         console.log("個人書名爲:"+this.name+",做者爲"+this.author+"....");
12     };
13   //默認老是把新建立的實例對象返回
14 }
15 //使用new + 函數名() 的方式來調用
16 var bookObj = new CreateBook("聲名狼藉者的的生活","42.00","福柯","北京大學出版社");

構造函數和普通函數沒有本質區別，約定使用new調用的構造函數的首字母應該大寫。構造函數的做用在於完成對象的初始化，對象的建立等工做由new關鍵字完成，組合使用。

工廠函數和構造函數建立對象過程簡單對象

         ① 函數的首字母大寫(用於區別構造函數和普通函數) 
       
         ② 建立對象的過程是由new關鍵字實現 
       
         ③ 在構造函數內部會自動的建立新對象,並賦值給this指針 
       
         ④ 自動返回建立出來的對象

構造函數調用方式的返回值

         ① 若是在構造函數中沒有顯示的return，則默認返回的是新建立出來的對象 
       
         ② 若是在構造函數中顯示的return，則依照具體的狀況處理 
       
         ❐ return 的是對象類型數據，則直接返回該對象 
       
         ❐ return 的是null或其餘基本數據類型數據，則返回新建立的對象（即this）

提示在開發中咱們經過把自定義構造函數和原型對象結合在一塊兒使用，這樣能夠充分的利用JavaScript原型鏈繼承的特性並解決方法的共享問題。下面給出基本的代碼示例：

 1 //（1）提供Person構造函數
 2 function Person(name) {}
 3 //（2）替換Person默認的原型對象
 4 Person.prototype ={
 5     //修正構造器屬性 Object --> Person
 6     constructor:Person,
 7     //提供實例對象的初始化方法
 8     init:function(name,age){
 9         this.name = name || "默認的姓名";
10         this.age = age || 18;
11     },
12     //全部實例對象都須要訪問的原型方法
13     showName:function () {
14         console.log(this.name);
15     }
16 };
17 //（3）使用new來調用構造函數以建立實例對
18 var p = new Person();
19 //（4）調用init方法對實例對象進行初始化操做
20 p.init("文頂頂",20);

使用Object.create方法建立對象

ES5提供了Object.create法來建立一個新對象，該方法在使用的時候會把傳入的指定對象鏈接爲新對象的原型對象。

語法
Object.create(proto, [propertiesObject])

參數說明
第一個參數proto：新建立對象的原型對象。
第二個參數propertiesObject：可選的參數，若是沒有指定爲 undefined，則表示要添加到新建立對象的可枚舉屬性信息，存放對象的屬性描述符以及相應的屬性名稱。

若是傳入的參數爲null，則建立出來的空對象不會繼承Object原型成員，沒有基礎方法。
若是傳入的參數爲Object.prototype，那麼建立出來的對象等同於{}空對象。

代碼示例

 1 //01 字面量方式建立對象obj
 2 var obj = {name:"wendingding",age:18};
 3 //02 使用Object.create方法來建立新對象
 4 var o = Object.create(obj);
 5 //o是一個空對象，o.__proto__指向obj對象
 6 console.log(o);
 7 //wendingding 訪問原型對象obj上面的name屬性
 8 console.log(o.name);
 9 //03 測試傳入null的狀況
10 var o1 = Object.create(null);
11 //打印結果爲空對象，No properties 該對象身上沒有任何成員
12 console.log(o1);
13 //04 測試傳入Object.prototype的狀況
14 var o2 = Object.create(Object.prototype);
15 //o2 是空對象，等價於{}
16 console.log(o2);

1.3 javaScript中對象的操做

咱們知道對象能夠簡單理解爲鍵值對的集合，經過前面的閱讀咱們已經瞭解到如何建立對象，接下來咱們接着探討對象內部鍵值對的相關操做。

對象屬性和方法的訪問方式：點語法或者是[]語法。
對象屬性和方法的操做方式：對象的操做方式和數據的操做方式保持一致，能夠簡單總結爲增刪改查和遍歷操做。

代碼示例

 1  //00 提供obj對象
 2 //經過字面量方式建立obj對象，該對象如今擁有name屬性和showName方法
 3 //因使用字面量方式建立，全部obj的原型對象(__proto__)指向object.prototype
 4 var obj = {
 5     name:"wendingding",
 6     showName:function () {
 7         console.log(this.name);
 8     }
 9 };
10 //01 添加屬性或方法
11 //a 使用點語法來爲obj對象添加age屬性和showAge方法
12 obj.age = 18;
13 obj.showAge = function (){
14     console.log(this.age);
15 };
16 //b 使用中括號語法來爲obj對象添加age屬性和showAge方法
17 obj["class-name"] = 41;
18 obj["showClassName"] = function () {
19     console.log(this["class-name"]);
20 };
21 //02 修改屬性或方法
22 //若是對象的屬性已經存在，那麼設置該屬性的時候表示修改
23 obj.age = 20;
24 obj.showAge = function (){
25     console.log("年齡" + this.age);
26 };
27 //03 查詢屬性或者調用方法
28 console.log(obj.name);      //wendingding
29 console.log(obj["age"]);    //20
30 obj.showName();             //wendingding
31 obj["showName"]();          //注意，不推薦使用這種方法
32 //04 刪除對象中的屬性或方法
33 //語法形式：delete 對象.屬性 | delete 對象[屬性]
34 delete obj.name;
35 delete obj["showName"];
36 console.log(obj);
37 //05 對象的遍歷
38 for (key in obj)
39 {
40      console.log(key, obj["key"]);
41 }

delete關鍵字說明

         01 具體使用: 
       
         (1) 能夠用來刪除對象中指定的屬性 
       
         (2) 用來刪除沒有使用var關鍵字聲明的變量 delete 變量名|window.變量 
       
         02 使用注意點 
       
         (1) 關鍵字在使用的時候有返回值,true|false 刪除成功返回true 
       
         (2) 刪除對象中不存在的屬性,返回true 
       
         (3) 使用var聲明的變量不能被直接刪除 
       
         (4) 不能刪除使用var聲明的全局變量可是能夠刪除直接添加在window上面的屬性 
       
         (5) 若是刪除數組中的元素（數組也是對象）則數組中對應的元素內容被替換爲undefined，索引保留。

對象屬性說明

❐ 對象的屬性名能夠是任意字符串，包括空字符。
❐ 對象的屬性名若是是合法的JavaScript標識符，則沒必要強制要求使用雙引號括住屬性名。
❐ 屬性值能夠是任何值（包括undefined）。
❐ 若是對象的屬性名並不是合法標識符，則建議使用[]語法來訪問對象。
❐ 標識符規範：字母開頭，後面跟1個或多個下劃線、數字或字母。