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

作者: GodlinE | 来源:发表于2017-04-07 11:49 被阅读0次

2017-04-05 面向对象学习笔记
python面向对象学习笔记-01
JavaScript面向对象学习笔记
Python学习-面向对象
(17.06.06)面向对象、创建一个类、devicemotio
面向对象学习笔记
面向对象学习笔记
学习笔记：面向对象
Java之面向对象上
20-OOP类与对象

工厂模式补充

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

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>

2017-04-05 面向对象学习笔记
工厂模式补充核心思路提供父构造函数设置构造函数的原型对象提供工厂方法定制合作伙伴（设置子构造函数）使用...
python面向对象学习笔记-01
学习笔记 # 0，OOP-Python面向对象 - Python的面向对象 - 面向对象编程 - 基础 -...
JavaScript面向对象学习笔记
@(JS技巧)[面向对象] JavaScript面向对象学习笔记封装 Javascript是一种基于对象（obj...
Python学习-面向对象
查看所有Python相关学习笔记面向对象面向对象知识点汇总：面向对象静态属性实例属性(self)静态方法(@...
(17.06.06)面向对象、创建一个类、devicemotio
笔记什么是面向对象？面向对象是一种编程思想：OOP 面向过程面向对象面向数据作用...
面向对象学习笔记
- 数组其实就是一种引用类型。 int是基本类型，int[]是引用类型数组是引用类型，引用类型和基本类型的区别在...
面向对象学习笔记
属性：方法：类中的function &this 表示类使用本身的属性或者方法，出现$this表示类自己访问控...
学习笔记：面向对象
一、什么是面向对象？ 1）面向对象(Object-Orientation,简称OO)是一种系统建模技术/编程思想。...
Java之面向对象上
此为个人学习笔记，如有错误，欢迎指教面向对象概述：面向对象特点封装：概述类：概述：类的内容：成员...
20-OOP类与对象
面向对象 Object Oriented 学习面向对象：XXOO 面向对象的学习：面向过程和面向对象的区别：面...

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

工厂模式补充

单例模式简单说明

单例模式的实现

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

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

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

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

观察者模式简单介绍

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

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

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

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

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

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

命名空间模式

通用的命名空间函数

eval 的简单说明

相关文章

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

python面向对象学习笔记-01

JavaScript面向对象学习笔记

Python学习-面向对象

(17.06.06)面向对象、创建一个类、devicemotio

面向对象学习笔记

面向对象学习笔记

学习笔记：面向对象

Java之面向对象上

20-OOP类与对象

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

工厂模式补充

单例模式简单说明

单例模式的实现

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

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

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

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

观察者模式简单介绍

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

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

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

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

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

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

命名空间模式

通用的命名空间函数

eval 的简单说明

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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