快捷導(dǎo)航

JavaScript的繼承的封裝介紹

更新時間：2013年10月15日 08:38:31 作者：

繼承的封裝貌似在每個語言中都有，在本文為大家詳細介紹下，JavaScript的繼承的封裝，感興趣的朋友不要錯過

 
/** 
* 當調(diào)用此函數(shù)時,只有第一次參數(shù)傳入,第二個不存在的情況下,就創(chuàng)建類 
* 當調(diào)用此函數(shù)時,傳入了兩個參數(shù),第一個參數(shù)為基類,第二個參數(shù)則在基類的基礎(chǔ)上添加內(nèi)容 
*/ 
function extend(obj,prop){ 
function F(){ 

} 
//如果第一個參數(shù)為object類型(即json對象)的話,則將json的key value賦值給F函數(shù)的原型 F.prototype.key = value 
if (typeof(obj) == "object") { 
for(var name in obj){ 
F.prototype[name] = obj[name]; 
} 
} else {//如果第一個參數(shù)為function類型的話,則將次函數(shù)的原型賦值給F函數(shù),prop肯定是傳值的(json對象),所以將prop賦值給F函數(shù)的原型 
F.prototype = obj.prototype; 
for(var name in prop){ 
F.prototype[name] = prop[name]; 
} 
} 
return F; 
} 
//因為這里只有一個參數(shù),所以此時會將json對象的key,value賦值給extend函數(shù)中的F函數(shù)的原型,然后用person變量接收F函數(shù),此時person也成為了一個函數(shù),此函數(shù)也擁有了F函數(shù)的原型 name和sex 
var person = extend({ 
name:"xxc", 
sex:"man" 
}); 
//將person函數(shù)傳入,進入extend函數(shù)后,首先將person的原型賦值給F函數(shù),然后將第二個參數(shù)hope:"more money"賦值給F函數(shù),此時F函數(shù)的原型有三個東西name,sex,hope 
//最后將F函數(shù)返回,導(dǎo)致person的原型也和F函數(shù)一樣,有name,sex,hope 
var person = extend(person,{ 
hope:"more money" 
}); 
alert(person.prototype.name);//xxc 
alert(person.prototype.sex);//man 
alert(person.prototype.hope);//more money 

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>function.html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script src="../jquery/jquery-1.10.2.min.js"></script> 
<script src="extends2.js"></script> 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 

</head> 

<body> 
</body> 
</html> 