JavaScript设计模式学习之方法扩展

本文仅仅是记录自己学习的心得体会，如果有误，欢迎指出，非原创，具体请参考：《JavaScript设计模式》 张容铭 著

情景：现在有需求，写三个验证，分别是账号，邮箱，手机的验证。
分析
1.一般我们习惯于直接写三个函数解决：

    function checkOutUserAccount() {
        //验证用户账户
    }
    function checkOutUserEmail() {
        //验证用户邮箱
    }
    function checkOutUserMobile() {
        //验证用户手机
    }

这样使用会导致一个问题：无形之中在全局中声明了三个变量，等同于下面的效果：

    var checkOutUserAccount = function () {
        //验证用户账户
    }
    var checkOutUserEmail = function () {
        //验证用户邮箱
    }
    var checkOutUserMobile = function () {
        //验证用户手机
    }

这样子做，功能是可以实现，但是却是全局变量，不利于团队项目的开发，如果别人定义了相同的方法，你的方法将会被覆盖

2.将这三个方法装进对象中

    
var CheckOutObject = {
    checkOutUserAccount:function () {
      //验证用户账户
    },
    checkOutUserEmail:function () {
      //验证用户邮箱
    },
    checkOutUserMobile:function () {
      //验证用户手机
    }
}

也可以这样（函数也是对象）

var CheckOutObject = function () {};
CheckOutObject.checkOutUserAccount = function () {
  //验证用户账户
}
CheckOutObject.checkOutUserEmail = function () {
  //验证用户邮箱
}
CheckOutObject.checkOutUserMobile = function () {
  //验证用户手机
}

如何使用：CheckOutObject.checkOutUserAccount() //点语法调用

当然也可以在函数中返回一个包裹这三个方法的对象：

var CheckOutObject = function () {
    return {
      checkOutUserAccount:function () {
        //验证用户账户
      },
      checkOutUserEmail:function () {
        //验证用户邮箱
      },
      checkOutUserMobile:function () {
        //验证用户手机
      }
    }
}

如何使用：var checkOut = CheckOutObject(); //得到返回对象 存在checkOut中 checkOut.checkOutUserAccount();//调用返回对象中的方法

上面这种方法在每一次调用的时候，得到的都是返回的新的对象，互相不干扰。当然也可以通过类实现
3.实用类

var CheckOutObject = function () {
    this.checkOutUserAccount = function () {
      //验证用户账户
    }
    this.checkOutUserEmail = function () {
      //验证用户邮箱
    }
    this.checkOutUserMobile = function () {
      //验证用户手机
    }
}

这样就可以用CheckOutObject类创建出来的对象了

var checkOut = new CheckOutObject(); //创建一个新对象checkOut
checkOut.checkOutUserAccount() //调用对象中的方法

在new CheckOutObject的时候，实际上是执行了一次CheckOutObject，this指向调用者checkOut，所以新创建的对象会对CheckOutObject类中this定义的方法进行复制。所以每一个新创建的对象都会有一套自己的方法

当然这样创建也是奢侈的，可做修改

4.在原型对象上添加

//一个一个往原型上面添加方法
var CheckOutObject = function () {};
CheckOutObject.prototype.checkOutUserAccount = function () {
  //验证用户账户
}
CheckOutObject.prototype.checkOutUserEmail = function () {
  //验证用户邮箱
}
CheckOutObject.prototype.checkOutUserMobile = function () {
  //验证用户手机
}

当然也可以这样

//重写原型对象
var CheckOutObject = function () {};
CheckOutObject.prototype = {
    checkOutUserAccount:function () {
      //验证用户账户
    },
    checkOutUserEmail:function () {
      //验证用户邮箱
    },
    checkOutUserMobile:function () {
      //验证用户手机
    }
}

如何使用：var checkOut = new CheckOutObject();//new 一个新对象checkOut checkOut.checkOutUserAccount();//调用原型上的方法

但是如果需要调用许多方法，就会写很多次checkOut
例如：checkOut.checkOutUserAccount() checkOut.checkOutUserEmail() checkOut.checkOutUserMobile()这里书写三次，如果有更多方法呢？可以利用this将调用者返回（下面例子this指向的调用者是checkOut），这样实现链式调用、
5.实现链式调用

var CheckOutObject = function () {};
CheckOutObject.prototype = {
    checkOutUserAccount:function () {
      //验证用户账户
      return this
    },
    checkOutUserEmail:function () {
      //验证用户邮箱
      return this
    },
    checkOutUserMobile:function () {
      //验证用户手机
      return this
    }
}

如何使用：var checkOut = new CheckOutObject(); checkOut.checkOutUserAccount().checkOutUserEmail().checkOutUserMobile();//这也许就是传说中的链式调用了

checkOut.checkOutUserAccount().checkOutUserEmail().checkOutUserMobile();这里是checkOut调用，当执行到checkOut.checkOutUserAccount();因为return this，而这里的this指向checkOut，所以就相当于返回了checkOut。所以语句就变成了checkOut. .checkOutUserEmail().checkOutUserMobile();以此类推，最后变成checkOut.checkOutUserMobile();

这里是在CheckOutObject 这个类的原型上添加的，那么只可以在new出来的新对象上面使用，如果想实现每一个函数都带有这个方法呢？
6.在Function的原型上添加

Function.prototype.checkOutUserAccount = function () {
    //验证用户账户
}
Function.prototype.checkOutUserEmail = function () {
    //验证用户邮箱
}
Function.prototype.checkOutUserMobile = function () {
    //验证用户手机
}

如何使用：如果习惯使用函数形式：var checkOut = function () {}; checkOut.checkOutUserAccount()
如果习惯使用类的形式：var checkOut = new Function();checkOut.checkOutUserAccount();

但是如果这样做，方便了自己，却会污染原生对象Function，所以我们可以抽象出一个用于添加方法的方法。

Function.prototype.addMethod = function (name, fn) {
    this[name] = fn;
}
var checkOut = new Function();
或者
var checkOut = function () {}
checkOut.addMethod('checkOutUserAccount',function () {
    //验证用户账户
})

这里实例化了一个checkOut对象，这个对象调用原型上的addMethod方法时，this[name] = fn中的this指向checkOut这个调用的对象，就相当于是给checkOut这个对象添加了一个方法。例子中添加的是checkOutUserAccount方法。

如果想要实现链式调用就在原型addMethod中加入return this;

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

如何调用：

checkOut.addMethod('yourFun',function () {
  
}).addMethod('yourFun',function () {
  
}).addMethod('yourFun',function () {
  
})

如果想要对已添加的方法链式调用

checkOut.addMethod('yourFun',function () {
    // 这里return this  返回调用的对象  此时调用对象是 checkOut
    return this;
}).addMethod('yourFun',function () {
    // 这里return this  返回调用的对象  此时调用对象是 checkOut
    return this;
}).addMethod('yourFun',function () {
    // 这里return this  返回调用的对象  此时调用对象是 checkOut
    return this;
})

如何调用：(假设已经添加了checkOutUserAccount ，checkOutUserEmail ，checkOutUserMobile这三个方法)

checkOut.checkOutUserAccount(). checkOutUserEmail().checkOutUserMobile() 

7.在checkOut的原型上添加方法的方法
当然也可以在checkOut的原型上添加方法，(上面这种是在自身添加)
这里对addMethod做一个小修改

Function.prototype.addMethod = function (name, fn) {
    this.prototype[name] = fn;//在调用者的原型上添加方法
    return this;
}

但是这里调用的时候需要new 一个新的checkOut对象

var newCheckOut = new checkOut();
newCheckOut.checkOutUserAccount()

---

如果有误，或者有争议的地方，提醒下，谢谢