javaScript设计模式之面向对象编程（object-oriented programming，OOP）

Posted 2020-12-04 saucxs

面试的时候，总会被问到，你对javascript面向对象的理解？

面向对象编程（object-oriented programming，OOP）是一种程序设计范型。它讲对象作为程序的设计基本单元，讲程序和数据封装其中，以提高程序的重用性、灵活性和扩展性。

一、举个例子

有这么一个需求：做一个验证表单功能，仅需要验证用户名，邮箱，密码等

觉得在项目产品开发中，自己是这么写的

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

声明了3个全局变量，

下面是创建3个函数保存在变量里来实现你的功能，而你写的是将你的变量名放在function后边，也代表了你的变量，所以声明了3个全局变量。

//创建了3个函数保存在变量里
var checkName = function(){
    //验证姓名
}
var checkEmail = function(){
    //验证码邮箱
}
var checkPassword = function(){
    //验证密码
}

从功能上讲没有任何问题，但是如果别人也定义了同样的方法就会覆盖原有的功能，这种相互覆盖的问题不易觉察到。

我们可以将这些检查函数放在一个变量里保存，这样减少覆盖和被覆盖的风险。

（1）用对象收编变量

对象，他有属性和方法，我们访问属性或者方法，可以通过点语法向下遍历查询得到，我们可以创建一个检测对象，我们把方法放在里面。

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

这个时候我们将所有的函数作为CheckObject对象的方法，这样我们就只有一个对象，比如检测姓名CheckObject.checkName().

 

(2)对象的另一种形式

首先声明一个对象，然后给他添加方法，在JavaScript中函数也是对象。

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

但是当别人想用你写的对象方法就比较麻烦，因为这个对象不能复制一份（这个对象类在用new关键字创建新的对象时，新创建的对象时不能继承这些方法）

 

（3）真假对象

如果想简单的复制一下，你可以将这些方法放在一个函数对象中。

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

当每次调用这个函数的时候，把我们之前的对象返回出来，当别人每次调用这个函数时都会返回新对象。这样我们每个人使用的时候就不会相互影响，比如检测邮箱可以这样：

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

 

（4）类也可以

虽然通过创建新对象完成需求，但是他不是一个真正的意义上的类的创建方式，并且创建对象a和对象CheckObject没有任何关系，返回的对象与CheckObject对象无关，稍微优化一下。

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

上面的这样的对象，就可以看成是类，我们就可以不需要使用创建对象方法创建，既然是一个类，就用关键词new来创建

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

这样就可以用CheckObject类创建出来对象，我们其他人就可以对类实例化（用类创建对象），这样每一个人都有一套自己的方法。

 

（5）一个检测类

通过this的定义，每一次通过new关键字创建新对象时候，新创建的对象都会对类的this上的属性进行复制，所以新创建的对象都会有自己的一套方法，然而有时候造成消耗很奢侈，我们需要处理一下。

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

这样创建对象实例时候，创建出来的对象所拥有的方法都是一个，因为他们需要依赖prototype原型依次寻找，而找到方法是同一个，但是prototype写很多遍，可以这么写

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

以上两种方法不能混着用。

如在后边为对象的原型对象赋值新对象，那么会覆盖之前对prototype对象赋值的方法。

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

 

(6)方法还可以这样用

1、this对象

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

使用：

CheckObject.checkName().checkEmail().checkPassword();

 

2、类的原型对象

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

但是使用的时候需要创建一下

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

 

(7)函数祖先

比如你想给每一个函数都添加一个检测邮箱的方法。

Function.prototype.checkEmail = function(){
    //检测邮箱
｝

这样使用这个方法就比较简单，

1、函数形式

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

2、类的形式

var f = new Function();
f.checkEmail();

你这种方式，原则上没有问题，但是污染了全局原生对象Function，这样别人创建的函数也会被你创建的函数污染，造成不必要的开销，但是你可以抽象出一个统一添加方法的功能方法。方法如下：

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

这个时候，如果你想添加邮箱验证的方法和姓名验证的方法，可以这样使用

var methods = function(){};
//或者
var methods = new Function();
methods.addMethod(‘checkName‘,function(){
　　//验证姓名
})
methods.addMethod(‘checkEmail‘,function(){
　　//验证邮箱
})
methods.checkName();
methods.checkEmail();

 

(8)链式添加

如果想链式添加，在addMethods中将this返回，就可以

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

如果你还想添加方法，可以这样：

var methods = function(){};
methods.addMethod(‘checkName‘,function(){
   //验证姓名 
}).addMethod(‘checkEmail‘,function(){
   //验证邮箱 
});

如果我想链式使用，应该如何实现？

既然添加方法可以将this返回实现，那么添加的每一个方法都将this返回是不是也就实现了呢？

var methods = function(){};
methods.addMethod(‘checkName‘,function(){
   //验证姓名
   return this;  
}).addMethod(‘checkEmail‘,function(){
   //验证邮箱
   return this;  
})

测试一下：

methods.checkName().checkEmail();

 

(9)换一种使用方式

1、函数式调用

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

2、类式调用

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

使用类式调用，不能直接使用，需要通过new关键字来创建新对象

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

 

 

JavaScript中函数时一等公民。

 

1、如何实现方法的链式调用？

只需在类中的每个方法中通过this关键字返回对象实例的引用。每次函数调用都会返回一个新对象，表面上是CheckObject对象，实际是返回的新对象，这样每次调用就不会相互影响了。

2、为函数添加多个方法的addMethod方法？

（1）this对象

var CheckObject = {
     checkName: function(){
      //验证姓名
      return this;      
    } ,   

   checkEmail: function(){
      //验证邮箱
      return this;      
    } ,  

 　　checkPassword: function(){
      //验证密码
      return this;      
    } ,  

}

 

（2）类的原型对象

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