对象、原型

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>