新手如何理解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對象傳給后台搞定!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM