OOP 及其特性
OOP：全称 Object Oriented Programming，面向对象程序设计。传统的计算机程序是由一系列的指令和函数组成，而面向对象编程的程序是由一个个独立的代码块也就是对象组成的，一个个对象分工合作完成任务。
特性：
-
继承性：由构造函数所创建的对象会继承其创造者的一部分公共属性。 -
多态性：由继承而产生相关的不同实例会有不同的具体功能。 -
封装性：在一个对象的内部，某些代码是私有的不能被外界访问到的。
如何通过构造函数的方式创建一个拥有属性和方法的对象
先定义一个函数，里面用this.xx等设置相关值和函数，就是属性和方法啦，然后用new关键字创建一个对象就可以了；例如：
function People(name,age){
this.name=name;
this.age=age;
this.introduce=function(){
console.log('Hello , My name is '+this.name+' I am '+age+' years old');
}
}
var jon = new People('jon',20);
prototype 及其特性
prototype：是原型的意思，在javascript中每个对象都有原型也就是prototype属性。这个属性存的是一个地址，指向一个原型对象。可以用这个属性来给对象添加固有属性。
特征：在原型中所拥有的特性，继承的对象都会有，因为继承的对象都会有一个proto属性指向原型。
画出如下代码的原型图
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('前端');
原型图
变量name
function People (){
var name = "饥人谷" // 这个name 是函数内的 局部变量
this.name = "我"; // 这个name 根据this指向不同而不同 正常运行时是window全局变量；new一个新对象时又是指代新对象的name属性
}
People.name = "jscode"; // 这个name 是People这个函数的一个属性 函数也是对象
People.prototype.name = "学前端"; // 这个name是People的原型的一个属性 这样做以后 用People构造的对象就都会继承name这个属性了，但是如果复写的话就会被覆盖。
小练习
1.创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
function Car(name,color,status){
this.name=name;
this.color=color;
this.status=status;
this.run=function(){
this.status='run';
}
this.stop=function(){
this.status='stop';
}
this.getStatus=function(){
return this.status;
}
}
var car = new Car('byd','white','stop');
2.创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部；拥有以下属性和方法
- ct属性，GoTop 对应的 DOM 元素的容器
- target属性， GoTop 对应的 DOM 元素
- bindEvent 方法， 用于绑定事件
- createNode 方法， 用于在容器内创建节点
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function GoTop($ct){
this.ct=$ct;
this.target=$('<button>点我回到顶部</button>');
this.creatNode=function(){
this.ct.append(this.target);
}
this.bindEvent=function(){
this.target.on('click',function(){
$(window).scrollTop(0);
})
}
this.creatNode();
this.bindEvent();
}
var goTop = new GoTop($('body'));
</script>