問(wèn)題1： OOP 指什么？有哪些特性

OOP:是面向?qū)ο蟪绦蛟O(shè)計(jì)。以前寫代碼都是面向過(guò)程。面向?qū)ο缶褪前压械膶傩苑庋b起來(lái)，然后批量生產(chǎn)。封裝起來(lái)的就是類，然后批量生產(chǎn)的就是對(duì)象。
特性：

1. 封裝: 把共用的屬性放在一起。然后留出接口。使用者，只需要調(diào)用和傳參，不需要知道內(nèi)部的實(shí)現(xiàn)原理。
2. 繼承: 子類可以繼承父類，子類可以在繼承后，重寫父類的方法和變量。這樣可以提高代碼的重用性。
3. 多態(tài): 子類繼承父類方法和變量后，可以重寫。

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

function Human(name,age) {
    this.name = name;
    this.age = age;
    this.say = function() {
        console.log( this.name + "is" + this.age + "years old");
    }
}
var xiaoming = new Human("xiaoming", 22);

問(wèn)題3： prototype 是什么？有什么特性

• JavaScript的每個(gè)對(duì)象都繼承另一個(gè)對(duì)象，后者稱為“原型”（prototype）對(duì)象。只有null除外，它沒(méi)有自己的原型對(duì)象。
• 原型對(duì)象的作用，就是定義所有實(shí)例對(duì)象共享的屬性和方法。這也是它被稱為原型對(duì)象的含義，而實(shí)例對(duì)象可以視作從原型對(duì)象衍生出來(lái)的子對(duì)象。
• 通過(guò)構(gòu)造函數(shù)生成實(shí)例對(duì)象時(shí)，會(huì)自動(dòng)為實(shí)例對(duì)象分配原型對(duì)象。每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性就是實(shí)例對(duì)象的原型對(duì)象。
• Object.getPrototypeOf()方法返回一個(gè)對(duì)象的原型。這是獲取原型對(duì)象的標(biāo)準(zhǔn)方法。

特性：
1. 原型對(duì)象上的所有屬性和方法，都能被派生對(duì)象共享。這就是JavaScript 繼承機(jī)制 的基本設(shè)計(jì)。
2.原型對(duì)象的屬性不是實(shí)例對(duì)象自身的屬性。只要修改原型對(duì)象，變動(dòng)就立刻會(huì)體現(xiàn)在所有實(shí)例對(duì)象上。
3.當(dāng)實(shí)例對(duì)象本身沒(méi)有某個(gè)屬性或方法的時(shí)候，它會(huì)到構(gòu)造函數(shù)的** prototype 屬性 **指向的對(duì)象，去尋找該屬性或方法。如果實(shí)例對(duì)象自身就有某個(gè)屬性或方法，它就不會(huì)再去原型對(duì)象尋找這個(gè)屬性或方法。

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

hwtu.png

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

function Car(name,color,status) {
    this.name = name;
    this.color = color;
    this.status = status;
    this.run = function() {
        this.status = run;
    }
    this.stop = function() {
        this.status = stop;
    }
    this.getStatus = function () {
        console.log(this.status);
    }
}

問(wèn)題6： 創(chuàng)建一個(gè) GoTop 對(duì)象，當(dāng) new 一個(gè) GotTop 對(duì)象則會(huì)在頁(yè)面上創(chuàng)建一個(gè)回到頂部的元素，點(diǎn)擊頁(yè)面滾動(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)

// jQuery語(yǔ)法實(shí)現(xiàn)
function GoTop(ct) {
    this.ct = ct;
    this.target = target;
    this.createNode();
    this.bindEvent();
}

GoTop.prototype.bindEvent = function() {
    this.target.on('click', function() {
        $("body").scrollTop(0);
    });
};
GoTop.prototype.createNode = function() {
    this.target = $("<button class='btn'> 點(diǎn)擊回到頂部 </button>")
    this.ct.append(this.target);
};

var gotoTop = new GoTop($(".ct"));