004 ※ 函数#老祖宗大显神威 |【附prototype.js源码包】

不二如是

关于为什么要学习JavaScript设计模式，请看：传送门

---

上一讲最后小不二基于prototype重写了方法，但是发现调用很麻烦。

代码：

1. var a = new checkObject();
   
2. a.checkName();
   
3. a.checkPassword();
   
4. a.checkEmail();

复制代码

玄武问他有什么办法优化，看到小不二面露难色，玄武说道。

“当然是可以避免的阿，就要在你声明的每一个方法末尾处将当前对象返回。在JS中this指向的就是当前对象，对不对？”

“是的”

“既然指向当前对象，那么我就可以将它返回，只需在每个方法里添加一个return”

代码：

1. var  checkObject = function(){
   
2.         checkObject.prototype = {
   
3.             checkName : function(){
   
4.                 return this
   
5.             },
   
6.             checkPassword : function(){
   
7.                 return this
   
8.             },
   
9.             checkEmail : function(){
   
10.                 return this
    
11.             }
    
12.         }
    
13.     }

复制代码

"这样的话，当我们使用时就可以这么写了"

代码：

1. a.checkName().checkEmail().checkPassword();

复制代码

“嗯嗯，好厉害的写法”

看到小不二激动好学的神情，玄武觉得小不二未来一定是一名得力干将，决定多教他点东西。

“小不二你用过prototype.js插件吗？”
源码包： prototype.zip (42.64 KB, 下载次数: 5, 售价: 3 鱼币)

2018-6-22 16:44 上传

点击文件名下载附件

“嗯，听说过，具体还没使用过，但我看咱们之前的项目中有用到。”

“是的，这个框架很好用，它封装了很多JS原生对象的拓展，假如我们想给每一个函数都添加你写的检测密码方法，只需这么写”

代码：

1. Function.prototype.checkPassword = function(){}

复制代码

“这样别人使用这个方法的时候就很方便了，如果你习惯函数形式，还可以这么写”

代码：

1. var f = new Function();
   
2.     f.checkPassword();

复制代码

“嗯，第二种写法好简洁啊，但是这样会污染Function吧？”

“没错，所以还可以抽象出一个统一添加方法的功能方法”

代码：

1. Function.prototype.addMethod = function(passWord,fn){
   
2.         this(passWord) = fn;
   
3.     }

复制代码

“这样后续别人添加密码验证，就可以这么写”

代码：

1. var methods = new Function();
   
2.     methods.addMethod('checkPassword',function(){
   
3.         
   
4.     });
   
5.    
   
6.     methods.checkPassword();

复制代码

“哇塞，这个框架好厉害，不过看起来有一点非常规，当我想链式添加多个方法，是不是在addMethod中将this返回呢？”

就像这样：

1. Function.prototype.addMethod = function(passWord,fn){
   
2.         this(passWord) = fn;
   
3.         return this;
   
4.     }

复制代码

“当然，可以这么写啦，JS是一种极其灵活的语言，你以后在咱们团队还有很多要学的哦～”

“请老大，放心，我会努力学习的”

...

预知后事如何，请看下回分解

---

课后作业


1、一开始的对话中，玄武是如何实现链式调用的，请写出代码。

2、自行下载，prototype.js框架，尝试调用玩一玩。



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢JS-设计模式，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

优时风

1

hanguahanni

return this

jack6666

1

CKP_1998