JavaScript设计模式（1）—— 面对对象的编程

原文出自于本人我的博客网站：https://www.dzyong.com（欢迎访问）

本文连接地址: https://www.dzyong.com/#/View...

面对对象编程是一种程序设计范型。它将对象做为程序的基本单元，将程序和数据封装其中，以提升程序的重用性、灵活性和扩展性。

咱们以一个例子来开始学习。需求：对用户输入的用户名、邮箱、密码等进行验证。

实现这个需求很简单，小白的写法是：

function checkName() {
    //验证姓名
}
function checkEmail() {
    //验证邮箱
}
function checkPassword() {
    //验证密码
}

这是一种函数的形式来进行验证，可是这种写法的风险很大，若是是我的开发这样写的话问题不大，可是若是是团队开发，若是别人也定义了一样的方法就会覆盖掉原有的功能了。由于这3个函数属于全局变量。

用对象收编变量

为了不这样的问题发生，咱们可使用对象收编变量。

var CheckObject = {
    checkName : function(){
        //验证姓名
    },
checkEmail : function(){
        //验证邮箱
    },
checkPassword : function(){
        //验证密码
    },
}

此时将全部的函数做为CheckObject 对象的方法，这样咱们就只有了一个对象，而且咱们使用它也很简单，好比说检测姓名 CheckObject.checkName ()，只是比原来的前面多了一个对象的名称。

对象的另外一种形式

对象还有另外一种形式，能够先声明对象，而后在为它添加方法，因此你能够这么作：

var CheckObject = function(){}
CheckObject .checkName = function() {
    //验证姓名
}
CheckObject .checkEmail = function() {
    //验证邮箱
}
CheckObject .checkPassword = function() {
    //验证密码
}

真假对象

若是你想复制这个对象能够这样写：

var CheckObject = function(){
    return {
        checkName ： function(){ //验证姓名  },
        checkEmail ： function(){ //验证邮箱},
        checkPassword ： function(){ //验证密码},
    }
}

这样作的好处是，每当调用这个函数的时候，把以前的那个对象返回出来，当别人每次调用这个函数的时候都返回一个新的对象，这样每一个人使用时就互不影响了。

var a = CheckObject ();
a.checkName ();

类也能够

虽然建立新对象完成了需求，可是它不是一个真正意义上类 的建立方式，而且建立的对象a和对象CheckObject 没有任何关系，接下来咱们就来建立也真正的类：

var CheckObject = function(){
    this.checkName = function(){  //验证姓名  }
    this.checkEmail = function(){  //验证邮箱  }
    this.checkPassword = function(){  //验证密码  }
}

类的建立方法就不能像对象那样，既然是一个类，就要用关键字new来建立

var a = new CheckObject ();
a.checkName ();

一个检测类

全部的方法放在函数内部了，经过this定义的，因此每一次经过new关键字建立新对象的时候，新建立的对象就会对类的this上的属性进行复制。因此这些新建立的对象都有本身的一套方法，可是这么多有时候形成的消耗是很奢侈的，咱们须要处理一下：

var CheckObject = function(){}
CheckObject .prototype.checkName = function(){  //验证姓名  }
CheckObject .prototype.checkEmail = function(){  //验证邮箱  }
CheckObject .prototype.checkName = checkPassword (){  //验证密码  }

这样建立对象实例的时候，建立出来的对象所拥有的方法都是一个，由于他们都要依赖prototype原型一次寻找，而找到的方法都是同一个，他么都绑定在CheckObject对象类的原型上。固然咱们还能够对上面的方式进行简化。

var CheckObject = function(){}
CheckObject .prototype = {
    checkName ： function() {  //验证姓名  },
    checkEmail ： function() {  //验证邮箱  },
    checkName ： function() {  //验证密码  },
}

可是千万要注意，这两种方式不能混着用，不然一旦混用，如在后面为对象的原型对象赋值新对象时，它将覆盖掉以前对prototype对象赋值的方法。

使用仍是如同以前同样的方法使用;

var a = new CheckObject ();
a.checkName ();
a.checkEmail ();
a.checkName ();

方法还能够这样用

在以前的基础上还能够进一步的优化，不知你发现没，调用3个方法咱们须要写3遍a，这是能够避免的，在声明的每个方法末尾返回当前对象（JavaScript中this指向当前对象）。

var CheckObject =  {
    checkName ： function() {  //验证姓名  return this； },
    checkEmail ： function() {  //验证邮箱  return this； },
    checkName ： function() {  //验证密码  return this； },
}

此时咱们就能够这样用:

CheckObject .checkName().checkEmail().checkName()

是否是感受简洁了不少，固然一样的方式也能够放到类的原型对象中：

var CheckObject = function(){}
CheckObject .prototype = {
    checkName ： function() {  //验证姓名  return this； },
    checkEmail ： function() {  //验证邮箱  return this； },
    checkName ： function() {  //验证密码  return this； },
}
var a = new CheckObject();
a.checkName().checkEmail().checkName()

函数的祖先

prototype.js是一款JavaScript框架，里面为咱们方便的封装了不少方法，最大的特色就是能够对源生对象（Function、Array、Object等）的扩展，好比你想给一个函数都添加一个邮箱检测的方法能够这么作：

Function.prototype.checkEmail = function(){
    //验证邮箱
}

这样使用这个方法就方便了不少：

函数的形式

var a = function(){}
a.checkEmail ();

类的形式

var a = new Function()；
a.checkEmail ();

可是为了安全咱们不容许这么作，由于这会污染源生的对象Function,形成没必要要的开销，你能够抽象出一个统一添加方法的功能：

Function.prototype.addMothed = function(name, fn) {
    this[name] = fn
}

你就可使用以下的方式来添加你的方法

var motheds = function() {}  或   var motheds = new Function()
motheds.addMothed('checkEmail ', function(){  // 检测邮箱  })

一样也能够链式添加

Function.prototype.addMothed = function(name, fn) {
    this[name] = fn；
    return this；
}
motheds.addMothed('checkEmail ', function(){  // 检测邮箱  })
.addMothed('checkName', function(){  // 检测姓名  })

也是返回方法的this来实现

motheds.addMothed('checkEmail ', function(){  // 检测邮箱  return this;  })

使用类调用方式

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

使用类的方式时要注意，不能直接使用，须要经过new关键字来建立对象。

var m = new Methods();
m.checkEmail ()

原文出自于本人我的博客网站：https://www.dzyong.com（欢迎访问）

转载请注明来源: 邓占勇的我的博客 - 《JavaScript设计模式——面对对象的编程》

本文连接地址: https://www.dzyong.com/#/View...