OOP 指什么？有哪些特性
面向对象编程（Object Oriented Programming，OOP，面向对象程序设计是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。
呃...简单地说，现在的计算机语言主要由面向对象和面向过程两种类型，
举个栗子，比如我们要把一头大象放进冰箱：
image.png
面向过程：1、打开冰箱 2、放大象进去（关注的是每一个动作）
面向对象：1、把冰箱打开（关注的是对象） 2、把大象放进去（操作是以对象为目标的）
主要特性有：
1） 封装
定义：指能够把一个实体的信息、功能、响应都装入一个单独的对象中的特性。
-
个人理解：如同汽车一样，把发动机，底盘，电路都封装起来，对外提供操作接口（方向盘，踏板，档把等等），起到方便访问而不暴露内在数据的作用。
汽车封装的示例
2） 继承：
就是子类可以继承父类的属性或者方法，而不必重写重复的属性或方法，节约空间提高速度，而js的继承一般是通过prototype来实现的。
3） 多态
多态首先是建立在继承的基础上的，先有继承才能有多态。
多态是指不同的子类在继承父类后分别都重写覆盖了父类的方法，即父类同一个方法，在继承的子类中表现出不同的形式。
比如，你和你朋友同时继承了人这个类中打人的方法，但是你用拳头打人和你朋友用巴掌打人的方法都是打人方法，却表现出不同的形式，这就是现实生活中多态的理解。
如何通过构造函数的方式创建一个拥有属性和方法的对象?
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
console.log(this.name);
}
}
var p1 = new Person(name,age,job);
要创建Person的对象，必须使用new操作符。以这种方式调用构造函数会经历以下4个步骤：
1、创建一个新对象
2、将构造函数的作用域赋给新对象（因此this就指向了这个对象）
3、指向构造函数中的代码（为这个新对象添加属性）
4、返回新对象
prototype 是什么？有什么特性
每个函数都自动添加一个名称为prototype属性，这是一个对象,它里面封装了一些属性和方法。
而通过构造函数实例化的对象的_proto_属性，指向的就是构造函数的prototype，访问一个对象的属性时，如果对象有这个属性，就获取到了，如果没有这个属性，则从proto里面去找，如果还是没有找到，则从原型对象的proto中去寻找。因此函数可以通过prototype把共用的属性或方法传给其子类。
例子：如下代码的原型图
function People (name){
this.name = name;
this.sayName = function(){
console.log('my name is:' + this.name);
}
}
People.prototype.walk = function(){
console.log(this.name + ' is walking');
}
var p1 = new People('饥人谷');
var p2 = new People('前端');
image.png
例子： 创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
function Car(name,color,status){
this.name = name;
this.color = color;
this.status = status;
}
Car.prototype = {
run: function(){},
stop: function(){},
getStatus: function(){}
}
var c1 = new Car('Lexus','silver','normal');
例子： 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
-
ct属性，GoTop 对应的 DOM 元素的容器 -
target属性， GoTop 对应的 DOM 元素 -
bindEvent方法， 用于绑定事件 -
createNode方法， 用于在容器内创建节点
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ct>div{
margin: 0 auto;
background-color: pink;
width: 600px;
height: 2500px;
}
.ct button{
display:block;
margin:10px auto;
}
</style>
</head>
<body>
<div class="ct">
<div></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
function GoTop(ct,target){
this.ct = ct;
this.target = target;
this.createNode = function(){
this.ct.append(this.target);
};
this.bindEvent = function(){
this.target.on('click',function(){
$(window).scrollTop(0);
});
};
this.createNode();
this.bindEvent();
}
var $ct = $('.ct');
var $target = $('<button>回到顶部</button>');
new GoTop($ct,$target);
</script>
</body>
</html>
例子：使用木桶布局实现一个图片墙
地址：http://jsbin.com/xogomo/edit?html,output
效果图：image.png
网友评论