面向对象

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

OOP是指面向对象编程，它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。
那么，“对象”（object）到底是什么？
我们从两个层次来理解。
（1）对象是单个实物的抽象。
一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。
（2）对象是一个容器，封装了属性（property）和方法（method）。
属性是对象的状态，方法是对象的行为（完成某种任务）。比如，我们可以把动物抽象为animal对象，使用“属性”记录具体是那一种动物，使用“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。

有封装、多态和继承特性

• 封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。封装是面向对象的特征之一，是对象和类概念的主要特性。 简单的说，一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部，某些代码或某些数据可以是私有的，不能被外界访问。通过这种方式，对象对内部数据提供了不同级别的保护，以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分。
• 继承是指可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。 通过继承创建的新类称为“子类”或“派生类”，被继承的类称为“基类”、“父类”或“超类”。继承的过程，就是从一般到特殊的过程。要实现继承，可以通过“继承”（Inheritance）和“组合”（Composition）来实现。继承概念的实现方式有二类：实现继承与接口继承。实现继承是指直接使用基类的属性和方法而无需额外编码的能力；接口继承是指仅使用属性和方法的名称、但是子类必须提供实现的能力；
• 多态就是指一个类实例的相同方法在不同情形有不同表现形式。多态机制使具有不同内部结构的对象可以共享相同的外部接口。这意味着，虽然针对不同对象的具体操作不同，但通过一个公共的类，它们（那些操作）可以通过相同的方式予以调用。

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

function People(name, age) {
  this.name = name
  this.age = age
}
People.prototype.sayName = function () {
  console.log('my name is ' + this.name)
}

var p1 = new People(" 饥人谷 ");

p1.sayName()  //  my name is 饥人谷

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

prototype是指原型对象，JavaScript 的每个对象都继承另一个对象，后者称为“原型”（prototype）对象。只有null除外，它没有自己的原型对象。
通过构造函数生成实例对象时，会自动为实例对象分配原型对象。每一个构造函数都有一个prototype属性，这个属性就是实例对象的原型对象。
继承：原型对象上的所有属性和方法，都能被派生对象共享。这就是 JavaScript 继承机制的基本设计。

问题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('前端');

1.PNG

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

function Car(name, color, status) {
  this.name = name
  this.color = color
  this.status = status
  this.run = function () {
     console.log('run')
  }
  this.stop = function () {
     console.log('run')
  }
  this.getState = function () {
     console.log(this.status)
  }
}
var car = new Car('F1', 'red', 'good')

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

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

function GoTop(ct) {
    this.ct = ct || $('body')
    this.createNode = function () {
      var $button = $('<button>GoTop</button>')
      this.ct.append($button)
      return $button
    }
    this.target = this.createNode()
    this.bindEvent = function () {
      this.target.on('click',function () {
        $(window).scrollTop(0)
      })
    }

  }

  var b = new GoTop()
  b.bindEvent()

link

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

link