再起航，我的学习笔记之JavaScript设计模式01

我的学习笔记是根据我的学习情况来定期更新的，预计2-3天更新一章，主要是给大家分享一下，我所学到的知识，如果有什么错误请在评论中指点出来，我一定虚心接受，那么废话不多说开始我们今天的学习分享吧！

在通常情况下，我们在js中声明一个方法一般是直接

function MethodName(){
    //具体逻辑
}

这样声明当然没问题，但是如我们是在团队中进行开发，这样声明的方法有可能会污染全局变量
这个时候您或许会想函数是变量吗？那么请看下面的例子

var MethodObject={
    MethodName:function(){
        //具体逻辑
    }
}

这个时候我们可以将我们需要实现的函数作为MethodObject对象的方法，这样我们就只有一个对象，可以很大程度的避免污染全局变量
而我们想要调用这些方法也很简单，直接MethodObject.MethodName()就可以了，只是在我们以前的调用函数式前多了一个对象名称
既然我们可以通过"."，来使用方法，那么我们也可以创建这个对象，不过我们要先声明一个对象，然后才能给它添加方法。
比如，我们先声明一个对象，当然在JavaScript中函数也是对象

var MethodObject=function(){};

接着我们对这个对象添加方法

MethodObject.MethodName=function(){
    //具体逻辑
}

同样的我们也可以通过MethodObject.MethodName()去调用这个方法
但是，我们这样去创建对象有一个问题，如果别人想用我们这个对象里的方法就很麻烦，因为新创建的对象是不能继承我们这些方法的。这个时候我们可以将我们的方法放在一个函数对象中。

var MethodObject=function(){
    return{
        MethodName:function(){
            //具体逻辑
        }
    }
}

当我们这样创建对象，每次调用这个函数的时候，都会把我们之前写的那个对象返回出来。
这样我们就可以通过下面的示例去创建并调用

var Method=MethodObject();
Method.MethodName();

虽然我们通过创建对象的方法，达到了我们最初的目的，避免污染全局，但是我们现在的写法不是一个真正意义上类的创建方式，而且我们return返回的对象和MethodObject对象无关，所以我们在对这个方式改造一下

var MethodObject=function(){
    this.MethodName=function(){
        //具体逻辑
    }
}

像这样的对象我们就可以看成一个类了，我们可以使用关键字new来创建

var Method=new MethodObject();
Method.MethodName();

不过由于我们是通过this对其进行定义的，所以每一次通过new关键字创建对象，实际上新创建的对象都会对类的this上的属性进行复制，然而有时候这么做对内存的消耗是奢侈的，我们再来改进一下

var MethodObject=function(){};
    MethodObject.prototype={
        MethodName:function(){
            //具体逻辑
        }
    }

这样我们创建出来的对象所拥有的方法就都是一个了，因为他们都要依赖prototype原型依次寻找，而找到的方法又都是同一个，它们都绑定在MethodObject类的原型上。
同样的我们也是通过new来创建通过"."来调用。

var Method=new MethodObject();
Method.MethodName();

但是，如果我们在对象里添加了多个方法，需要一个个的点出来，看上去不是很美观，我们还可以这么修改

var MethodObject=function(){}；
    MethodObject.prototype={
        MethodName:function(){
            //具体逻辑
            return this;
        },
        MethodNameTwo:function(){
            //具体逻辑
            return this;
        }
    }

这样我们如果需要使用多个方法就可以通过链式直接点出来

var Method=new MethodObject();
Method.MethodName().MethodNameTwo();

这样我们就达到了我们最初的目的避免污染全局。
最后结合今天所分享的知识，再给大家带来统一添加方法的功能，也能实现避免污染全局的目的
首先我们向原声对象Function中添加一个添加方法的功能方法

Function.prototype.addMethod=function(name,fn){
    this.prototype[name]=fn;
    return this;
}

接着我们创建一个对象，并像其中添加方法

var Methods=function(){};
Methods.addMethod('MethodName',function(){
    //具体逻辑
}).addMethod('MethodNameTwo',function(){
    //具体逻辑
});

同样的我们需要通过new来创建对象再调用它

var method=new Methods();
method.MethodName();

好了以上就是本次分享的全部内容，本次示例参考自JavaScript设计模式一书，让我们一点点积累一点点成长，希望对大家有所帮助。

转载于:https://www.cnblogs.com/chen-jie/p/7260000.html