再和“面向對象”談戀愛 - 對象簡介（一）

JavaScript中的面向對象是個老生常談的話題，但是依然有很多小夥伴處於懵逼的狀態。面試時候最擔心的就是被問到面向對象相關的內容，自己看過無數的資料，依然對面向對象百思不得其解。到底什麼是原型？什麼是構造函數？什麼是繼承。。。一提到這些概念那真是欲哭無淚、悲憤交加，甚至恨的直咬牙！所以有必要重新再談一次面向對象。同時我也希望通過這幾篇文章讓你對面向對象由恨生愛，再到愛恨交加，最後愛得死去活來！

對象

 
  各位老鐵們應該聽過一個詞叫“一切皆對象”，而“面向對象”中也帶了一個“對象”，可見“對象”這個詞非常重要。所以弄清楚 “對象”是什麼尤爲重要。

  對象在生活中指的是女朋友或者男朋友，而在JavaScript裏說的通俗一點就是一個放了很多屬性與方法的集合，有很多的屬性與方法是一個對象最顯著的特點（可以粗暴的認爲，但凡有屬性與方法的就是個對象）。JavaScript裏除了運算符、語句、表達式（這些都是基本語法，任何一門語言都得有基本的語法）以外，其它的都是對象或者說是某個對象身上的一部分，所以說js裏一切皆對象是有講究的。換句話說，我們在寫js的時候，其實都是用一些基本語法去操作對象
 
1、字符串

'kaivon'.length;         //6 屬性
'kaivon'.substring(2);   //ivon  方法

 
2、數字

(12.25).toFixed(1);     //12.3 方法

 
3、布爾值

true.toString();        //true 方法

 
4、函數

const fn=function(){};
fn.name;    //fn    屬性
fn.call(window);    //方法

數組與對象想必就更不用解釋了
 
 

對象分類

 
在JavaScript中我把對象分爲三類，全局對象、內置對象、自定義對象
 
 

1、全局對象

 

• 它是JavaScript預定義的對象，作爲JavaScript的全局函數和全局屬性的佔位符
   

• 它是頂層對象，由宿主環境決定類型
  1、網頁裏爲window

  this===window;  //true

  2、node裏爲Global

 

• 它身上的屬性或方法可以直接使用，不用指定所屬對象

parseInt('12a');   //12
window.parseInt('12a);  //12
String(12); //12
window.String(12);  //12

 

• 它有構造函數但無法實例化

window.constructor===Window; //true
window instanceof Window;   //true
new Window();   //報錯

 
 

2、內置對象

 

• ECMAScript自己定義的對象，每個對象都有一個自己對應的構造函數

  Object.prototype.constructor===Object;      //true
  Array.prototype.constructor===Array;        //true
  Function.prototype.constructor==Function;   //true

   

• 每個內置對象都是全局對象的一個屬性（內置對象都是全局對象的兒子）

  window.Object===Object;      //true
  window.Array===Array;        //true
  window.Function==Function;   //true

• 內置對象分類
  Object、Number、String、Boolean、Array、Math、Date、JSON、RegExp、Function...
  所有內置對象請移步https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
   
• 內置對象之間也有繼承關係，所有內置對象中Object是絕對的大哥，其它對象都會繼承它原型裏的屬性與方法

Number.prototype.__proto__===Object.prototype;  //true
String.prototype.__proto__===Object.prototype;  //true
Boolean.prototype.__proto__===Object.prototype; //true
Array.prototype.__proto__===Object.prototype;   //true
Function.prototype.__proto__===Object.prototype;//true

 
可能有些小夥伴在這裏會不理解，沒關係。這裏想讓你知道的是內置對象反正能跟Object扯上關係，後面的文章會詳細去說，我們要放長線掉大魚。

 
 

3、自定義對象

面向對象的內容，後面文章詳細說

這篇文章主要介紹對象的概念，下篇文章詳細介紹面向對象裏的相關概念