js面向对象的使用方法

标准用法：

function Sprite(){
    //函数内容部设置属性
    this.name='shimily';
}
//原型上设置方法
Sprite.prototype.show=function(){
    console.log(this.name);
}
//【尽量不要在原型上面添加公共属性】
//公共的属性或常量可以在原型上面设置

Sprite.prototype.PI=3.1415926;
var s = new Sprite();
s.show();

改进用法：

改进用法一：*************************

function Sprite2(name,age){
    //函数内容部设置属性
    this.name=name;
    this.age=age;
}
//原型上设置方法
Sprite2.prototype.show=function(){
    console.log(this.name);
}
 
var s2 = new Sprite2('shimily1314',20);
s2.show();    

改进方法二：*******************

function Sprite3(options){
    //函数内容部设置属性
    this.name=options.name;
    this.age=options.age;
}
//原型上设置方法
Sprite3.prototype.show=function(){
    console.log(this.name);
}
var s3 = new Sprite3({
    name:'shimilygood',
    age:20
});
 s3.show();

最终常用方法：***************

function Sprite4(options){
   //函数内容部设置属性
   this._init(options);
} 
 
Sprite4.prototype._init=function(options){
   this.name=options.name;
   this.age=options.age;
   this.color=options.color;
}
  //原型上设置方法
Sprite4.prototype.show=function(){
   console.log(this.name);
}
 
var s4 = new Sprite4({
   name:'shimilygood123',
   age:20
});
s4.show();

【最好、最常用】

最终【优化版】常用方法：***************

function Sprite5(options){
   //函数内容部设置属性
   this._init(options);
} 
 
Sprite5.prototype={
   _init:function(options){  //只允许内部调用的方法【仅内部调用】
      this.name=options.name;
      this.age=options.age || 20;
      this.color=options.color || 'red';
      console.log(this.name);
   },
  show:function(ele){   //[可以不加参数]外部可以调用的方法不使用下划线
     console.log(this.name + ele);
  }
 
};
 var s5 = new Sprite5({
     name:'shimilygoodabc',
    age:20
});
s5.show('yang');

王伟峰，图片轮播开发案例格式*******挺好用的

function Slider(container, opts){                        //属性设置
        this.$outer = $(container);
        this.$inner = this.$outer.children();
        this.$prev = $(opts.prev);
        this.$next = $(opts.next);
        this.$els = this.$inner.children();
        this.total = this.$els.length;
        this.w = this.$els.outerWidth(true);
        this.timer = null;
        this.isSliding = false;
        this.autoplay = opts.autoplay || false;
        this.init();                                     //对外接口
    }
    var proto = Slider.prototype;                        //原型中封装方法
    proto.init = function(){
        var self = this;
        var $last = this.$els.eq(this.total-1);
        if(this.total<6){
            $last = this.$els.clone().appendTo(this.$inner).eq(this.total-1);
            this.total *= 2;
        }
        $last.prependTo(this.$inner);
        this.$inner.css('marginLeft', -this.w);
        console.log(this.$next)
        this.$prev.on('click', function(){
            self.prev();
        })
        this.$next.on('click', function(){
            self.next();
        })
        this.$outer.on('mouseenter', function(){
            clearTimeout(self.timer);
        })
        this.$outer.on('mouseleave', function(){
            self.auto();
        })
        this.auto();
    }
    proto.prev = function(){
        if(this.isSliding) return;
        this.isSliding = true;
        var self = this;
        this.$inner.animate({
            marginLeft: 0
        }, 500, function(){
            self.$inner.children().eq(self.total-1).prependTo(self.$inner);
            self.$inner.css('marginLeft', -self.w);
            self.isSliding = false;
        })
    }
    proto.next = function(){
        if(this.isSliding) return;
        this.isSliding = true;
        var self = this;
        this.$inner.animate({
            marginLeft: -this.w*2
        }, 500, function(){
            self.$inner.children().eq(0).appendTo(self.$inner);
            self.$inner.css('marginLeft', -self.w);
            self.isSliding = false;
        })
    }
    proto.auto = function(){
        if(!this.autoplay) return;
        var self = this;
        function delay(){
            self.timer = setTimeout(function(){
                self.next();
                delay();
            }, 5000)
        }
        delay();
    }
 
//实例化
new Slider('.slideOuter',{
    prev: '.prev',
    next: '.next',
    autoplay: true
});