新手如何理解JS面向對象開發？

今天有時間講講我對面向對象的理解跟見解，儘可能用通俗的語言來表達，多多指教！

現在前端開發已經愈來愈火了，對於前端開發的要求也是愈來愈高了，在面試中，常常有面試官會問：你對JS面向對象熟悉嗎？

其實，也就是至關於在問你，在工做中有沒有用過面向對象開發？說到這裏，有人就問了，什麼事面向對象？

面向對象： 用我我的最簡單的理解表達就是，Object的操做。另一種理解： 給你一個條件，你去找個對象幫我處理這個事情，你就不要本身動手了。

說白了，咱們就是在操做對象，那麼咱們就須要去建立這個對象，建立對象的方法有不少種，這裏就不一一列舉了，可是咱們要知道，操做的全部的對象都是Object的實例，甚至還能夠從原型去生成實例對象。

工做例子：

var obj = {};   

obj.token = '';

obj.username = '';

obj.userid = '';

這樣，一個對象搞定了。若是咱們要寫不少個呢？好比不少地方都用到了，是否是重複要寫不少次？MMP，頭都大了。

有沒有辦法解決呢？

那麼有人就問了，爲何不作一個簡單的封裝呢？好比：

function obj (token,username,userid) {

　　return {

　　　　token:token,

　　　　username:username,

　　　　userid:userid

　　}

}

而後須要的時候，調用這個obj方法傳參就OK了呀？

那麼問題來了，封裝是沒錯，也能用，也有道理，那麼請問，你這不是在調用函數嗎？用一次調一次，他們之間有關係嗎？

這時候就問了，那怎麼辦？有，其實也就說，有沒有辦法讓不一樣的實例都指向同一個方法（函數）讓他們產生關係。那麼JS就給出了構造函數這個模式用來解決從原型對象去生成實例，使用了this變量，new運算符。

先不上例子，先說說爲何構造函數能解決這個問題。首先，它也是一個普通的函數，就是由於它用了this變量與new運算符使得它可以從原型對象上去new一個實例，而且JS規定每一實例都要有一個constructor屬性，這個屬性可厲害了，它的做用就是把每個實例都指向同一個構造函數。也就是說，無論你生多少個兒子，爸爸就是那個構造函數。

接着看個例子：

function obj () {

　　　　this.token:token;

　　　　this.username:username;

　　　　this.userid:userid;

}

var obj1 = new obj('asdfsdf82377888sdfds','john',1);

var obj2 = new obj('dfvswc89923884928k','Steph',2);

好了，例子也有了，根據上面的解釋，你能夠理解爲obj1,obj2的爸爸都是obj，也就是都是構造函數obj的實例。

來個工做中涉及到的案例，好比上面的例子是發送一條數據到後臺的，而且在前端需求中明確要求這個信息是要有時間的，也就是說這條信息是何時發佈的也要現實出來，這時候後端程序員說：「我不處理了，你本身一塊兒送過來吧」。那這時候，怎麼處理？來來來，往下看

function obj () {

　　　　this.token:token;

　　　　this.username:username;

　　　　this.userid:userid;

　　　　this.tamp: new Date().getTime();

}

這樣，O了！

問題來了，在每次生成實例的時候，this.tamp這個屬性是否是都要自動生成一次？而每一個實例都多出這麼一個屬性所佔有的空間，是否是浪費資源？

解決辦法： 屬性prototype

先來講說概念，構造函數prototype屬性，這個屬性指向一個對象，而這個對象的全部的屬性跟方法，都會被構造函數的實例所繼承。

什麼意思呢？也就是說，構造函數的這個屬性裏的東西均可以被它的實例繼承

舉例：obj構造函數定義一個prototype屬性，這個屬性指到一個對象，咱們給這個對象加上一個屬性，好比就叫tamp，那麼這個屬性都會被obj的實例拿到。也就解決了上面的問題。

最終能夠這麼寫：

function obj () {

　　　　this.token:token;

　　　　this.username:username;

　　　　this.userid:userid;

}

obj.prototype.tamp = new Date().getTime();

var message = new obj('sdfasdf434fasf','name',3);

var final = JSON.parse(JSON.stringify(message));

final.tamp = message.tamp;

最後將final對象傳給後臺搞定！