JavaScript高手之路：对象的定义以及封装
Posted 「已注销」
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高手之路：对象的定义以及封装相关的知识，希望对你有一定的参考价值。
既然本系列博客的目的性很强：直接本着仿造jQuery框架而去的。那么很多理论性原理性的东西就不过于赘述了，直接以例子出发，由点到线，再由线到面循序渐进的穿插知识点来讲解。我们先来看看JS定义对象的两种方式。
new Obect创建对象
有过JS编程经验的同学都知道，JS中自带Array,Math,Date,RegExp,doucment等对象，它们提供了一些原始的方法，如document.write(),doucment.getElementById()等方法来操作对象。那么我们怎么样来自定义属于自己的对象呢？下面我直接先上一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一种定义对象的方式</title>
<script>
var object = new Object();
object.qq = "290794272";
object. showQQ = function()
alert(this.qq)
object.showQQ();
</script>
</head>
<body>
</body>
</html>
这例子创建了一个Object对象，这对象里面有一个属性qq,然后有一showQQ()方法,然后我调用object.showQQ()方法来显示qq属性值，如果不出意外，上诉代码运行之后浏览器将弹出一个对话框，然后显示"290794272"，这个例子就这么简单。
看到这里，一些前端的老鸟会微微一笑，这例子未免也忒young忒simple了点儿。俗话说，万丈高楼拔地起，我相信脚踏实地的走，一步一个脚印的网上跑，总会向高手进阶的。
字面量方式定义对象
下面我们用另一种方式来创建对象，用类似与json这种方式来创建对象，通常我们称为字面量方式来创建对象，我将上诉的例子改装，新的方式定义为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二种方式创建对象</title>
<script>
var object =
qq : '290794272',
showQQ : function ()
alert(this.qq);
;
object.showQQ();
</script>
</head>
<body>
</body>
</html>
这里用object=这种方式来创建对象，同样的给了qq属性和showQQ方法，并在showQQ方法中打印出自身的qq属性值。
接下来我们给这个对象封装更多的属性值，如name,sex等属性值，js代码如下：
var object =
qq : '290794272',
name : "Spring Chang",
sex : 'sex',
showQQ : function ()
alert(this.qq);
,
showName : function ()
alert(this.name);
,
showSex : function ()
alert(this.sex);
;
object.showQQ();
object.showName();
object.showSex();
以后的例子中，在没必要额时候我将不再贴出整个html文档的所有内容。比如该例子，核心代码只包裹在head标签的script里面，所以我只贴出了js代码。上诉代码的含义是定义仨属性和仨方法，这仨方法分别输出了该对象对应的属性。
上诉俩例子就是js编程中最简单的对象的定义和封装，当然我知道你看了上诉俩例子之后肯定会觉得这是俩然并卵的例子，虽然看懂了但是不知道有什么用，下面我们来封装一个比较好玩的例子，四则运算的例子。
封装四则运算
四则运算我们都知道，就是用来处理两数之间的±*/四则运算的，在面向过程我们是这样设计的。
//js面向过程的四则运算
//加法运算法则
function add(num1, num2)
return num1 + num2;
//减法运算法则
function sub(num1, num2)
return num1-num2;
//乘法运算法则
function muti(num1, num2)
return num1*num2;
//除法运算法则
function divsition(num1, num2)
return num1/num2;
alert(add(1,2));
alert(sub(1,2));
alert(muti(1,2));
alert(divsition(1,2));
这里定义了四个方法，每个方法定义俩参数，然后在方法之外调用到了这些方法，弹窗输出相应的值。下面我们将上诉面向过程的代码改为面向对象的编程。首先得定义一个类Operation，然后该类的属性中带有上述四则运算法则属性，代码如下：
//js面向对象的四则运算
//定义了一个Operation操作对象
var Operation =
add :function (num1, num2)
return num1 * num2;
,
sub : function (num1, num2)
return num1-num2;
,
muti:function (num1, num2)
return num1*num2;
,
divsition:function (num1, num2)
return num1/num2;
;
alert(Operation.add(1,2));//调用Operation对象的加法运算
alert(Operation.sub(1,2));//调用Operation对象的减法运算
alert(Operation.muti(1,2));//调用Operation对象的乘法运算
alert(Operation.divsition(1,2));//调用Operation对象道的除法运算
上诉代码先定义了一个Operation对象，对象封装了±×/四种法则，按后调用Operation.add(),Operation.sub(),Operation.muti(),Operation.divsition()来分别操作它们，你可以尝试着运行上述代码来观察输出值，我觉得如果你的代码和我的一致的话，将要依次输出：2，-1，2，0.5。
封装素数
接下里我们再来看看如何封装一个素数操作类，寻找素数在C/C++编程入门或者算法入门中经常提到的一道问题，但是这里我们的重点并不是在算法，而是在面向对象思维编程上面，我假设你已经知道什么是素数，以及如何运算计算机语言来判定和寻找素数。
这里还是容许我罗罗嗦嗦重提一下什么是素数把，素数就是除了1和本身之外，不能被其他数整除的自然数。比如：[2，3，5，7，11…]，那么我们在编程中如何判定一个自然数是否属于素数呢？解决方法很简单：就是在一循环语句内，循环的变量从2开始，不断的尝试用该数去除以循环变量的值，如果一直除不尽，则判定为素数，否则不是素数。
算法思路大概就说这么多，下面拔刀相见直接开干。
var Primer =
isPrimer : function (number)
if(number <= 1) //如果该数小于等于1,则不是素数，
return false;
for(var i = 2; i < number; i++)
if(number%i == 0)
return false;
return true;
alert("2:" + Primer.isPrimer(2)); //true
alert("3:" + Primer.isPrimer(3)); //true
alert("4:" + Primer.isPrimer(4)); //false
alert("5:" + Primer.isPrimer(5)); //true
alert("9:" + Primer.isPrimer(9)); //false
上诉代码中定义了一个Primer对象，然后里面有一方法isPrimer()，调用代码传如参数:2,3,4,5,9，如果不出意外，你将输出注释后面的值。
下面我们尝试向该对象中添加更多的方法，比如判断一定范围内，有多少素数来着的，那么思路怎么做呢？这里需要再次重申一下，本系列博客的重点不是算法，而是面向对象。所以考虑到代码的重用性，我们值需要在新增的方法中，从圈定的范围内开始遍历数据，调用Primer.isPrimer(),如果判定为素数，则push()进我们的数组，然后在输出数组的内容即可。
var Primer =
//定义一个素数素质
primerArr:[],
//判断一个数是否为素数
isPrimer : function (number)
if(number <= 1) //如果该数小于等于1,则不是素数，
return false;
for(var i = 2; i < number; i++)
if(number%i == 0)
return false;
return true;
,
//获取给定范围内的所有素数
getPrimer : function (start, end)
for(var i = start; i <= end; i++)
if(this.isPrimer(i))
this.primerArr.push(i); //向数组中追加元算
var arr = this.primerArr;
return arr;
新增的getPrimer方法如上诉所述，遍历了start到end之间的所有整数，然后判断是否属于素数，如果是则push进primerArr数组，最后将这个数组返回调用者，调用代码如下：
document.write(Primer.getPrimer(1, 100));
页面输出值为:
2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97
按照上面的思路，我们再来给Primer类添加getCount()方法获取上诉范围内素数的个数，代码如下：
var Primer =
//定义一个素数素质
primerArr:[],
//判断一个数是否为素数
isPrimer : function (number)
if(number <= 1) //如果该数小于等于1,则不是素数，
return false;
for(var i = 2; i < number; i++)
if(number%i == 0)
return false;
return true;
,
//获取给定范围内的所有素数
getPrimer : function (start, end)
for(var i = start; i <= end; i++)
if(this.isPrimer(i))
this.primerArr.push(i); //向数组中追加元算
var arr = this.primerArr;
return arr;
,
//获取给定范围内数组长度
getCount :function (start, end)
var arr = this.getPrimer(start, end);
this.length = arr.length;
var length = this.length;
return length;
调用代码如下：
document.write("1到100之间的素数个数:" + Primer.getCount(1, 100) + "<br />");
页面输出值为：
1到100之间的素数个数:25
一个素数类大致的封装就到此结束了，当然了，你还可以自由发挥定义更多额方法。
本章节你已经学会了如何使用两种方式来定义javascript中的对象以及学会了封装两个类Operation四则运算类和Primer素数类，这俩例子在我们编程入门例子中较为常见，偏向于用来解决数学问题。后一章节将封装一些对象来实现一些简单的页面特效，我觉得如果你有JS Dom编程基础学起来轻快且轻松些，先这样了，我们下章节见！
以上是关于JavaScript高手之路：对象的定义以及封装的主要内容，如果未能解决你的问题，请参考以下文章