這節(jié)課好多內(nèi)容沒搞懂:狄住!腿堤!需要再看看
預(yù)習(xí): 沒有復(fù)習(xí)7Щ怠!笆檀!
請(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的值是多少网沾?
js的或操作符(a||b)和且操作符(c&&d)的值基本上不可能是true/false
五個(gè)falsy值:'',0,NaN,null,undefined
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)代碼)
理解命名空間
// 全局命名空間
var MYAPP = MYAPP || {};
// 子命名空間
MYAPP.event = {};
講義
箭頭函數(shù)內(nèi)外的this是同一個(gè)醋旦??会放?
-
封裝view
封裝View.png
-
封裝model
model_原.png
封裝Model.png
image.png
save方法也需要改浑度,怎么改?鸦概??
用到了閉包
你辦事甩骏,我放心
model辦事窗市,我放心
- 封裝Controller(沒看懂)給對(duì)象一個(gè)類
封裝 Model View Controller
完整代碼:https://github.com/FrankFang/resume-15-8
- controller === object
- 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 - initB.call(this)
initB 里面的 this === call 后面的this
call 后面 this === 第二條里的 this
第二條里面的 this === object
=> initB 里面的 this 就是 object
復(fù)習(xí) this
問題??
google mdn onclick
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
答案:D object
答案:object
new 的作用
https://zhuanlan.zhihu.com/p/23987456
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í)題: