task40 来，面向对象编程吧！

2019-06-04 本文已影响0人 vivienYang2019

这节课好多内容没搞懂！！！需要再看看

预习：没有复习！！！

请尝试理解面向对象，并背诵 MDN 里的以下内容

Class 类
定义对象的特征。它是对象的属性和方法的模板定义.
Object 对象
类的一个实例。
Property 属性
对象的特征，比如颜色。
Method 方法
对象的能力，比如行走。
Constructor 构造函数
对象初始化的瞬间, 被调用的方法. 通常它的名字与包含它的类一致.
Inheritance 继承
一个类可以继承另一个类的特征。
Encapsulation 封装
一种把数据和相关的方法绑定在一起使用的方法.
Abstraction 抽象
结合复杂的继承，方法，属性的对象能够模拟现实的模型。
Polymorphism 多态
多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。

问题：1||2的值是多少？

image.png

js的或操作符（a||b）和且操作符（c&&d）的值基本上不可能是true/false
五个falsy值：'',0,NaN,null,undefined

image.png
console.log(3)的值是undefined

用&&操作符的时候，找假值，返回找到的第一个假值
如果没有找到假值，就返回最后一个真值
1&&2&&3 //结果是3
用||操作符的时候，找真值，返回找到的第一个真值

image.png

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

var a = a || {}
//等价于
if(a){
  a=a
}else{
  a={}
}

用来防止覆盖之前a的值（危险代码）

image.png
理解命名空间

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

讲义

箭头函数内外的this是同一个？？？

image.png

封装view

封装View.png

获取view_原.png

获取view_现.png

封装model

model_原.png
封装Model.png
image.png

使用model.png

image.png

save方法也需要改，怎么改？？？
用到了闭包

你办事，我放心
model办事，我放心

image.png

封装Controller（没看懂）给对象一个类

image.png

controler的使用和定义.png

model的使用和定义.png

view的使用和定义.png

封装 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 当然 TM 是 controller
也就是这个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

复习 this

问题⬇️

image.png

google mdn onclick

image.png

button.onclick = function f1(){
    console.log(this) // 触发事件的元素。  button
}

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

button.addEventListener('click', function(){
    console.log(this) // 该元素的引用 button
}
2 结果

$('ul').on('click', 'li' /*selector*/, function(){
    console.log(this) //this 则代表了与 selector 相匹配的元素。
    // li 元素
})
3 结果
去看 on 的源码呀 -> 做不到
jQuery 的开发者知道 onclick 的源码，f1.call(???)
jQuery 的开发者写了文档
看文档呀

this是call()的第一个参数，看不到call()就不能确定this是什么，智能去看对应的文档说明，看看this指的是什么！！！

function X(){
    return object = {
        name: 'object',
        options: null,
        f1(x){
            this.options = x
            this.f2()  //调用的是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