面向对象编程学习心得
菜鸟心得，如有错误，望大神指正
乍一听面向对象编程，觉得好难好高深的样子，其实不然，举个栗子：我们知道css里有class类，可以多处公用一个class样式，而且拓展方便。其实面向对象编程，类似于我们css里的class类的概念，就是页面中多处相同的交互效果或功能，就可以用面向对象的写法实现，代码公用，省去重复代码，提高性能，而且拓展起来也比较方便。
看很多视频教程和文章讲述js面向对象编程，甚是一头雾水，其中最懵圈的应该算是this指向问题了，做过几个练习之后，算是有点找到其中的窍门，这里用面向对象实现仿天猫右侧快捷导航的效果(无美观可言，以培养面向对象思维为主)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>after</title>
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
<style>
body{font-size:14px}
*{ margin: 0; padding: 0;}
a{text-decoration: none; color: #eee;}
.wrap{width: 50px; background: #222; position: fixed; right: 0; top: 0; height: 100%;}
.bus{width: 50px; height: 50px;position: relative;}
.bus a{display: block; width: 50px; height: 50px; text-align: center; line-height: 50px; background: #333;}
.bus p{width: 100px; text-align: center; height: 50px; line-height: 50px; background: #222; color:#eee;position: absolute; top: 0;right: 80px;opacity: 0;}
</style>
</head>
<body>
<div class="wrap">
<div id="busa" class="bus">
<a href="javascript:void(0)">购</a>
<p class="busshow">购物车</p>
</div>
<div id="busb" class="bus">
<a href="javascript:void(0)">我</a>
<p class="busshow">个人中心</p>
</div>
<div id="busc" class="bus">
<a href="javascript:void(0)">卡</a>
<p class="busshow">银行卡管理</p>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" async defer>
$(function(){
function Bar(obj){
this.wrap=$(obj);
this.alink=this.wrap.find('a');
this.op=this.wrap.find('p');
}
Bar.prototype.move=function(){
var that=this;
this.wrap.hover(function(){
that.alink.css('background','#222');
that.op.stop(true,false).animate({'opacity':1,'right':'50px'},200);
},function(){
that.alink.css('background','#333');
that.op.stop(true,false).animate({'opacity':0,'right':'80px'},200);
});
}
var a=new Bar('#busa');
a.move();
var b=new Bar('#busb');
b.move();
var c=new Bar('#busc');
c.move();
})
</script>
</body>
</html>
面向对象编程，要从具体的代码中跳出来，把这个功能想象成一个物体，这个物体有自己的特点（属性）和行为（方法），所以先应该抽象出一个对象，也就是例子中的构造函数：
function Bar(obj){
this.wrap=$(obj);
this.alink=this.wrap.find('a');
this.op=this.wrap.find('p');
}
这是创建每个实例的基础。这里面的this就是指的这个对象了。当我们创建了实例，var a=new Bar('#busa'),构造函数中的this就指向了我们刚创建的实例a了。
Bar.prototype.move=function(){
var that=this;
this.wrap.hover(function(){
that.alink.css('background','#222');
that.op.stop(true,false).animate({'opacity':1,'right':'50px'},200);
},function(){
that.alink.css('background','#333');
that.op.stop(true,false).animate({'opacity':0,'right':'80px'},200);
});
}
这里的意思是在构造函数Bar的原型上，创建了一个所有实例的公共方法move。而move里面的this就是问题的关键了。如果搞不清楚this的指向问题，我们可以在 var that=this前面alert(this),弹出的是object，也就是说现在这个区域的this还是指向的对象。如果在hover()方法内部再弹一下this，这里就指向div啦。那么问题来了，this.alink是对象下面的属性，不是div下面的属性啊，所以就报错了。所以在hover()方法外面，我们就要改一下this指向：var that=this; 把指向对象的this赋给变量that，that就指向了对象。在hover()方法内部that.alink 就是对象下面的属性了。上面这些是原理，技巧就是，遇到函数嵌套函数，就要在第一层函数里面改this指向。
var a=new Bar('#busa');
a.move();
这里就比较简单了，创建实例并按需调用方法。
浙公网安备 33010602011771号