javascript 中的物件導向實現 如何封裝

標籤：

物件導向的手法來封裝javascript ,javascript是沒有類的概念的.

所以今天談到的封裝,其實就是用javascript的函數來實現的.

1 2 3 4

var People{     name:’一介布衣’,     age:’30‘ };

 

這就是javascript中的一個對象,裡面封裝了2個屬性.

 

執行個體化一個對象的執行個體 people

1 2	var people=new People(); console.log(people.name,people.age);  //一介布衣,30

 

如果我們需要在函數裡返回一個對象,如下代碼:

1 2 3 4 5 6

function CreatePeople(){     return {         name:’一介布衣’,         age:’30‘     }; }

 

在代碼中需要建立一個人的時候,我們需要調用 CreatePeople 即可,但是有一個問題,就是我們得到的都是同一個人 一介布衣,30歲.看來需要我們改造一個函數.

1 2 3 4 5 6

function CreatePeople(name,age){     return {         name:name,         age:age     } }

 

這看上去貌似好多了.我們執行個體化2個對象.

1 2	var p1=new CreatePeople(‘張三’,19); var p2=new CreatePeople(‘李四’,25);

 

我們知道javascript從object 到其他全域類都有一個prototype對象指向原型鏈.

但是,p1,p2 倆個對象貌似沒有一點關係,雖然被同一個函數建立,但是CreatePeople 每次返回一個全新的對象,看似 p1,p2關係不大.

如果你接觸過物件導向語言的編程,這時應該想到了建構函式,但是上面的 CreatePeople 函數怎麼看都不是一個建構函式,我們也可以用javascript的函數來產生一個建構函式.

1 2 3 4

function CreatePeople(name,age){     this.name=name;     this.age=age; }

 

this 和其他語言一樣,也是一個指向執行個體的指標變數.

當用此建構函式建立對象的時候,this就指向新建立的對象,有一點需要記住,this取決調用函數範圍,而不是使用函數的範圍.

 

這樣封裝一下建構函式,產生的對象就比上面看上去順眼多了.

2個屬性指向了this執行個體指標,我們再來一個方法,去擷取屬性(也可以理解為私人變數)

1 2 3 4 5 6 7

function CreatePeople(name,age){     this.name=name;     this.age=age;     this.getName=function(){         return this.name;     } }

 

getName 方法很簡單,就是返回對象中的 name 屬性值.

執行個體化2個對象

1 2	var p1=new CreatePeople(‘張三‘,20); var p2=new CreatePeople(‘李四‘,21);

1 2	console.log(p1.getName()) //張三 console.log(p2.getName()) //李四

這時感覺封裝的高大上的感覺,其實我們沒有發現,CreatePeople 建構函式中的 getName 函數乾的活很簡單,但是每次都在執行個體上建立一個這樣的函數確實有點浪費記憶體了,我們看下面的代碼.

1	console.log(p1.getName==p2.getName);  //false

返回false ,告訴我們 p1,p2 中的 getName 不是指向記憶體中的一個地址,我們為了節省記憶體,如何讓CreatePeople 構建出來的對象,多有 getName 方法指向一個指標地址? 對,Object 的原型鏈上.

我們把這個方法定義在建構函式的原型鏈上,這樣構造的新對象都會繼承原型鏈上的這個方法,(具體的javascript中的繼承我們單獨開一篇博文來討論)

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function CreatePeople(name,age){     this.name=name;     this.age=age; }   CreatePeople.prototype.getName=function(){     return this.name; }     var p1=new CreatePeople(‘張三‘,20); var p2=new CreatePeople(‘李四‘,21);   console.log(p1.getName==p2.getName);  //true

 

可以看到p1 和 p2 對象都繼承來自 CreatePeople 原型上的 getName 方法,而且所有對象的此方法指標都指向了一個地址.

這樣,我們封裝的目的就達到了.

javascript 中的物件導向實現 如何封裝