Js中的構造函數(shù)有什么用處?
類似于Java或C#中類的實例化,通過構造函數(shù)new出來的對象都具有相同的特點(屬性)和行為(方法),注意,函數(shù)構造返回的是一個對象
- 常規(guī)姿勢
//聲明一個"人"的構造函數(shù),目的是通過new出來的對象都是一個個的具體的"人"
var Person=function(){
//私有屬性,該屬性new出來的對象時無法獲取到的.
var prx="other";
//定義了eye的屬性
//在這里eye是實例屬性,也就是說,通過new出來的對象都具備eye的屬性
this.name="double";
//我們用var 申明了一個私有方法,該方法 不能被 new Person 調用到,
//一般的,我們只需要再內部使用到的方法可最好聲明稱私有方法.
var prxMethond=function(){
console.log("in prxMethod");
}
//定義了say的方法
//同eye,say是一個實例方法,new出來的對象都有say的方法
this.say=function(){
console.log("hi i am "+this.name);
}
}
//為Person定義了一個原型方法eat,該方法為公共方法,
//每一個通過new Person 實例出來的對象都共享同一個eat方法,
//當然如果不想共享可在新對象中進行重寫覆蓋
Person.prototype.eat=function(){
console.log(this.name+"eat something...");
}
//定義靜態(tài)方法,該方法目的在于不用new Person 就能調用該方法,
//我們把不用實例化就能調用的方法叫做靜態(tài)方法
Person.staticMethod=function(){
console.log("this is static method");
}
在Js中使用new 關鍵字調用一個函數(shù)的問題:
var zhangsan=new Person();
實際上內部是這樣的:
var zhangsan={};
zhangsan.__proto__=Person.prototype;
Person.call(zhangsan);
上面三句代碼的說明:
- 聲明了一個zhangsan的空對象
- 將Person的prototype賦值給zhangsan的proto屬性
關于對象的prototype和proto概念如下:
prototype是函數(shù)的一個屬性（每個函數(shù)都有一個prototype屬性），這個屬性是一個指針器一，指向一個對象。它是顯示修改對象的原型的屬性漆撞。
proto是一個對象擁有的內置屬性（每個對象都有一個proto屬性），是JS內部使用尋找原型鏈的屬性苇经。
這就是為什么zhangsan可以調用到Person原型(Person.prototype)方法的原因 - 調用Person函數(shù),并且把zhangsan當成是this傳入函數(shù)中,這就是為什么zhangsan可以調用Person函數(shù)定義的this.屬性或this.方法的原因
構造函數(shù)返回值得問題
任意一個函數(shù)都是有返回值得,如果我們不明確的寫出返回值 函數(shù)默認返回的是undefined.構造函數(shù)也是一樣
var f=function(){
this.name="f_name";
this.say=function(){
console.log("say");
}
console.log("in f");
}
f()
//我們用chrome執(zhí)行上面代碼獲取的結果為:
//in f
//undefined
//還是上面的f函數(shù),換一個方式調用:
var fo=new f();
fo
//打印結果為:
//{__proto__:f,name:"f_name",say:function()arguments: null,caller: null,length: 0,name: "",prototype....}
//說明該方法返回的是:執(zhí)行完:fo.__proto__=f.prototype綁定關系和f.call(fo)調用的fo對象.
如果我的構造函數(shù)有明確的返回值呢?
var f=function(){
this.name="f_name";
this.say=function(){
console.log("say");
}
return '123';
}
//非 new調用:
f(); //返回"123"的字符串,這相當于就是調用的一個普通函數(shù)
//new 調用
new f();
//返回值同返回undefined時相同的{__proto__:f,name:"f_name",say:function()arguments: null,caller: null,length: 0,name: "",prototype....}
如果我們的返回值是一個對象呢?
var f=function(){
this.name="f_name";
this.say=function(){
console.log("say");
}
return {"age":25}
}
//非 new調用:
f(); //返回{"age":25}的字符串,這相當于就是調用的一個普通函數(shù)
//new 調用
new f();
//返回值是:{age: 25}
也就是說,如果我們的函數(shù)明確返回一個對象,則無論是否使用new關鍵字調用,都獲取的是返回的這個對象,這也是很多使用該方法構建模塊化的方法和原理
構造函數(shù)的調用
結合上面的例子和原理的理解,下面做一些基本的測試
Person().staticMethod()//報錯,因為Person()是一般的函數(shù)調用,因為Person沒有明確的返回值所以默認返回為undefined,所以 調用代碼實際上是undefined.方法,所以error了
Person.staticMethod()//打印結果為:this is static method,此次調用的是靜態(tài)方法,如何定義的就如何調用
Person.prototype.eat()//調用原型鏈中的方法,但eat中的this,指定的是window 所以打印結果為:undefined eat something...
var zhangsan=new Person()
//先在zhangsan對象中找是否有eat方法發(fā)現(xiàn)沒有,
//則通過__proto__去找,上面我們提到過,
//new 關鍵字調用會將: zhangsan,__proto__=Person.prototype,
//所以就會去Person.prototype找eat方法,找到了調用,
//而關于this.name獲取到值原因同樣是因為new 關鍵字的 Person.call(zhangsan)的執(zhí)行操作,
//將Person中的this相關的內容都進行了"copy",其實就是this復制到了zhangsan對象中,
//關于這點我們前面已驗證過了.所以zhangsan.name是能找到值的
//輸出結果就成了:double eat something...
zhangsan.eat()//double eat something...
zhangsan.name//同上
