面向对象

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

OOP(object-oriented programming)——面向对象程序设计。
是一种设计代码的思维模式。其目的是改善代码的可读性以及提高代码的重用性。
面向对象的原则是“开放封闭原则“。
开放指的是——对于扩展是开放的（Open for extension）。
封闭指的是——对于修改是关闭的（Closed for modification）。
面向对象有三要素：

1. 封装：将一系列有关的行为放在一起。
2. 继承：将父类的行为继承下来，可以提高重用性，提高性能，减少内存消耗。
3. 多态：对于同一个行为获得不同的结果。

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

function Fn(name,age){
  this.name = name;
  this.age = age;
  }
Fn.prototype.infomation = function(){
  console.log(this.name)
  console.log(this.age)
}

p = new Fn(ff,18)

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

所有的构造方法都有一个prototype属性，并且可以为其添加方法。
在构建方法的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('饥人谷');
var p2 = new People('前端');

原型图

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

//创建一个 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('running')
}
Car.prototype.stop = function(){
    console.log('stop')
}
Car.prototype.getStatus = function(){
    console.log(this.status)
}


var car1 = new Car('cc','red','aa')

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

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

function Gotop(){
  var parent = document.querySelector('body')
  var goTopBtn = document.createElement('div')
  goTopBtn.setAttribute('class','top-btn')
  goTopBtn.innerText = "回到顶部"
  parent.appendChild(goTopBtn)
  goTopBtn.addEventListener('click',function(){
    window.scrollTo(0,0)
  })
  this.ct = goTopBtn.parentElement
  this.target = goTopBtn
}

Gotop.prototype.bindEvent = function(action,fn){
  this.target.addEventListener(action,fn)
}
Gotop.prototype.createNode = function(x){
  var content = document.createElement(x)
  this.ct.appendChild(content)
}

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

木桶布局