問答

1.OOP 指什么民晒？有哪些特性

OOP(Object Oriented Programming)指面向?qū)ο缶幊叹樱且环N程序設(shè)計思想。它將對象作為程序的基本單元镀虐。對象具有唯一的標(biāo)識符箱蟆，對象包括屬性（Properties）和方法（Methods），屬性就是需要記憶的信息刮便，方法就是對象能夠提供的服務(wù)空猜。
面向?qū)ο笥袃蓚€基本概念：
①類：類（Class）定義了一件事物的抽象特點(diǎn)；它定義了一些特點(diǎn)（屬性 property）和行為（方法 method）；類是對象的類型模板辈毯。
②實例：實例是根據(jù)類創(chuàng)建的對象坝疼；可以說類的實例是對象，類實際上就是一種數(shù)據(jù)類型谆沃；對象是類的具體化钝凶。
面向?qū)ο笥腥齻€基本特征：
①封裝：將一個類的使用和實現(xiàn)分開，只保留部分接口和方法與外部聯(lián)系唁影。封裝就是隱藏了某一方法的具體執(zhí)行步驟耕陷。
②繼承：在某種情況下，一個類會有子類据沈，子類比父類要更加具體化哟沫。子類會自動繼承父類的屬性和行為，并且包含它們自己的锌介。它還可以添加新的屬性和方法或者對部分屬性和方法進(jìn)行重寫嗜诀。繼承增加了代碼的可重用性。
③多態(tài)：是指由繼承而產(chǎn)生的相關(guān)的不同的類孔祸，多個子類中雖然都具有同一個方法隆敢，但是這些子類實例化的對象調(diào)用這些相同的方法后卻可以獲得完全不同的結(jié)果。多態(tài)性增強(qiáng)了軟件的靈活性崔慧。

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

用new的方法創(chuàng)建拂蝎，這一過程分為三步：
①創(chuàng)建類的實例。這步是把一個空的對象的 proto 屬性設(shè)置為 F.prototype 尊浪。
②初始化實例匣屡。函數(shù) F 被傳入?yún)?shù)并調(diào)用，關(guān)鍵字 this 被設(shè)定為該實例拇涤。
③返回實例。
舉例說明

function People(name,age){
        this.name=name;
        this.age=age;
        this.say=function(){
            console.log(this.name + '說：我' + this.age + '歲了');
        }
        console.log('name:hunger');
}
var p1=new People('hunger',100);
var p2=new People('valley',2);

Paste_Image.png

3.prototype 是什么？有什么特性惩坑？

prototype是每個函數(shù)都帶有的屬性掉盅。它指向的是一個對象，叫原型對象以舒。原型對象可視為公共區(qū)域趾痘，默認(rèn)含有constructor（就是是Person函數(shù)自己），proto這兩個屬性蔓钟。
每個對象都有個內(nèi)部屬性 proto,這個屬性指向prototype屬性永票。
構(gòu)造函數(shù)創(chuàng)建出來的對象實例也是對象，其proto指向構(gòu)造函數(shù)的prototype.
特性：構(gòu)造函數(shù)的實例的proto屬性都指向該原型對象。
也可以說成將函數(shù)用作構(gòu)造函數(shù)創(chuàng)建新實例的時候侣集，這個新的對象會從原型對象上繼承屬性和方法键俱。
舉例說明：

function People(name,age){
        this.name=name;
        this.age=age;
        this.say=function(){
            console.log(this.name + '說：我' + this.age + '歲了');
        }
}
People.prototype={friend:'jirengu'};
var p1=new People('hunger',100);
var p2=new People('valley',2);

Paste_Image.png

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

Paste_Image.png

5.以下代碼中的變量age有什么區(qū)別

function People (){
  var age = 1   //私有變量，函數(shù)體外無法訪問這個變量
  this.age = 10;  //實例變量世分，People類的實例可以訪問
}
People.age = 20;  //靜態(tài)變量，通過對象本身可以訪問得到，但是該類的實例無法訪問

People.prototype.age = 30;  //設(shè)置People對象原型的屬性庵楷，實例可以訪問
var p1=new People();

Paste_Image.png

代碼

1.創(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.run=function(){
    console.log('this car is running')
}
Car.prototype.stop=function(){
    console.log('this car is stopping');
}
Car.prototype.getStatus=function(){
    console.log('this car is ' + this.status);
}

var Car1=new Car('Toyota','black','run');

Paste_Image.png

2.創(chuàng)建一個 GoTop 對象魁莉，當(dāng) new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素，點(diǎn)擊頁面滾動到頂部募胃。擁有以下屬性和方法

ct屬性旗唁，GoTop 對應(yīng)的 DOM 元素的容器
target屬性， GoTop 對應(yīng)的 DOM 元素
bindEvent 方法痹束， 用于綁定事件
createNode 方法检疫， 用于在容器內(nèi)創(chuàng)建節(jié)點(diǎn)
在線預(yù)覽

3.使用構(gòu)造函數(shù)創(chuàng)建對象的方式完成輪播功能( 查看demo2)，使用如下調(diào)用方式

function Carousel($node){
//todo...
}
Carousel.prototype = {
//todo ..
};

var $node1 = $('.ct').eq(0);
var $node2 = $('.ct').eq(1);
var carousel1 = new Carousel($node1);
var carousel2 = new Carousel($node2);

在線預(yù)覽

4.使用構(gòu)造函數(shù)創(chuàng)建對象的方式實現(xiàn) Tab 切換功能

在線預(yù)覽