1. OOP 指什么？有哪些特性?

OOP: Object-oriented programming的缩写，即面向对象程序设计。
两个最重要的概念就是类和对象：
- 将一些属性和方法封装为类
- 类可以继承类（父类与子类）
- 将类实例化就有了对象
- 对象拥有类的属性和方法，父类的属性和方法，父类的父类...
- 不同对象的同一个方法，可以有不同的表现
特性
- 封装：将一个类的使用和实现分开，只保留部分接口和方法与外部联系。
- 继承：子类自动继承其父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
- 多态：子类继承了来自父级类中的属性和方法，并对其中部分方法进行重写，即不同对象的同一个方法，可以有不同的表现。

2. 如何通过构造函数的方式创建一个拥有属性和方法的对象?

function People(name,age){
  this.name=name,
  this.age=age
  this.sayHi = function(){
    console.log("Hi,my name is "+p1.name+" ,I'm "+p1.age+" years old");
  }
}
var p1 = new People("andrea",20);
p1.sayHi();

3. prototype 是什么？有什么特性?

在JavaScript中，任何函数在声明后都有一个prototype属性，它对应的值是一个Object,叫原型对象
当 new 这个函数的时候，会作为构造函数创建一个对象
对象里面会有一个proto的隐藏属性，指向上述构造函数原型对象
当访问对象的属性时先从对象本身里找，找不到再从原型对象里找

4. 画出如下代码的原型图

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('Andrea');

原型

5. 创建一个 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(){
  console.log(this.name+" is runing");
};
Car.prototype.stop = function(){
  console.log("Please stop this "+this.color+" car");
};
Car.prototype.getStatus = function(){
  console.log("This car is level "+this.status);
};
var car1 = new Car("BMW","red","2");
var car2 = new Car("LEXUS","black","1");

car1.run();
car1.stop();
car1.getStatus();

car2.run();
car2.stop();
car2.getStatus();

6. 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法：

ct属性，GoTop 对应的 DOM 元素的容器
target属性， GoTop 对应的 DOM 元素
bindEvent 方法，用于绑定事件
createNode 方法，用于在容器内创建节点

html部分

<style>
  li {
    background-color: pink;
    height: 100px;
    list-style: none;
    border:1px solid #fff;
    text-align:center;
    line-height:100px;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>
</body>

JS 部分

<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
    function GoTop($ct) {
      this.$ct = $ct;
      this.$target = $('<button class="btn">GoTop</button>');
      this.$target.css({
        position: 'fixed',
        right: '100px',
        bottom: '100px'
      })
    }
    GoTop.prototype.creatNode = function() {
      this.$target.appendTo(this.$ct);
      this.$target.hide()
    }
    GoTop.prototype.bindEvent = function() {
      var _this = this;
      $(window).on('scroll',function() {
        if ($(window).scrollTop() < 100) {
          _this.$target.hide();
        }else {
          _this.$target.show();
        }
      });
      this.$target.on('click',function() {
        $(window).scrollTop(0);
      });
    }
    var GoTop1 = new GoTop($('body'));
    GoTop1.creatNode();
    GoTop1.bindEvent();
</script>

效果预览