再和“物件導向”談戀愛 - 物件簡介

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');   //12window.parseInt('12a);  //12String(12); //12window.String(12);  //12

 

• 它有建構函式但無法例項化

window.constructor===Window; //truewindow instanceof Window;   //truenew Window();   //報錯

 
 

2、內建物件

 

• ECMAScript自己定義的物件，每個物件都有一個自己對應的建構函式

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

   

• 每個內建物件都是全域性物件的一個屬性（內建物件都是全域性物件的兒子）

  window.Object===Object;      //truewindow.Array===Array;        //truewindow.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;  //trueString.prototype.__proto__===Object.prototype;  //trueBoolean.prototype.__proto__===Object.prototype; //trueArray.prototype.__proto__===Object.prototype;   //trueFunction.prototype.__proto__===Object.prototype;//true

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

 
 

3、自定義物件

物件導向的內容，後面文章詳細說

這篇文章主要介紹物件的概念，下篇文章詳細介紹物件導向裡的相關概念