2017-04-05 面向对象 学习笔记

工厂模式补充

• 核心思路
• 提供父构造函数
• 设置构造函数的原型对象
• 提供工厂方法
• 定制合作伙伴（设置子构造函数）
• 使用工厂函数创建对象

function MakePerson(){};
MakePerson.prototype.desLog = function(){
        console.log(this.des);
}
MakePerson.factory = function(type){
        if(type == undefined){
                throw "错误";
        }
        if(typeof MakePerson[type] !='function'){
                throw "错误";
        }
        //设置原型对象继承
        MakePerson[type].prototype = MakePerson.prototype;
        //创建对象
        var newPerson = new MakePerson[type]();
        return newPerson;
}
MakePerson.badMan = fucntion(){
        this.des = '我是坏人';
}
MakePerson.goodMan = function(){
        this.des = '我是好人';
}
MakePerson.ladyBoy = function(){
        this.des = '我是人妖';
}
var badMan = MakePerson.factory('badMan');
badMan.desLog();
var ladyBoy = MakePerson.factory('ladyBoy');
ladyBoy.desLog();

单例模式简单说明

• 单例模式

• 其他语言
  一个类在整个程序运行过程中只有一个实例对象

• js 语言：js 本身并没有类的概念，动态，脚本，弱类型，基于原型对象，面向对象。
  构造函数创建出来的对象永远都是同一个对象

• js 中的对象

• 字面量的方式{}

• 内置构造函数 + 工厂函数

• 自定义构造函数

• 使用场景

• 某一个实例对象在程序中多次使用，每次在使用的时候不需要都重新创建，只需要创建一个，以后再用的时候直接复用之前的对象就可以

单例模式的实现

• 全局变量
• 提供一个全局的变量
• 在构造函数内部先检查全局变量是否有值
• 如果有值，说明之前已经创建并赋值了，如果没有值，那么说明是第一次调用
• 如果是第一次调用那么就把新创建的对象赋值给变量，第二次调用的时候变量就有值了
• 缺点
  全局变量在整个作用域中都可以访问和修改，因此不安全

function Dog(){
        return 10;
}
var d1 = new Dog();
var d2 = new Dog();

var instance;
function Person(){
        if(instance){
                console.log('对象已经存在，直接返回');
                return instance;
        }
        //创建空对象并且赋值给 this
        instance = this;
        this.name = '张三';
        console.log('第一次调用');
}
var p1 = new Person();
var p2 = new Person();
var p3 = new Person();
var p4 = new Person();
console.log(p1 == p4);
//instance = {age:20}:
var p5 = new Person();
console.log(p5,p1);
//instance = 'demo';
console.log(p5);   //新创建的对象()

单例模式的实现方式2（静态属性）

function Person(){
        if(Person.instance){
                console.log('对象已经存在，直接返回');
                return Person.instance;
         }
         this.name = '张三';
        Person.instance = this;
        console.log('对象是第一次创建');
}
var p1 = new Person();
var p2 = new Person();
console.log(p1 ==  p2);
var p3 = new Person();
var instance = 'demo';
var p4 = new Person();
console.log(p1 == p4);
Person.instance = {};
var p5 = new Person{};
console.log(p1 == p5);

单例模式的实现方式3（闭包-惰性函数）

• 闭包 + 惰性函数定义
• 问题：
  对象的构造器属性指向的是旧的构造函数
  在创建对象后设置的原型对象成员无法访问

function Person(){
        //提供私有变量
        var instance;
        //设置属性并把对象赋值给私有变量
        this.name = '张三';
        instance = this;
        console.log('第一次调用');
        //重新构造函数
        Person = function(){
                console.log('直接返回');
                return instance;
        }
}
Person.prototype.old = '老的';
var p1 = new Person();
var p2 = new Person();
Person.prototype.new = '新的';
console.log(p1.constructor == p2.constructor);  //相等
console.log(p1.constructor == Person);
console.log(p1.constructor);
console.log(Person);
console.log(p1.old);
console.log(p1.new);

单例模式的实现方式4（闭包-惰性函数定义）

• 核心过程
• 提供构造函数
• 提供私有变量
• 重写构造函数，在构造函数内部直接返回私有变量
• 设置构造函数的原型对象
• 创建 new 构造函数对象，赋值给私有变量
• 设置构造器属性
• 设置私有变量指向对象的成员
• 把私有变量返回

function Person(){
        var instance;
        Person = function(){
                return instance;
        }
console.log(name);
//设置构造函数的原型对象
//__proto__ 在正式的代码中不推荐使用
//Person.prototype = this.__proto__;
Person.prototype = Object.getPrototype(this);
//Person.prototype = this;    this 实例对象
//创建 new 构造函数对象，赋值给私有变量
instance = new Person();
//设置构造器属性
//instance.constructor = Person;    添加属性
Person.prototype.constructor = Person;
//设置私有变量指向对象的成员
instance.name = "张安";
//把私有变量返回
return instance;
}
Person.prototype.hi = 'hi';
var p1 = new Person();
var p2 = new Person();
Person.prototype.hello = 'hello';
console.log(p1 == p2);
console.log(p1.constructor == Person);
console.log(p1.hi);
console.log(p1.hello);

单例模式的实现方式5（全局变量-即时函数）

var Person;
(function(){
        var instance;
        Person = function(){
                if(instance){
                        return instance;
                }
                instance = this;
                this.name = '张三';
        }
})()

var p1 = new Person();
var p2 = new Person();

//console.log(instance);
console.log(p1 == p2);

观察者模式简单介绍

观察者模式
售楼部 王
客户1（手机）
客户2（手机）
张三 - 莉莉（我饿了）；
状态发布者（被观察者）
状态订阅者（观察者）
注册订阅者

var lili = {
        user: [];
        addUser:funciton(fn){
                this.user.push(fn)
        },
        eat:function(){
                console.log('我饿了');
                for(var i = 0;i < this.user.length;i++){
                        this.user[i]();
                }
        }
};
var zhangsan = {
        eat_lili:function(){
                console.log('我陪你一起去吃饭把');
        }
};
var lisi = {
        eat_lili:funciton(){
                console.log('我已经把饭做好了，等会来我家——李四');
        }      
};
lili.addUser(zhangsan.eat_lili);
lili.eat();
lili.addUser(lisi.eat_lili);
lili.eat();

观察者模式实现1（基础版本）

var rose = {
        use:[],
        addUser:funciton(fn){
                this.user.push(fn);
        },
        removeUser:fucntion(fn){
                for(var i = 0; i < this.user.length;i++){
                        if(this.user[i] == fn){
                                console.log('用户取消');
                                this.user.spllice(i,1);
                                break;
                        }
                }
        },
        sleep.funciton(){
                console.log('我困了___rose');
                for(var i = 0; i < this.user.length; i ++){
                        this.user[i]();
                }
        }
};
var lucy = {
        user:[],
        addUser:function(fn){
                for(var i = 0;i < this.user.length;i++){
                        if(this.user[i] == fn){
                                console.log('用户取消了订阅');
                                this.user.splice(i,1);
                                break;
                        }
                }
        },
        sleep:function(){
                console.log('我困了__lucy');
                for(var i = 0;i < this.user.length:i++){
                        this.user[i]();
                }
        }
}
var jack = {
        sleep_rose:function(){
                console.log('天黑说晚安__jack');
        }
}
var tom = {
        sleep_rose:function(){
                console.log('白天不懂夜的黑__tom');
        },
        sleep_lucy:function(){
                console.log('白夜行__tom');
        }
}
rose.addUser(jack.sleep_rose);
rose.addUser(tom.sleep_rose);
lucy.addUser(tom.sleep_lucy);
lucy.sleep();
rose.sleep();

观察者模式2（多个发布者）

角色：
rose:发布者
Jack:订阅者
状态：
我困了
响应：
说一句晚安
1发布者2订阅者
思考：2发布者（rose + lucy）2订阅者
rose - jack
rose - tom
lucy - tom
多个发布者
把发布者的共同部分提取出来作为一个模版（对象）
如果有某个对象想要称为发布者，那么直接拷贝模版对象即可（封装函数）
思考：2发布者（rose + lucy）2订阅者 多个状态
我困了(rose - jack)
我饿了（rose - tom）

var publisher = {
        addUser:function(fn){
                this.user.push(fn);
        },
        removeUser:function(fn){
                for(var i = 0;i < this.user.length;i++){
                        if(this.user[i] == fn){
                              console.log('用户取消了');
                              this.user.splice(i,1);
                              break;
                        }
                }
        },
        sleep:funciton(){
                console.log('我困了');
                for(var i = 0;i < this.user.length;i++){
                        this.user[i]();
                }
        }
}
funciton MakePublisher(o){
        for(var i inpublisher){
                if(publisher.hasOwnProperty(i) && typeof publisher[i] == 'function'){
                        o[i] = publisher[i];
                }
        }
        o.user = [];
}
var rose = {};
var lucy = {};
MakePublisher(rose);
MakePublisher(lucy);
var jack = {
        sleep_rose:funciton(){
                console.log('天黑说晚安__jack');
        }
};
var tom = {
        sleep_rose:function(){
                console.log('白天不懂夜的黑__tom');
        },
        sleep_lucy:function(){
                console.log('白夜行__tom');
        }
};
rose.addUser(jack.sleep_rose);
rose.sleep();
lucy.addUser(tom.sleep_lucy);
lucy.sleep();

观察者模式实现3（多个状态）

var publisher = {
        addUser:function(fn,type){
                this.user[type].push(fn);
        },
        removeUser:function(fn,type){
                for(var i = 0; i < this.user.length;i++){
                          if(this.user[type][i] == fn){
                                  console.log('用户取消了订阅');
                                  this.user[type].splice(i,1);
                                  break;
                          }
                 }
        }
};
function MakePublisher(o){
        for(var i in publisher){
                if(publisher.hasOwnProperty(i)&&typeof publisher[i] == 'function'){
                                                o[i] = publisher[i];
                }
        }
        o.user = {
                eat:[],
                sleep:[],
                read:[]
        };
}
var rose = {
        sleep:function(){
                for(var i = 0 ;i < this.user['sleep'].length;i++){
                        this.user['sleep'][i]();
                }
        },
        eat:function(){
                console.log('我困了__');
                for(var i = 0 ; i< this.user['eat'].length;i++){
                        this.user['eat'][i]();
                }
        }
};
MakePublisher(rose);
var jack = {
        sleep_rose:funciton(){
                console.log('天黑说晚安__');
        }
};
var tom = {
        eat_rose:function(){
                console.log('我们一起去吃大餐吧___tom');
        },
        read_lucy:function(){
                console.log('我在图书馆门口等你__tom');
        }
};
rose.addUser(jack.sleep_rose,'sleep');
rose.addUser(tom.eat_rose,'eat');
rose.sleep();
rose.eat();
var lucy = {
        read:funciton(){
                console.log('我想看书');
                for(var i = 0 ; i < this.user['read'].length:i++){
                        this.user['read'][i]();
                }
        }
};
MakePublisher(lucy);
lucy.addUser(tom.read_lucy,'read');
lucy.read();

观察者模式实现4（通用处理）

var publisher = {
        addUser:function(fn,type){
                if(this.user[type] == undefined){
                        this.user[type] = [];
                }
                this.user[type].push(fn);
        },
        removeUser:function(fn,type){
                this.publish(type,fn);
        },
        publish:function(type,fn){
                for(var i = 0 ;i < this.user[type].length;i++){
                        if(typeof fn == 'function'){
                                if(this.user[type][i] == fn){
                                        console.log('用户取消了订阅');  
                                        this.user[type].splice(i,1);
                                        break;
                                }
                        }else{
                                this.type[type][i]();
                        }
                }
        }
}
function MakePublisher(o){
        for(var i in publisher){
                if(publisher.hasOwnProperty(i)&&typeof publisher[i] =='function'){
                        o[i] = publisher[i];
                }
        }
        o.user = {};
}
var rose = {
        sleep:function(){
                console.log('我困了');
                this.publish('sleep');
        },
        eat:function(){
                console.log('我饿了');
                this.publish('我饿了');
        }
};
var jack  = {
        sleep_rose:function(){
                console.log('天黑说晚安__jack');
        }
}
  var tom  = {
        eat_rose:function () {
            console.log("我们一起去吃大餐吧___tom");
        },
        read_lucy:function () {
            console.log("我在图书馆门口等你___tom");
        },
        run_lucy:function () {
            console.log("我在操场等你___tom");
        },
    }
    rose.addUser(jack.sleep_rose,"sleep");
    rose.addUser(tom.eat_rose,"eat");
    rose.sleep();
    rose.eat();

    var lucy = {
        read:function () {
            console.log("我想看书");
            this.publish("read");
        },
        run:function () {
            console.log("我想跑步");
            this.publish("run");
        },
    };
    MakePublisher(lucy);
    lucy.addUser(tom.read_lucy,"read");
    lucy.read();
    lucy.addUser(tom.run_lucy,"run");
    lucy.run();
    lucy.removeUser(tom.run_lucy,"run");
    lucy.run();

观察者模式5（让订阅者称为发布者）

 var publisher = {
        addUser:function (fn,type) {
            if (this.user[type] == undefined) {
                this.user[type] = [];
            }
            this.user[type].push(fn);
        },
        removeUser:function (fn,type) {
           this.publish(type,fn);
        },
        publish:function (type,fn) {
            for (var i = 0; i < this.user[type].length; i++) {
                if (typeof fn == "function")
                {
                    if (this.user[type][i] == fn)
                    {
                        console.log("用户取消了订阅");
                        this.user[type].splice(i,1);
                        break;
                    }
                }else
                {
                    this.user[type][i]();
                }

            }
        }
    }
    function MakePublisher(o) {
        for (var i in publisher) {
            if (publisher.hasOwnProperty(i) && typeof publisher[i] == "function")
            {
                o[i] = publisher[i];
            }
        }
        o.user = {};
    }

    var rose = {
        run:function () {
            console.log("我要去跑步啦,有一起的吗?");
            this.publish("run");
        },
        read_jack:function () {
            console.log("我陪你一起吧");
        }
    };
    MakePublisher(rose);

    var jack = {
        run_rose:function () {
            console.log("我在操场等你");
        },
        read:function () {
            console.log("我要看书啦");
            this.publish("read");
        }
    }
    rose.addUser(jack.run_rose,"run");
    rose.run();

    MakePublisher(jack);
    jack.addUser(rose.read_jack,"read");
    jack.read();

备忘模式（函数结构缓存）

• 如果一个函数内部实现复杂，执行需要花费很长时间，且可能会调用多次，且参数可能一样，我们考虑对结果进行缓存处理，不必每次调用的时候都执行一遍函数
• 在函数内部：
• 先检查想要的结果是否存在，如果存在那么就直接返回
• 如果不存在，那么就执行一遍函数得到结果并保存到缓存中

<script>
    var cache = {};
    function demo(param) {
        if (cache[param])
        {
            console.log("直接使用缓存数据");
            return cache[param];
        }
        //会花很长的时间处理任务,得到一个结果
        var str = param + "我是一个很复杂的任务";
        cache[param] = str;
        console.log("执行函数,计算得到结果,并且保存一份到缓存中");
        return str;
    }

    demo("hello");
    demo("hello");
    demo("hello");

</script>

<script>
    function demo(param) {
        if (demo.cache[param])
        {
            console.log("直接使用缓存数据");
            return demo.cache[param];
        }
        //会花很长的时间处理任务,得到一个结果
        var str = param + "我是一个很复杂的任务";
        demo.cache[param] = str;
        console.log("执行函数,计算得到结果,并且保存一份到缓存中");
        return str;
    }

    //初始化
    demo.cache = {};
    demo("hello");
    demo("hello");
    demo("hello");

</script>

命名空间模式

• 把所有的东西都写在一个对象里面
• 命名空间
• 其他语言都支持命名空间。
• js 本身并没有命名空间的概念
• 提供一个命名空间（对象），对象的命名格式为全部大写，推荐使用项目的名称来命名
• 优点
• 全局只有一个变量，方便管理
• 保护数据，访问数据必须使用对象.熟悉的方式来访问
• 缺点
• 前缀很长 QQ.p1.dog.name
• 通过前缀可以操作所有的数据，因此也存在被覆盖的问题
• 建议：
  在每次赋值之前都需要检查，检查该对象|属性是否存在

通用的命名空间函数

  var QQ = QQ || {};
    QQ.namespace = function (str) {
        //01 切割字符串
        var arr = str.split(".");

        //先删除第一个元素
        arr.splice(0,1);
        //设置父节点
        var superNode = QQ;
        console.log(arr);
        //02 遍历数组
        for (var i = 0; i < arr.length; i++) {
            if (superNode[arr[i]] == undefined)
            {
                superNode[arr[i]] = {}
            }

            //每循环一次,都需要更新父节点
            superNode = superNode[arr[i]];
        }
    }

    QQ.person = {
        name:"张三"
    }
    QQ.namespace("QQ.person.car.des.a.b.c.d");
    QQ.namespace("QQ.person.car.a.b.c.d.e.f.g.e.e.s.sa.a");
    console.log(QQ);

eval 的简单说明

• eval 的作用：
  和Function 类型，但是它并不是用来创建函数的，直接将字符串转换称 js 代码执行，缺点性能不好，破坏词法作用域

• Function 用来创建函数对象

• 使用注意：
  在解析 json 数据的时候注意点

• json 和对象的区别：

• json 是一种数据格式，有格式的字符串

• 标准的 json 的 key 全部都加上双引号

• json 中不能有函数

• 解析 json

• json 字符串 -》 js 对象

• js 对象 -》 json 字符串

<script>
    var func = new Function("console.log(\"我是传奇\")");
    func();

    eval("var obj = {}");
    console.log(obj);

    var json = "{\"name\":\"张三\"}";
//    var o = JSON.parse(json);
    console.log(json);
//    console.log(o);
//    var o = eval(json);  //不正确

    //001 解决方式1
    eval("var o =" + json);
    console.log(o);
    //002 解决方式2
    var o1 = eval("(" + json + ")");
    console.log(o1);

    //o1 -- >json
    console.log(JSON.stringify(o1));;
</script>

<script>
    var a = 10;
    function demo() {
        eval("var a = 20");
        console.log(a);
    }
    demo();

</script>