task40 来，面向对象编程吧！

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

---

预习： 没有复习！！！

---

1. 程序员也不知道什么是面向对象
2. MDN 给了我们一堆术语

请尝试理解面向对象，并背诵 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
image.png

• 封装view

  
  封装View.png

获取view_原.png
获取view_现.png

• 封装model

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

使用model.png
image.png
image.png

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

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

image.png

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

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

复习 this

问题⬇️

image.png
image.png
image.png

google mdn onclick

image.png 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

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, 不可见的函数体: 'return x+y'
fn.proto === Function.prototype

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

课后习题：

同学的