javascript 之面向对象

最新推荐文章于 2024-09-13 08:33:26 发布

Jarson

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量284

点赞数

文章标签： javascript function prototype object html 文档

本文链接：https://blog.csdn.net/zjs198874/article/details/7832790

版权

下面提供三种，JAVASCRIPT三种构建自己对象的方法，有点面向的对象的味道哟。。。。

第一种：利用OBJECT函数

var Gallery = new Object();

window.οnlοad= function(){

Gallery.Images = ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 'istockphoto_14667148.jpg'];

Gallery.CurrentIndex = 0; Gallery._loopInterval = setInterval(Gallery.Next, 2500);

};

Gallery.Next = function(){

if(Gallery.CurrentIndex < (Gallery.Images.length-1)) { Gallery.CurrentIndex++; } else { Gallery.CurrentIndex = 0; } Gallery.Display();

};

Gallery.Prev = function(){

if(Gallery.CurrentIndex > 0) { Gallery.CurrentIndex--; } else { Gallery.CurrentIndex = (Gallery.Images.length-1); } Gallery.Display();

};

Gallery.Display = function(){

var photoGallery = document.getElementById('photo-gallery'); var currentImage = Gallery.Images[Gallery.CurrentIndex]; photoGallery.src = "../assets/img/"+currentImage;

};

如上就创建了一个Gallery对象，其有三个属性，三个函数；

第二种：利用字面符号

以上两种创建对象的方式只能实例化一次，这一点值得注意；

哪么如何在一个HTML文档中创建多个对象呢，就是下面的第三种方式；

第三种：使用object构造器，与prototype关键字；

代码如下：

function GalleryObj()
{
    this.Images = ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg',
'istockphoto_14667148.jpg'];
    this.CurrentIndex = 0;
    this._loopInterval = setInterval(this.Next, 2500);
}

GalleryObj.prototype.Next = function()
{
    if(Gallery.CurrentIndex < (Gallery.Images.length-1))
    {
        Gallery.CurrentIndex++;
    }
    else
    {
        Gallery.CurrentIndex = 0;
    }
    Gallery.Display();
};

GalleryObj.prototype.Prev = function()
{
    if(Gallery.CurrentIndex > 0)
    {
        Gallery.CurrentIndex--;
    }
    else
    {
        Gallery.CurrentIndex = (Gallery.Images.length-1);
    }
    Gallery.Display();
};

GalleryObj.prototype.Display = function()
{
    var photoGallery = document.getElementById('photo-gallery');
    var currentImage = Gallery.Images[Gallery.CurrentIndex];
    photoGallery.src = "../assets/img/"+ currentImage;
};

var Gallery = new GalleryObj();

var Gallery2 = new GalleryObj();

以上三种方法创建的对象我们应该使用呢，其实跟我们平时调用JS中的方法一样；

<html>
<head>
<title>Getting Started with Object-Oriented JavaScript</title>
<script type="text/javascript" src="js/Gallery.js"></script>
</head>

<body>

</body>
</html>

进阶：在第三种方式中，我们提到prototype关键字，我们可以利用这个关键字为对象添加方法，比如我们现在想为Array内置对象添加一个

GetIndex方法

Array.prototype.GetIndex = function(item)
{
for(var i=0; i<this.length; i++)
{
  if(this[i] == item)
            {
                return i;
            }
}
}

使用如下：

<html>
<head>
<title>Getting Started with Object-Oriented JavaScript</title>
<script type="text/javascript" src="js/Array.js"></script>
<script type="text/javascript">
var Images = ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg',
'istockphoto_14667148.jpg'];
var index = Images.GetIndex('istockphoto_14232771.jpg');
alert("Index: "+ index);
</script>
</head>

如此，通过这种方法我们可以扩展javascript的核心对象，从而构建自己的javascript 工具；

写得很简陋，望大神们多提点提点，呵呵