jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承(jquery图片轮播视频)

编辑：rootadmin

推荐整理分享jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承(jquery图片轮播视频)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery图片轮播图片切换图片宽度减5,jquery图片轮播图片切换距离减5原因,jquery图片轮播插件,jquery图片轮播简单代码,jquery图片轮播图片切换距离减5原因,jquery图片轮播图片切换距离减5原因,jquery图片轮播简单代码,jquery图片轮播简单代码,内容如对您有帮助，希望把文章链接给更多的朋友！

上一篇文中完成的封装，还存在一个小问题，就是该轮播对象不能在同一页面中重复使用，本文将通过组合使用javascript的构造函数和原型模式创建对象来解决这个问题。

没有看过上一篇文章的朋友可以点此查看上一篇文章 (jQuery图片轮播实现并封装(一))

首先回顾一下，上文的问题所在，上文中的carsouel对象是采用字面量的方式来定义的，这样carsouel本就是一个实例，想要使用在多处时，这个对象的方法会发生冲突，最终只会执行最后的那一个。而通过采用构造函数的方式来定义对象carsouel，每次需要使用时只需要用new操作符来实例化一个新对象，页面中需要几处轮播就实例化几个对象，这样就可以满足需求。所以，将代码改成以下形式。

jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承(jquery图片轮播视频)

调用时采用new操作符，如下：

上述方法可实现需求，但是仔细分析发现，这与上一篇文中使用extend复制对象的方法几乎是一样的，这里的new操作符实际上也是将构造函数完全复制了一份出来作为一个新的对象，那就和上文中提到的方法存在共同的缺点，那就是内部函数不能复用，每次执行用new操作符来实例化，都会创建新的内部函数，这也是单独使用构造函数来自定义对象的缺点。

在Carousel对象内的next函数，prev函数，strat函数，stop函数其实都是可以共用的，多个轮播件共用这些函数是完全没有问题的，而初始化函数和play函数需要作为私有函数来调用。单独使用构造函数创建的对象，当使用new操作符创建新实例的时候，初始化方法和play方法会被重新在每个实例上创建一遍，这正是我们想要的结果，而next方法、prev方法、start方法、stop方法这些可共用的方法也会被重新创建，而创造多个完成一样任务的方法是完全没有必要的，所以需要将这些共有的方法提出来，让所有Carousel对象的实例都可以公用，这样就可以解决函数复用的问题。

通过将这些共用的方法写在Carousel的原型对象上，在创建Carousel新实例的时候就可以通过原型链来共享这些方法，这样这些公用函数也就得到了复用，代码如下：

在这里用字面量重写了Carousel对象的原型对象，将next方法，perv方法，start方法和stop方法写进了Carousel的原型对象中，这样每次实例化的对象就可以共用这些方法。当然，实例化的方法也是使用new操作符。

这种组合使用构造函数和原型的模式，是创建自定义类型最常用的方法，至此我们就完成了这个简单轮播对象的封装。