js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>new+call(this)组合应用再探讨实例</title>
   <script type="text/javascript">
   /***
   *参数：
   *imgArr:图片组
   *container:轮播图的父容器
   *arrow:左右箭头图片组
   */
   //创建图片轮播基类
   var LoopImages = function(imgArr,container){
       this.imagesArr = imgArr;
       this.container = container;
   }
   LoopImages.prototype = {
       //创建轮播图片
       createImage:function(){
           console.log('createLoopImages');
       },
       //切换下一张图片
       changeImage:function(){
           console.log('changeLoopImages');
       }
   }
   //创建上下滑动子类
   var SlideLoopImg = function(imgArr,container){
       //构造函数继承父类图片轮播类
       LoopImages.call(this,imgArr,container);
   }
   SlideLoopImg.prototype = new LoopImages();//这句加上上面的call(this)就是组合式继承了
   //先new继承父类原型，再创建子类的原型方法，这个顺序一定得这样写，否则报错
   SlideLoopImg.prototype.changeImage = function(){
       console.log('SlideLoopImg changeImages');
   }
   //创建渐隐渐显子类
   var FadeLoopImg = function(imgArr,container,arrow){
       LoopImages.call(this,imgArr,container);
       this.arrow = arrow;
   }
   FadeLoopImg.prototype = new LoopImages();
   FadeLoopImg.prototype.changeImage = function(){
       console.log('FadeLoopImg changeImages');
   }

//测试用例
var fadeimg = new FadeLoopImg(['01.jpg','02.jpg','03.jpg','04.jpg'],'slide',['left.jpg','right.jpg']);//'slide'是父容器名字
fadeimg.changeImage();

//本例已经通过验证
</script>
</head>
<body>

</body>
</html>

巴特西

js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例

最新文章

热门文章