在很多時(shí)候我們寫的js操作都有很多的公用的地方，每次都去復(fù)制過來蛮放，代碼復(fù)用性很差缩抡，為何不像java一樣，將公共的一些操作包颁，屬性提取出來作為父類瞻想，然后子類去繼承并繼續(xù)做加工，不影響父類娩嚼。
下面我來介紹下js的類的三種繼承的寫法
拷貝繼承：（通用型的 有new或無new的時(shí)候都可以）
-
繼承屬性用父類的call方法
父類.call(this,屬性1,屬性2,....); -
繼承方法用for in
extend(子類的原型,父類的原型); //for in 繼承 jq也是這種 繼承方法 function extend(obj1, obj2){ for(var attr in obj2){ obj1[attr] = obj2[attr]; } } -
先看這個(gè)簡(jiǎn)單的例子蘑险，理解js的繼承：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>myTest</title> </head> <body> <script type="text/javascript"> function CreatePerson(name,sex){ this.name = name; this.sex = sex; }//父類構(gòu)造器，定義父類的屬性 CreatePerson.prototype.showName = function(){ alert(this.name); }//利用原型給寫父類的方法屬性 var p1 = new CreatePerson('小明', 'boy');//實(shí)例化父類測(cè)試是否成功 p1.showName();//小明 //屬性的繼承采用的是調(diào)用父類的構(gòu)造器的call function CreateStar(name, sex,job){ CreatePerson.call(this,name,sex); this.job = job; } //將父類的原型給子類(更改一個(gè)都改變岳悟，這里相當(dāng)于引用佃迄，而不是復(fù)制泼差，這種是做不到繼承的) // CreateStar.prototype=CreatePerson.prototype; extend(CreateStar.prototype,CreatePerson.prototype); //for in 繼承 jq也是這種 繼承方法 function extend(obj1, obj2){ for(var attr in obj2){ obj1[attr] = obj2[attr]; } } var p2 = new CreateStar('xiaolki','girl','papa'); p2.showName(); p1.showName(); </script> </body> </html> -
下面給出一段js拖動(dòng)div的操作的繼承
-
寫父類對(duì)div1進(jìn)行拖動(dòng)的操作，及父類
function Drag(id) { //父類 this.obj = document.getElementById(id);//獲取所要拖動(dòng)的dom節(jié)點(diǎn) this.disX = 0; this.disY = 0; } Drag.prototype.init = function () { var This = this; //鼠標(biāo)按下事件初始化 this.obj.onmousedown = function (ev) { var ev = ev || window.event; This.fnDown(ev); //鼠標(biāo)移動(dòng)事件初始化 document.onmousemove = function (ev) { var ev = ev || window.event; This.fnMove(ev); }; //鼠標(biāo)松開事件初始化 document.onmouseup = function () { This.fnUp(); }; return false; }; }; //鼠標(biāo)按下操作 Drag.prototype.fnDown = function (ev) { this.disX = ev.clientX - this.obj.offsetLeft; this.disY = ev.clientY - this.obj.offsetTop; }; //鼠標(biāo)移動(dòng)操作 Drag.prototype.fnMove = function (ev) { this.obj.style.left = ev.clientX - this.disX + 'px'; this.obj.style.top = ev.clientY - this.disY + 'px'; }; //鼠標(biāo)松開操作 Drag.prototype.fnUp = function () { document.onmousemove = null; document.onmouseup = null; };
-
-
子類繼承父類
function ChildDrag(id) { //子類 Drag.call(this, id);//繼承父類的屬性 } //繼承父類的方法 extend(ChildDrag.prototype, Drag.prototype); //子類重寫父類的鼠標(biāo)移動(dòng)方法 ChildDrag.prototype.fnMove = function (ev) { var L = ev.clientX - this.disX; var T = ev.clientY - this.disY; if (L < 0) { L = 0; } else if (L > document.documentElement.clientWidth - this.obj.offsetWidth) { L = document.documentElement.clientWidth - this.obj.offsetWidth; } this.obj.style.left = L + 'px'; this.obj.style.top = T + 'px'; }; //for in 來繼承父類的方法 function extend(obj1, obj2) { for (var attr in obj2) { obj1[attr] = obj2[attr]; } }
類似繼承： （new構(gòu)造函數(shù)）
JS是沒有類的概念的 , 把JS中的構(gòu)造函數(shù)看做的類
要做屬性和方法繼承的時(shí)候呵俏，要分開繼承
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<script>
function Aaa(){ //父類
this.name = [1,2,3];
}
Aaa.prototype.showName = function(){
alert( this.name );
};
function Bbb(){ //子類
Aaa.call(this);
}
var F = function(){};
F.prototype = Aaa.prototype;//利用空方法只繼承父類的方法堆缘，不繼承屬性
Bbb.prototype = new F();//將繼承來的方法給子類引用
Bbb.prototype.constructor = Bbb; //因?yàn)槭菑母割愐枚鴣恚砸匦滦拚赶騿栴}
var b1 = new Bbb();
//b1.showName();
//alert( b1.name );
//alert( b1.constructor );
b1.name.push(4);
var b2 = new Bbb();
alert( b2.name );
</script>
</head>
<body>
</body>
</html>
原型繼承：（無new對(duì)象）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<script>
var a = {
name: '小明'
};
var b = cloneObj(a);
b.name = '小強(qiáng)';
//alert( b.name );
alert(a.name);
function cloneObj(obj) {
var F = function () {
};
F.prototype = obj;
return new F();
}
</script>
</head>
<body>
</body>
</html>