對象&原型

1. OOP 指什么?有哪些特性

OOP指的就是面向?qū)ο蟪绦蛟O計(英語:Object-oriented programming,縮寫:OOP)是種具有對象概念的程序編程范型,同時也是一種程序開發(fā)的抽象方針。它可能包含數(shù)據(jù)、屬性、代碼與方法。對象則指的是類的實例。它將對象作為程序的基本單元,將程序和數(shù)據(jù)封裝其中,以提高軟件的重用性、靈活性和擴展性,對象里的程序可以訪問及經(jīng)常修改對象相關(guān)連的數(shù)據(jù)。

特性:

封裝性:
1.隱藏了某一方法的具體運行步驟
2.利用接口實現(xiàn)消息的傳入傳出
例子:

 /* 一個面向過程的程序會這樣寫: */
定義 萊絲
萊絲.設置音調(diào)(5)
萊絲.吸氣()
萊絲.吐氣()
/* 而當狗的吠叫被封裝到類中,任何人都可以簡單地使用: */
定義 萊絲 是 狗
萊絲.吠叫()

繼承性:
1.描述聯(lián)結(jié)類的層次模型;
2.通過抽象,表達共性,實現(xiàn)類的重用;
3.通過子類增加方法和屬性以及重寫方法,表達差異性;
例子:
假設“狗”這個類有一個方法(行為)叫做“吠叫()”和一個屬性叫做“毛皮顏色”。它的子類(前例中的牧羊犬和吉娃娃犬)會繼承這些成員。這意味著程序員只需要將相同的代碼寫一次。
在偽代碼中我們可以這樣寫:

類 牧羊犬:繼承狗
定義 萊絲 是 牧羊犬
萊絲.吠叫()    /* 注意這里調(diào)用的是狗這個類的吠叫方法。*/

回到前面的例子,“牧羊犬”這個類可以繼承“毛皮顏色”這個屬性,并指定其為棕白色。而“吉娃娃犬”則可以繼承“吠叫()”這個方法,并指定它的音調(diào)高于平常。子類也可以加入新的成員,例如,“吉娃娃犬”這個類可以加入一個方法叫做“顫抖()”。設若用“牧羊犬”這個類定義了一個實例“萊絲”,那么萊絲就不會顫抖,因為這個方法是屬于吉娃娃犬的,而非牧羊犬。事實上,我們可以把繼承理解為“是”或“屬于”。萊絲“是”牧羊犬,牧羊犬“屬于”狗類。因此,萊絲既得到了牧羊犬的屬性,又繼承了狗的屬性。

我們來看偽代碼:

類 吉娃娃犬:繼承狗
開始
   公有成員:
      顫抖()
結(jié)束
類 牧羊犬:繼承狗
定義 萊絲 是 牧羊犬
萊絲.顫抖()    /* 錯誤:顫抖是吉娃娃犬的成員方法。 */

多態(tài)性:
1.屏蔽子類的差異性,針對共性/接口編程;(向上轉(zhuǎn)型)
2.增強可擴展性;
例子:
例如,狗和雞都有“叫()”這一方法,但是調(diào)用狗的“叫()”,狗會吠叫;調(diào)用雞的“叫()”,雞則會啼叫。 我們將它體現(xiàn)在偽代碼上:

類 狗
開始
   公有成員:
       叫()
       開始
          吠叫()
       結(jié)束
結(jié)束
類 雞
開始
   公有成員:
       叫()
       開始
          啼叫()
       結(jié)束
結(jié)束
定義 萊絲 是 狗
定義 魯斯特 是 雞
萊絲.叫()
魯斯特.叫()

這樣,雖然同樣是做出叫這一種行為,但萊絲和魯斯特具體做出的表現(xiàn)方式將大不相同

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

function People(name){
  this.name = name;
  this.sayName = function(){
    console.log(this.name);
  }
}
var p1 = new People('James');
p1.sayName();//James
/*
執(zhí)行 var p1 = new People('James')的時候發(fā)生了什么?
p1 = {}
p1.name  = 'James'
p1.sayName = function(){
  console.log(p1.name)
}
return p1
最后得到的p1 就是這樣一個對象
p1={
  name = 'James',
  sayName = function(){
    console.log(p1.name);
  }
}
*/


3. prototype 是什么?有什么特性

prototype就是指通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個對象實例的原型對象。
它的主要特征是它里面包含所有實例共享的屬性和方法,可以讓所有對象實例共享它所包含的屬性和方法。換句話說,不必在構(gòu)造函數(shù)中定義對象實例的信息,而是可以將這些信息直接添加到原型對象中
例子:

function Person(){
}

Person.prototype.name = 'Mark';
Person.prototype.age = '11';
Person.prototype.job = 'Student';
Person.prototype.sayName = function(){
    console.log(this.name);
}

var person1 = new Person();
person1.sayName();//'Mark'

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

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={
  run:function(){},
  stop:function(){},
  getStatus:function(){}
}

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

gotop

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

照片墻

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容