面向对象编程

面向对象编程

Object - Oriented

OOP

以对象为面向的编程

请背诵:

Class 类

定义对象的特征。它是对象的属性和方法的模板定义.

Object 对象

类的一个实例。

Property 属性

对象的特征，比如颜色。

Method 方法

对象的能力，比如行走。

Constructor 构造函数

对象初始化的瞬间, 被调用的方法. 通常它的名字与包含它的类一致.

Inheritance 继承

一个类可以继承另一个类的特征。

Encapsulation 封装

一种把数据和相关的方法绑定在一起使用的方法.

Abstraction 抽象

结合复杂的继承，方法，属性的对象能够模拟现实的模型。

Polymorphism 多态

多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。

命名空间:

var a = a || {};

对于
a || b
c && d

值基本不可能是true/fasle

&& 找第一个fasle值
例如

1 && 0 && 1

返回0

1 && 0 && console.log(2)
返回0,并且console.log不执行

|| 找第一个true值
例如

var a = b || {}
返回{}

类Class

造一个模板

View

封装view

window.View = function(selector){
    return document.querySelector(selector)
}

引用View

var view = View('#leaveMessages');

Model

封装Model

    window.Model = function(options){
        let resourceName = options.resourceName;
        return {
            init:function(){
                var APP_ID = '6lvWkua1rf93YuTrlvBN8GVR-gzGzoHsz';
                var APP_KEY = 'uPlBTdzbkh8JANXfgEN8j0Lv';
                AV.init({
                appId: APP_ID,
                appKey: APP_KEY})
            },
            fetch:function(){
                var query = new AV.Query(resourceName);
                return query.find();
            },
            save:function(username,content){
                var Messages = AV.Object.extend(resourceName);
                var messages = new Messages();
                return messages.save(object)
            }
        }
    }

调用Model

var model = Model({resourceName:'Messages'});
 model.init();
 model.fetch();
 model.save({'username': username,'content':content});

Controller

封装Controller

window.Controller = function(options){
    var init = options.init;
    let object = {
        view: null,
        model: null,
        init: function(view,model){
            this.view = view;
            this.model = model;
            this.model.init();
            init.call(this,view,model);
            options.bindEvents.call(this);
        },
    }
    for (let key in options){
        if(key !== 'init'){
            object[key] = options[key]
        }
    }
}

调用Controller

var controller = Controller({
        init: function(view,controller){
            this.messageList = view.querySelector('#messageList');
            this.form = view.querySelector('form');
            this.loadMessages();
        },
        loadMessages: function(){
            this.model.fetch().then(
                (messages) => {
                    let array = messages.map((item) => item.attributes);
                    array.forEach((item) => {
                        let li = document.createElement('li');
                        li.innerText = `${item.username} : ${item.content}`;
                        this.messageList.appendChild(li);
                    })
                }
            )
        },
        bindEvents: function(){
            this.form.addEventListener('submit',(e) => {
                e.preventDefault();
                this.saveMessage();
            })
        },
        saveMessage: function(){
            let myForm = this.form;
            let content = myForm.querySelector('input[name=content]').value;
            let username = myForm.querySelector('input[name=username]').value;
            if(content !== '' && username !== ''){
                this.model.save(username,content).then(function(object){
                    let li = document.createElement('li');
                    li.innerText = `${object.attributes.username} : ${object.attributes.content}`;
                    let messagesList = document.querySelector('#messageList');
                    messagesList.appendChild(li);
                    myForm.querySelector('input[name=content]').value = '';
                })
          }else  {
              alert('请输入用户名或者留言内容');
          }
        }
    }
);

如何寻找this?

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

function X(){
    return object = {
        name:'object',
        f1(x){
            x.f2();
        },
        f2(){
            console.log(this); //A
        }
    }
}

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

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

B options

why?

x=X(),那么X().f1(options)
X()return object,那么object.f1(options)
object里的f1那么就是f1(x){x.f2()}
x是options,那么就是f1(options){options.f2()};
f2是console.log(this),this是options,打印options

function X(){
    return object = {
        name:'object',
        f1(x){
            x.f2.call(this);
        },
        f2(){
            console.log(this); //C 
        }
    }
}

var options = {
    name:'options',
    f1(){},
    f2(){
        console.log(this);  //D
    }
}

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

D object

why?

x.f2.call(this) this === object
x.f2 === options.console.log(this)
this === object

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);

this === object;

why?

this = object;
object.options = x;//object.options = options;
this.f2() === object.f2() === object.options.f2.call(this);

new

var object = new Object();

自有属性 空

oject.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;

Array is a function!
Array.proto === function.prototype;

构造一个new

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