我的学习笔记是根据我的学习情况来定期更新的,预计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设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。

再起航,我的学习笔记之JavaScript设计模式01的更多相关文章

  1. 再起航,我的学习笔记之JavaScript设计模式02

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

  2. 再起航,我的学习笔记之JavaScript设计模式03

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

  3. 再起航,我的学习笔记之JavaScript设计模式04

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

  4. 再起航,我的学习笔记之JavaScript设计模式05(简单工程模式)

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

  5. 再起航,我的学习笔记之JavaScript设计模式06(工厂方法模式)

    上一次已经给大家介绍了简单工厂模式,相信大家对创建型设计模式有了初步的了解,本次我将给大家介绍的是工厂方法模式. 工厂方法模式 工厂方法模式(Factory Method):通过对产品类的抽象使其创建 ...

  6. 再起航,我的学习笔记之JavaScript设计模式05(简单工厂模式)

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

  7. 再起航,我的学习笔记之JavaScript设计模式06(抽象工厂模式)

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

  8. 再起航,我的学习笔记之JavaScript设计模式08(建造者模式)

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

  9. 再起航,我的学习笔记之JavaScript设计模式09(原型模式)

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

随机推荐

  1. 关于数据库优化1——关于count(1),count(*),和count(列名)的区别,和关于表中字段顺序的问题

    1.关于count(1),count(*),和count(列名)的区别 相信大家总是在工作中,或者是学习中对于count()的到底怎么用更快.一直有很大的疑问,有的人说count(*)更快,也有的人说 ...

  2. python基础之字典dict和集合set

    作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7043642.html python基础之字典dict和集合set 字典dic ...

  3. SQLServer 理解copyonly备份操作

    标签:MSSQL/日志截断 概述 Alwayson在添加数据库的过程中如果同步首选项选择的是“完整”,那么就会在主副本上执行copyonly的完整备份和日志备份在辅助副本上执行还原操作,也正是这个操作 ...

  4. 使用jQuery筛选排除元素以修改指定标签的属性

    简单案例: $(function(){ $("td[id][id!='']").click(function(){ //你的逻辑 }); }); 上述代码,有id且id不为空的td ...

  5. react-native 学习 ----- React Navigation

    很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...

  6. 梳理spring的层次结构的神器

    今天发现一个快速搞定spring层次结构的神器:效果如下 这是用idea编辑器直接生成的.还可以显示方法属性等等.简直神器.谁用谁知道... 操作如下:

  7. 关于js中的表单事件

    表单结构如下所示: <form > <input type="text" name="txt" id="txt" valu ...

  8. C#字典转换成where条件

    where 1=1 and Dictionary[key1]=Dictionary[value1] and Dictionary[key2]=Dictionary[value3].... /// &l ...

  9. 大数据平台常见异常-zookeeper

    本文主要阐述大数据平台环境zookeeper常见异常和解决方案 1.Connection reset by peer异常 异常说明 我们现在项目有个任务OneMinuteDataSync是用spark ...

  10. 如何删除 SQL Server 表中的重复行

    第一种:有主键的重复行,就是说主键不重复,但是记录的内容重复比如人员表tab ,主键列id,身份证编号idcard当身份证重复的时候,保留最小id值的记录,其他删除delete a from tab ...