對(duì)象_原型_木桶布局

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

  • OOP指的是面向?qū)ο缶幊?/p>

  • 三大特性:封裝蛤奢、繼承、多態(tài)
    1.封裝
    封裝指的是將方法和屬性保存起來(lái)饵骨,防止外界直接調(diào)用的一種手段;若要訪問(wèn)屬性和方法茫打,必須先聲明一個(gè)類的實(shí)例居触,通過(guò)這個(gè)實(shí)例的接口去訪問(wèn)屬性和調(diào)用方法
    2.繼承
    A對(duì)象有一些屬性和方法,B對(duì)象有一些屬性和方法老赤;若A對(duì)象繼承自B對(duì)象轮洋,A對(duì)象可以訪問(wèn)B對(duì)象的屬性和方法
    3.多態(tài)
    當(dāng)兩個(gè)對(duì)象繼承自同一個(gè)類時(shí),每個(gè)對(duì)象對(duì)父類的某一方法或者屬性重寫(xiě)后的不同表現(xiàn)形式就是多態(tài)抬旺;
    例子:雞類和狗類都繼承自動(dòng)物類弊予;動(dòng)物類有say()方法,雞類和狗類繼承后分別重寫(xiě)為function say(){console.log('雞叫')}和function say(){console.log('狗叫')}

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

        //構(gòu)造函數(shù)第一個(gè)字母大寫(xiě)
       var Human = function () { this.name = 'human' }
        Human.prototype.eat = function () { console.log('吃飯') }
        var man = new Human;
        console.dir(man)
image.png

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

  • 每一個(gè)函數(shù)在創(chuàng)建之后都會(huì)擁有 prototype 的屬性汉柒,這個(gè)屬性指向函數(shù)的原型對(duì)象
    原型對(duì)象可視為公共區(qū)域,默認(rèn)含有 constructor责鳍、 proto 這兩個(gè)屬性
    使用原型對(duì)象的好處是可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法碾褂,通常我們可以將實(shí)例對(duì)象的公共屬性和方法放在 prototype 對(duì)象中

  • 特性:
    用來(lái)實(shí)現(xiàn)基于原型的繼承與屬性的共享
    所有對(duì)象都有 proto,指向其構(gòu)造函數(shù)的prototype
    obj.proto === Object.prototype //true
    構(gòu)成原型鏈历葛,同樣用于實(shí)現(xiàn)基于原型的繼承正塌,例:訪問(wèn)一個(gè)對(duì)象的屬性時(shí),如果在obj中找不到,那么就會(huì)沿著proto依次查找乓诽,直到找到這個(gè)屬性或null

4.畫(huà)出如下代碼的原型圖

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)建一個(gè) Car 對(duì)象帜羊,擁有屬性name、color鸠天、status讼育;擁有方法run,stop粮宛,getStatus

//創(chuàng)建一個(gè) Car 對(duì)象窥淆,擁有屬性name、color巍杈、status忧饭;擁有方法run,stop筷畦,getStatus
var Car = function (name, color, status) {
    this.name = name
    this.color = color
    this.status = status

}
Car.prototype.run = function () {
    console.log('----->run')
}
Car.prototype.stop = function () {
    console.log('----->stop')
}

Car.prototype.getStatus = function () {
    console.log('----->getStatus:'+this.status)
}

var car = new Car('哈哈','pink',true);
car.run();//----->run
car.stop();
car.getStatus(); 

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)

預(yù)覽

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

預(yù)覽
代碼

8.拓展閱讀

JS 的 new 到底是干什么的?
JS 原型鏈

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末拇惋,一起剝皮案震驚了整個(gè)濱河市周偎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌撑帖,老刑警劉巖蓉坎,帶你破解...
    沈念sama閱讀 218,122評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異胡嘿,居然都是意外死亡蛉艾,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)衷敌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)勿侯,“玉大人,你說(shuō)我怎么就攤上這事逢享」藜啵” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,491評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵瞒爬,是天一觀的道長(zhǎng)弓柱。 經(jīng)常有香客問(wèn)我沟堡,道長(zhǎng),這世上最難降的妖魔是什么矢空? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,636評(píng)論 1 293
  • 正文 為了忘掉前任航罗,我火速辦了婚禮,結(jié)果婚禮上屁药,老公的妹妹穿的比我還像新娘粥血。我一直安慰自己,他們只是感情好酿箭,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布复亏。 她就那樣靜靜地躺著,像睡著了一般缭嫡。 火紅的嫁衣襯著肌膚如雪缔御。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,541評(píng)論 1 305
  • 那天妇蛀,我揣著相機(jī)與錄音耕突,去河邊找鬼。 笑死评架,一個(gè)胖子當(dāng)著我的面吹牛眷茁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播纵诞,決...
    沈念sama閱讀 40,292評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼上祈,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了浙芙?” 一聲冷哼從身側(cè)響起雇逞,我...
    開(kāi)封第一講書(shū)人閱讀 39,211評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎茁裙,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體节仿,經(jīng)...
    沈念sama閱讀 45,655評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡晤锥,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了廊宪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片矾瘾。...
    茶點(diǎn)故事閱讀 39,965評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖箭启,靈堂內(nèi)的尸體忽然破棺而出壕翩,到底是詐尸還是另有隱情,我是刑警寧澤傅寡,帶...
    沈念sama閱讀 35,684評(píng)論 5 347
  • 正文 年R本政府宣布放妈,位于F島的核電站北救,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏芜抒。R本人自食惡果不足惜珍策,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望宅倒。 院中可真熱鬧攘宙,春花似錦、人聲如沸拐迁。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,894評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)线召。三九已至铺韧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間灶搜,已是汗流浹背祟蚀。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,012評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留割卖,地道東北人前酿。 一個(gè)月前我還...
    沈念sama閱讀 48,126評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像鹏溯,于是被迫代替她去往敵國(guó)和親罢维。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容