JavaScript高手之路：构造函数方式封装对象
Posted 「已注销」
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高手之路：构造函数方式封装对象相关的知识，希望对你有一定的参考价值。
本节的主要内容是讲解new Object方式创建对象以及以这种方式来封装几个有趣的类。我们先来回顾一下new Object是怎么创建对象的，再说一下啊new Object方式创建对象如何演变。
new Object创建对象的演变方式
在本系列博客的第二节的时候就讲到了如何使用new Object方式和字面量方式来创建对象，前一篇博客中用字面量方式来封装了几个也民效果的类，这这一节我们先来看看new Object这种方式创建的对象方式是如何演变的。new Object是这样定义对象的：
var obj1 = new Object();
obj1.name = "Spring Chang";
obj1.QQ = "290794272";
obj1.showInfo = function ()
alert("name = " + this.name + ",QQ = " + this.QQ);
obj1.showInfo();
上面代码直接了断的创建了obj1对象，并对它的属性name,QQ赋值，然后在showInfo方法中输出这两个属性的值。如果要创建第二个对象，则这样创建：
var obj2 = new Object();
obj2.name = "Lily Wang";
obj2.QQ = "1008611";
obj2.showInfo = function ()
alert("name = " + this.name + ",QQ = " + this.QQ);
obj2.showInfo();
这是最原始的对象创建方式，如果你的JS代码中用到一两个这样的对象不足为惧，但是如果你的代码中要用到多个对象，你会发现这样创建会比较麻烦，于是乎我们来改进一下对象的创建方式。将创建对象的过程交给一函数来执行，我们只获取该函数创建出来的对象即可，于是我们利用函数的方式来创建对象，代码如下：
function createObject(uName, qq)
var obj = new Object();
obj.username = uName;
obj.QQ = qq;
obj.showInfo = function ()
alert(this.username + "," + this.QQ);
return obj;
var obj1 = createObject("Spring Chang", "290794272");
obj1.showInfo();
var obj2 = createObject("Lily Wang", "1008611");
obj2.showInfo();
上诉代码虽然简化了对象的创建过程，但总觉得思路还是使用面向过程来完成的，我们再来改进一下，使用构造函数方法来创建对象。
function CreateObj( uName, uQQ )
this.userName = uName;
this.userQQ = uQQ;
this.showInfo = function ()
alert( this.userName + '\\n' + this.userQQ );
;
var obj1 = new CreateObj('Spring Chang', '290794272');
obj1.showInfo();
var obj2 = new CreateObj('Lily Wang', '1008611');
obj2.showInfo();
当我们学会使用构造函数来创建对象的时候，让我们回过头来看看第2节JavaScript高手之路：对象的定义以及封装是怎么封装对象，这一节中我们使用字面量方式来封装对象，当时我们封装的第一个对象是四则运算，现在我们也用新的方式来封装一下四则预算。
构造方式封装四则运算
第2节我们设计的四则运算类具有=-*/运算功能，调用者只需要调用Operation.add(),Operation.sub(),Operation.muti(),Operation.divsition()就能对两数做加减成除运算，现在我们用第二种方式修改如下：
function Oper(n1, n2)
this.num1 = n1;
this.num2 = n2;
this.add = function ()
return this.num1 + this.num2;
this.sub = function ()
return this.num1 - this.num2;
this.muti = function ()
return this.num1 * this.num2;
this.div = function ()
return this.num1 / this.num2;
调用代码如下：
var operation = new Oper(2, 3);
alert(operation.add());
alert(operation.sub());
alert(operation.muti());
alert(operation.div());
上面封装的类效果和第2节中封装的类效果是相同的，我就不贴出输出结果了。
构造方式封装素数
第2节中我们封装完了四则运算之后接下来封装了Primer素数类，该对象具有三个方法，分别是isPrimer()判断一个自然数是否属于素数，getPrimer()获取指定范围内的素数数组和getCount()方法获取指定范围内的素数长度，改装过后的Primer如下：
function Primer()
this.primerArr = [];
this.start = arguments[0].start;
this.end = arguments[0].end;
this.length = 0;
this.isPrimer = function (number)
if(number <= 1) //如果该数小于等于1,则不是素数，
return false;
for(var i = 2; i < number; i++)
if(number%i == 0)
return false;
return true;
this.getPrimer = function ()
for(var i = this.start; i <= this.end; i++)
if(this.isPrimer(i))
this.primerArr.push(i);//向数组中追加元算
var arr = this.primerArr;
return arr;
this.getCount = function ()
var arr = this.getPrimer();
var length = arr.length;
this.length = length;
return length;
测试代码如下：
var primer = new Primer(start:1, end:100);
// console.log(primer.getPrimer());
console.log(primer.getCount())
//alert(primer.isPrimer(2));
测试代码首先创建了Primer类的对象primer，并初始化参数start:1,end:100,然后调用其isPrimer(2)判断2是否属于素数，getPrimer()获取1到100之间属于素数数组和getCount()获取素数长度。
数组排序功能
上面俩例子是对第2节中Operation和Primer的改造，现在我们再来封装另一个类数组类MyArray，该类的主要功能是：对数组进行排序和输出数组中的元素。MyArray中有一个内部变量arr记录当前数组，show()函数用于输出当前数组的每一个元素，sort()方法则用于排序。此外，由于在排序过程中多次交换数组的两个位置的值，所以添加了swap函数。
MyArray雏形如下：
var MyArray = function (aNums)
this.arr = aNums; //成员变量
//输出数组元素
this.show = function ()
;
//排序,oder:升序、降序
this.sort = function(order)
;
//交换两个数
this.swap = function(tempArr, index1, index2)
上面只是定义了MyArray的轮廓，并没有实现每个方法，下面先从最简单的输出函数实现起，show函数代码实现如下：
//输出数组元素
this.show = function ()
for(var i = 0; i < this.arr.length; i++)
document.write(this.arr[i] + "\\t")
document.write("<br />");
;
代码中一个for循环遍历了arr数组的的每一个元素，没遍历一个元素留一个空格，遍历结束之后输出br标签表示换行。接下来我们来看sort函数是如何实现的：
//排序,oder:升序、降序
this.sort = function(order)
for(var i = 0; i < this.arr.length; i++)
for(var j = i+1; j < this.arr.length; j++)
if(order == 'desc') //如果传递过来的参数是desc，则降序排序
if(this.arr[i] < this.arr[j])
this.swap(this.arr, i, j);
else //否则升序排序
if(this.arr[i] > this.arr[j])
this.swap(this.arr, i, j);
;
sort方法是用的核心就是冒泡排序，与教科书不能的是这里添加了order参数，该参数用来标志排序是升序还是降序排序，当给定的参数是"desc"时，则为降序排序，当给定参数为"asc"或者不给的时候，则默认是升序排序。
MyArray类完整代码如下:
var MyArray = function (aNums)
this.arr = aNums; //成员变量
//输出数组元素
this.show = function ()
for(var i = 0; i < this.arr.length; i++)
document.write(this.arr[i] + "\\t")
document.write("<br />");
;
//排序,oder:升序、降序
this.sort = function(order)
for(var i = 0; i < this.arr.length; i++)
for(var j = i+1; j < this.arr.length; j++)
if(order == 'desc') //如果传递过来的参数是desc，则降序排序
if(this.arr[i] < this.arr[j])
this.swap(this.arr, i, j);
else //否则升序排序
if(this.arr[i] > this.arr[j])
this.swap(this.arr, i, j);
;
//交换两个数
this.swap = function(tempArr, index1, index2)
var temp = tempArr[index1];
tempArr[index1] = tempArr[index2];
tempArr[index2] = temp;
测试用例如下：
var myArr = new MyArray([1,0,0,8,6]);
document.write("排序前:")
myArr.show();
myArr.sort();
document.write("缺省参数排序,排序后:");
myArr.show();
myArr.sort("desc");
document.write("降序排序,排序后:");
myArr.show();
测试用例输出结果如下：
以上是关于JavaScript高手之路：构造函数方式封装对象的主要内容，如果未能解决你的问题，请参考以下文章