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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,874评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,102评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,676评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,911评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,937评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,935评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,860评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,660评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,113评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,363评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,506评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,238评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,861评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,486评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,674评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,513评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,426评论 2赞 352

推荐阅读更多精彩内容

  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,750评论 2赞 17
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,649评论 18赞 139
  • Kotlin 快速入门
    前言 人生苦多，快来 Kotlin ，快速学习Kotlin！ 什么是Kotlin？ Kotlin 是种静态类型编程...
    任半生嚣狂阅读 26,199评论 9赞 118
  • 视钱如命的你，走好
    昨天晚上下班回来跟妈妈视频，妈妈说你大姨夫走了。 我要拿碗准备装饭的手，突然不知自己要干嘛。一下瘫坐到身旁的椅子上...
    花花哒世界阅读 337评论 0赞 2
  • 有时候会喜欢两个人
    喜欢你到底是什么感觉？我爱我的女朋友，可是我又很喜欢另一个女孩子，另一个女孩子也喜欢我，抉择到底。。。
    刻进你生命阅读 217评论 0赞 0