JavaScript的繼承的封裝介紹

2024-05-06 15:53:08

字體：大中小

來源：轉載

供稿：網友

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

<!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>


</head>

<body>
</body>
</html>