面向对象

面向：以…..为主
面向对象(Object-Oriented)是一个经验的知识
命名空间(name space)
或（a||b）且（&&d）值基本上不可能是true/false，是truy或falsy的值，
如果是&&，结果是看第一个falsy值，falsy值后面的就不看了
如果是||，结果是看第一个truy值，truy值后面的就不看了
var a=1//危险代码

var  app=app||{} //兜底写法
if(app){
    app=app //废话，没什么作用
}else{
    app={}
}

如果app存在就运行app，如果app不存在就app={}

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

封装 Model View Controller

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

this是什么，call的第一个参数，看call谁调用的

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 的开发者写了文档
看文档呀

function X(){
    return object = {
        name: 'object',
        options: null,
        f1(x){
            this.options = x
            this.f2()
        },
        f2(){
            this.options.f2.call(this)
        }
    }
}

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

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

new 的作用

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

human 这个对象本身具有属性 name 和 city
human.proto 对应的对象（也就是原型）具有物种（species）、走（walk）和使用工具（useTools）这几个属性

function Human(options){
    this.name = options.name
    this.city = options.city

} // 构造函数结束

Human.prototype.species = 'Human' 
Human.prototype.walk = function(){}
Human.prototype.useTools = function(){}

var human = new Human({name:'Frank', city: 'Hangzhou'})
var human2 = new Human({name:'Jack', city: 'Hangzhou'})

human.proto.constructor === Human 为 true

封装 Model View Controller

this

new 的作用

Comments