JavaScript高手之路:对象的定义以及封装

版权声明:本文为张仕宗原创文章,允许转载,转载时请务必标明文章原始出处 。 https://blog.csdn.net/zhang5476499/article/details/86684481

既然本系列博客的目的性很强:直接本着仿造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编程基础学起来轻快且轻松些,先这样了,我们下章节见!

没有更多推荐了,返回首页