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

面向?qū)ο缶幊?Object Oriented Programming，OOP，面向?qū)ο蟪绦蛟O(shè)計(jì)是一種計(jì)算機(jī)編程架構(gòu)。
三大特性：

• 繼承 允許在現(xiàn)存的組件基礎(chǔ)上創(chuàng)建子類組件
• 多態(tài) 組件的引用和類集會(huì)涉及到其它許多不同類型的組件，而且引用組件所產(chǎn)生的結(jié)果依據(jù)實(shí)際調(diào)用的類型
• 封裝 確保組件不會(huì)以不可預(yù)期的方式改變其它組件的內(nèi)部狀態(tài)；只有在那些提供了內(nèi)部狀態(tài)改變方法的組件中，才可以訪問其內(nèi)部狀態(tài)

2： 如何通過構(gòu)造函數(shù)的方式創(chuàng)建一個(gè)擁有屬性和方法的對(duì)象?

使用new 運(yùn)算符，任何函數(shù)使用new表達(dá)式就是構(gòu)造函數(shù)

new 運(yùn)算符接受一個(gè)函數(shù) F 及其參數(shù)：new F(arguments...)。這一過程分為三步：

1. 創(chuàng)建類的實(shí)例, 這步是把一個(gè)空的對(duì)象的 proto 屬性設(shè)置為 F.prototype
2. 初始化實(shí)例, 函數(shù) F 被傳入?yún)?shù)并調(diào)用，關(guān)鍵字 this 被設(shè)定為該實(shí)例
3. 返回該實(shí)例

例如：

function People(name){
    this.name = name
    this.sayName = function(){
        console.log(this.name)
    }
}
var p1 = new People('wangpeng')
p1.name //調(diào)用p1的屬性，控制臺(tái)輸出 "wangpeng"
p1.sayName() //調(diào)用p1的方法，控制臺(tái)輸出 wangpeng

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

prototype這個(gè)單詞的意思是 原型。
Object.prototype屬性表示 Object 的原型對(duì)象。
JavaScript中幾乎所有的對(duì)象都是 Object 的實(shí)例; 所有的對(duì)象都繼承了Object.prototype的屬性和方法

所有實(shí)例都會(huì)通過原型鏈引用到類型的prototype:
類的prototype對(duì)象可以作為一個(gè)公共容器，供所有實(shí)例訪問, 實(shí)例可以通過__ 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： 創(chuàng)建一個(gè) Car 對(duì)象，擁有屬性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： 創(chuàng)建一個(gè) GoTop 對(duì)象，當(dāng) new 一個(gè) GotTop 對(duì)象則會(huì)在頁面上創(chuàng)建一個(gè)回到頂部的元素，點(diǎn)擊頁面滾動(dòng)到頂部。擁有以下屬性和方法

1. `ct`屬性，GoTop 對(duì)應(yīng)的 DOM 元素的容器
2.  `target`屬性， GoTop 對(duì)應(yīng)的 DOM 元素
3.  `bindEvent` 方法， 用于綁定事件
4 `createNode` 方法， 用于在容器內(nèi)創(chuàng)建節(jié)點(diǎn)

實(shí)現(xiàn)代碼如下（點(diǎn)擊查看演示效果）：

    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)         //當(dāng)點(diǎn)擊按鈕時(shí)，橫縱滾動(dòng)條全部復(fù)位
      }
      window.onscroll = function(){
        if(this.scrollY > 200){       //當(dāng)滾動(dòng)的時(shí)候，距離大于200px了，再顯示gotop按鈕
          self.target.style.display = 'block'
        }else{
          self.target.style.display = 'none'
        }
      }
    }

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

    var go1 = new GoTop()

7： 使用木桶布局實(shí)現(xiàn)一個(gè)圖片墻

木桶布局

預(yù)覽地址