1： OOP 指什么？有哪些特性

面向对象编程 Object Oriented Programming，OOP，面向对象程序设计是一种计算机编程架构。
三大特性：

• 继承 允许在现存的组件基础上创建子类组件
• 多态 组件的引用和类集会涉及到其它许多不同类型的组件，而且引用组件所产生的结果依据实际调用的类型
• 封装 确保组件不会以不可预期的方式改变其它组件的内部状态；只有在那些提供了内部状态改变方法的组件中，才可以访问其内部状态

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

使用new 运算符，任何函数使用new表达式就是构造函数

new 运算符接受一个函数 F 及其参数：new F(arguments...)。这一过程分为三步：

1. 创建类的实例, 这步是把一个空的对象的 proto 属性设置为 F.prototype
2. 初始化实例, 函数 F 被传入参数并调用，关键字 this 被设定为该实例
3. 返回该实例

例如：

function People(name){
    this.name = name
    this.sayName = function(){
        console.log(this.name)
    }
}
var p1 = new People('wangpeng')
p1.name //调用p1的属性，控制台输出 "wangpeng"
p1.sayName() //调用p1的方法，控制台输出 wangpeng

3： prototype 是什么？有什么特性

prototype这个单词的意思是 原型。
Object.prototype属性表示 Object 的原型对象。
JavaScript中几乎所有的对象都是 Object 的实例; 所有的对象都继承了Object.prototype的属性和方法

所有实例都会通过原型链引用到类型的prototype:
类的prototype对象可以作为一个公共容器，供所有实例访问, 实例可以通过__ proto __访问到其类型的prototype属性

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('peng');
var p2 = new People('前端');

原型图

5： 创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus

function Car(name, color){
  this.name = name
  this.color = color
  this.status = 'stopped'
}

Car.prototype.run = function(){
  this.status = 'running'
}
Car.prototype.stop = function(){
  this.status = 'stopped'
}
Car.prototype.getStatus = function(){
  console.log(this.status)
}

var c1 = new Car('BMW', 'black')

console.log(c1.color)   //black
c1.getStatus()          //stopped
c1.run()
c1.getStatus()          //running
c1.stop()
c1.getStatus()          //stopped

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

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

实现代码如下（点击查看演示效果）：

    function GoTop(){
      this.ct = document.querySelector('.ct')
      this.target = this.createNode()
      this.bindEvent()
    }

    GoTop.prototype.bindEvent = function(){
      var self = this
      this.target.style.display = 'none' //先隐藏
      this.target.onclick = function(){
        window.scrollTo(0, 0)         //当点击按钮时，横纵滚动条全部复位
      }
      window.onscroll = function(){
        if(this.scrollY > 200){       //当滚动的时候，距离大于200px了，再显示gotop按钮
          self.target.style.display = 'block'
        }else{
          self.target.style.display = 'none'
        }
      }
    }

    GoTop.prototype.createNode = function(){
      var target = document.createElement('div')
      target.innerText = '点我回到顶部'
      target.classList.add('goTop')
      this.ct.appendChild(target)
      return target
    }

    var go1 = new GoTop()

7： 使用木桶布局实现一个图片墙

木桶布局

预览地址