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

OOP是Object Oriented Programming（面向?qū)ο蟪绦蛟O(shè)計）
特性：

1. 封裝: 將客觀的事物封裝成抽象的類，類一般被指派代表一類具有共同屬性的事物，也可能具有相應(yīng)的一些功能，而這些功能的具體實現(xiàn)是不被暴露出來的，用戶只能接觸到一些”接口“，這些接口告知用戶可以使用什么樣的功能，卻無法探知里面的內(nèi)容。類似一個黑盒操作模型。封裝后的類可以具有更靈活的組合使用方式以及高復(fù)用性，提高了開發(fā)的效率。

2 . 繼承: 繼承可以讓某個類型的對象獲得另一個類型的屬性與方法，而不需要再次手動編寫屬于自己的同樣的屬性/方法。使用現(xiàn)有的類，我們可以對這些方法進行拓展。通過繼承創(chuàng)建新的類稱為子類或派生類，被繼承的類稱為基類，（父類，超類），繼承的過程，是從一般到特殊的過程。實現(xiàn)繼承我們可以通過繼承和組合實現(xiàn)，繼承概念的實現(xiàn)方式有兩類，實現(xiàn)繼承和接口繼承，實現(xiàn)繼承是直接使用父類的屬性和方法，而無需額外的編碼能力，接口繼承僅僅繼承了屬性和方法的名稱，但子類需要去對其提供實現(xiàn)的能力。

3 . 多態(tài): 對于同一個類，在不同的狀態(tài)下，可能會做出不同的反應(yīng)，也就是說在內(nèi)部結(jié)構(gòu)里進行的操作不同，但是都通過相同的方式予以調(diào)用。

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

function Person()(name,age,job){//定義構(gòu)造函數(shù)，默認命名第一個字母為大寫
    this.name=name; 
    this.age=age; 
    this.job=job;//直接將屬性和方法賦給this對象 
    this.sayName=function(){ 
        alert(this.name); 
    }; 
} 
var person1=new Person('jrg','22','doctor')//使用new操作符進行實例化

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

每創(chuàng)建一個函數(shù)都有一個prototype（原型）屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。所以也可以說prototype就是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個對象實例的原型對象，原型對象可以讓所有對象實例共享它所包含的屬性和方法

問題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('前端');

原型

FMPlayer2.jpg

問題5： 創(chuàng)建一個 Car 對象，擁有屬性name、color、status；擁有方法run，stop，getStatus

function Car(name,color,status){
     this.name = name ;
     this.color = color;
     this.status = status;
}
Car.prototype ={
     constructor:Car,
     run:function(){
         console.log(run)
     },
     stop:function(){
        console.log(stop) 
    },
    getStatus:function(){
        console.log(this.status)
    }
}
var Car1 = new Car('dazhong', 'red', '0'){
    Car1.run();  // run
    Car1.stop();  //stop
    Car1.getStatus();   //0
}

問題6： 創(chuàng)建一個 GoTop 對象，當 new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素，點擊頁面滾動到頂部。擁有以下屬性和方法

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

效果預(yù)覽，代碼如下：

        function GoTop(ct, target){
            this.ct = ct
            this.target = $('<button class="btn">Go Top</button>')
            this.target.css({
                'bottom':'00px',
                'position':'fixed'
            })
        }
        GoTop.prototype = {
            constructor:GoTop,
            creatNode:function(){
                this.ct.append(this.target)
                this.target.hide()
            },
            bindEvent:function(){
                var _this = this
                $(window).on('scroll',function(){
                    if($(window).scrollTop() > 100){
                        _this.target.show()
                    }else{
                        _this.target.hide()
                    }
                })
                this.target.on('click',function(){
                    $(window).scrollTop(0)
                })
            }
        }
        var Top = new GoTop($('body'))
        Top.creatNode()
        Top.bindEvent()

問題7： 使用木桶布局實現(xiàn)一個圖片墻

代碼

預(yù)覽