task40 來秧骑,面向?qū)ο缶幊贪桑?/h1>

這節(jié)課好多內(nèi)容沒搞懂:狄住!腿堤!需要再看看


預(yù)習(xí): 沒有復(fù)習(xí)7Щ怠!笆檀!


  1. 程序員也不知道什么是面向?qū)ο?/a>
  2. MDN 給了我們一堆術(shù)語(yǔ)

請(qǐng)嘗試?yán)斫饷嫦驅(qū)ο蠹商茫⒈痴b MDN 里的以下內(nèi)容

Class 類
定義對(duì)象的特征。它是對(duì)象的屬性和方法的模板定義.
Object 對(duì)象
類的一個(gè)實(shí)例酗洒。
Property 屬性
對(duì)象的特征士修,比如顏色。
Method 方法
對(duì)象的能力樱衷,比如行走棋嘲。
Constructor 構(gòu)造函數(shù)
對(duì)象初始化的瞬間, 被調(diào)用的方法. 通常它的名字與包含它的類一致.
Inheritance 繼承
一個(gè)類可以繼承另一個(gè)類的特征。
Encapsulation 封裝
一種把數(shù)據(jù)和相關(guān)的方法綁定在一起使用的方法.
Abstraction 抽象
結(jié)合復(fù)雜的繼承矩桂,方法沸移,屬性的對(duì)象能夠模擬現(xiàn)實(shí)的模型。
Polymorphism 多態(tài)
多意為‘許多’,態(tài)意為‘形態(tài)’雹锣。不同類可以定義相同的方法或?qū)傩浴?/p>

問題:1||2的值是多少网沾?


image.png

js的或操作符(a||b)和且操作符(c&&d)的值基本上不可能是true/false
五個(gè)falsy值:'',0,NaN,null,undefined


image.png

console.log(3)的值是undefined
  • 用&&操作符的時(shí)候,找假值蕊爵,返回找到的第一個(gè)假值
    如果沒有找到假值辉哥,就返回最后一個(gè)真值
    1&&2&&3 //結(jié)果是3
  • 用||操作符的時(shí)候,找真值攒射,返回找到的第一個(gè)真值


    image.png

    理解 var a = a || {}什么意思

var a = a || {}
//等價(jià)于
if(a){
  a=a
}else{
  a={}
}

用來防止覆蓋之前a的值(危險(xiǎn)代碼)

image.png

理解命名空間

// 全局命名空間
var MYAPP = MYAPP || {};
// 子命名空間
MYAPP.event = {};

講義


箭頭函數(shù)內(nèi)外的this是同一個(gè)醋旦??会放?


image.png

image.png
  • 封裝view


    封裝View.png
獲取view_原.png

獲取view_現(xiàn).png
  • 封裝model


    model_原.png

    封裝Model.png

    image.png
使用model.png

image.png

image.png

save方法也需要改浑度,怎么改?鸦概??
用到了閉包

你辦事甩骏,我放心
model辦事窗市,我放心

image.png

image.png

image.png

image.png

controler的使用和定義.png

model的使用和定義.png

view的使用和定義.png

封裝 Model View Controller

完整代碼:https://github.com/FrankFang/resume-15-8

  1. controller === object
  2. controller.init(view, model)
    controller.init.call(controller, view, model)
    那么 controller.init 里面的 this 當(dāng)然 TM 是 controller
    也就是這個(gè)1里面的object
    controller.init 里面的 this 就是 object
    object.init 里面的 this 就是 object
  3. initB.call(this)
    initB 里面的 this === call 后面的this
    call 后面 this === 第二條里的 this
    第二條里面的 this === object
    => initB 里面的 this 就是 object

復(fù)習(xí) this

問題??


image.png

image.png

image.png

google mdn onclick


image.png
image.png
button.onclick = function f1(){
    console.log(this) // 觸發(fā)事件的元素。  button
}

button.onclick.call({name: 'frank'})

button.addEventListener('click', function(){
    console.log(this) // 該元素的引用 button
}
2 結(jié)果

$('ul').on('click', 'li' /*selector*/, function(){
    console.log(this) //this 則代表了與 selector 相匹配的元素饮笛。
    // li 元素
})
3 結(jié)果
去看 on 的源碼呀 -> 做不到
jQuery 的開發(fā)者知道 onclick 的源碼咨察,f1.call(???)
jQuery 的開發(fā)者寫了文檔
看文檔呀

this是call()的第一個(gè)參數(shù),看不到call()就不能確定this是什么福青,智能去看對(duì)應(yīng)的文檔說明摄狱,看看this指的是什么!N尬纭媒役!

function X(){
    return object = {
        name: 'object',
        options: null,
        f1(x){
            this.options = x
            this.f2()  //調(diào)用的是A還是B?
        },
        f2(){
            this.options.f2.call(this)  //A?this 是啥 ?
        }
    }
}

var options = {
    name: 'options',
    f1(){},
    f2(){
        console.log(this) //B?this 是啥 ?
    }
}

var x = X()
x.f1(options)

答案:B options


image.png

答案:D object


image.png

答案:object

new 的作用

https://zhuanlan.zhihu.com/p/23987456

image.png

image.png

image.png

var object = new Object()

自有屬性 空
object.proto === Object.prototype

var array = new Array('a','b','c')

自有屬性 0:'a' 1:'b' 2:'c',length:3
array.proto === Array.prototype
Array.prototype.proto === Object.prototype

var fn = new Function('x', 'y', 'return x+y')
自有屬性 length:2, 不可見的函數(shù)體: 'return x+y'
fn.proto === Function.prototype

Array is a function
Array = function(){...}
Array.proto === Function.prototype

課后習(xí)題:

同學(xué)的

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

  • 序言:七十年代末宪迟,一起剝皮案震驚了整個(gè)濱河市酣衷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌次泽,老刑警劉巖穿仪,帶你破解...
    沈念sama閱讀 218,036評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異意荤,居然都是意外死亡啊片,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門玖像,熙熙樓的掌柜王于貴愁眉苦臉地迎上來紫谷,“玉大人,你說我怎么就攤上這事〔昀铮” “怎么了沈矿?”我有些...
    開封第一講書人閱讀 164,411評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)咬腋。 經(jīng)常有香客問我羹膳,道長(zhǎng)周霉,這世上最難降的妖魔是什么届慈? 我笑而不...
    開封第一講書人閱讀 58,622評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮你稚,結(jié)果婚禮上寇壳,老公的妹妹穿的比我還像新娘醒颖。我一直安慰自己,他們只是感情好壳炎,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6 392
  • 文/花漫 我一把揭開白布泞歉。 她就那樣靜靜地躺著,像睡著了一般匿辩。 火紅的嫁衣襯著肌膚如雪腰耙。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,521評(píng)論 1 304
  • 那天铲球,我揣著相機(jī)與錄音挺庞,去河邊找鬼。 笑死稼病,一個(gè)胖子當(dāng)著我的面吹牛选侨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播然走,決...
    沈念sama閱讀 40,288評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼援制,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了芍瑞?” 一聲冷哼從身側(cè)響起隘谣,我...
    開封第一講書人閱讀 39,200評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎啄巧,沒想到半個(gè)月后寻歧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秩仆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3 336
  • 正文 我和宋清朗相戀三年码泛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片澄耍。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡噪珊,死狀恐怖晌缘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情痢站,我是刑警寧澤磷箕,帶...
    沈念sama閱讀 35,673評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站阵难,受9級(jí)特大地震影響岳枷,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜呜叫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3 329
  • 文/蒙蒙 一空繁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧朱庆,春花似錦盛泡、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至箱硕,卻和暖如春拴竹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背颅痊。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留局待,地道東北人斑响。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像钳榨,于是被迫代替她去往敵國(guó)和親舰罚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2 355

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