新手如何理解JS物件導向開發?

程式設計讓我快樂發表於2018-06-30

今天有時間講講我對物件導向的理解跟看法,儘量用通俗的語言來表達,多多指教!

如今前端開發已經越來越火了,對於前端開發的要求也是越來越高了,在面試中,經常有面試官會問:你對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物件傳給後臺搞定!

相關文章