                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /星级评分原理和实现（上）

为什么提示栈溢出，.call那里

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.rating{
width: 140px;
height: 26px;
margin:100px auto;
}
.rating-item{
float: left;
width: 26px;
height: 26px;
background: url(0.PNG)center center no-repeat;
background-size:cover;
cursor:pointer;
}
</style>
</head>
<body>

<ul class="rating" id="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>


<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
var rating=(function(){
var extend=function(sunClass,superClass){
var F=function(){}
F.prototype=superClass.prototype;
sunClass.prototype=new F()
sunClass.prototype.constructor=sunClass;
}

var Light=function(el,mode,num){
this.$el=$(el);
this.$item=this.$el.find('.rating-item');
this.mode=$(mode)
this.num=num;
this.add=1;
}

Light.prototype.init=function(){
this.lightOn(this.num);
this.bindEvents();
this.select();
}

Light.prototype.lightOn=function(num){
num=parseInt(num);
this.$item.each(function(index){
if(index<num){
$(this).css('background-image','url(1.PNG)')
}else{
$(this).css('background-image','url(0.PNG)')
}
})
}

Light.prototype.bindEvents=function(){
var _this=this;

_this.$el.on('mousemove','.rating-item',function(e){
var $this=$(this)

_this.select(e,$this)
num=$this.index()+ _this.add
_this.lightOn(num)

}).on('click','.rating-item',function(){
_this.num=$(this).index()+_this.add
}).on('mouseout','.rating-item',function(){
_this.lightOn(_this.num)
})
}
Light.prototype.select=function(){
throw new Error('子类必须重写此方法')
}

//------------------整颗--------------------------------
var lightEnter=function(el,mode,num){
Light.call(this,el,mode,num)
}
extend(lightEnter,Light)

lightEnter.prototype.lightOn=function(num){
Light.prototype.lightOn.call(this,num)
}
var _this=this;

lightEnter.prototype.select=function(){
_this.add=1
}

//-------------半颗---------------------------
var lightHalf=function(el,mode,num){
lightHalf.call(this,el,mode,num)
};

extend(lightHalf,Light)

lightHalf.prototype.lightOn=function(num){
var cont=parseInt(num);
var isFloat=cont!==num;

Light.prototype.lightOn(cont)
if(isFloat){
this.$item.eq(cont).css('background-image','url(2.PNG)')
}
};
lightHalf.prototype.select=function(e,$this){
if(e.pageX-$this.offset().left<$this.width()/2){
_this.add=0.5
}else{
_this.add=1
}
};

var mode1= {
'lightEnter':lightEnter,
'lightHalf':lightHalf
}

var init=function(el,mode,num){
new mode1[mode](el,num).init();
}

return {
init:init
}
})()
// rating.init('#rating','lightEnter',3)
rating.init('#rating','lightHalf',3)
</script>
</body>
</html>