js 封装

最新推荐文章于 2022-05-24 17:20:19 发布

amyloverice

最新推荐文章于 2022-05-24 17:20:19 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/amyloverice/article/details/82895670

前端专栏收录该内容

56 篇文章

订阅专栏

本文探讨了在JavaScript中封装函数的方法，以避免全局变量污染，包括使用对象、类和原型链等不同封装策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在平时的生产环境中,我们经常写出这样的代码:

function fAdd(iA,iB){
    return iA+iB;
}
function fMul(iA,iB){
    return iA-iB;
}

其本质上是这样的:

var fAdd = function(iA,iB){
    return iA+iB;
}
var fMul = function(iA,iB){
    return iA-iB;
}

这样的话,我们就创建了两个全局变量,iA,iB.如果在大型的项目环境中,会有很多人对代码进行开发,很容易造成变量污染,从而引出很多问题.所以我们就要对方法进行封装.

封装方式1:封装成对象

利用js中对象的特性来将我们的方法封装在对象中

var oFuncs = {
    fAdd : function(iA,iB){
        return iA+iB;
    }
    fMul:function(iA,iB){
       return iA-iB;
    }
}

或者

var oFuncs = function(){};
oFuncs.fAdd = function(iA,iB){
                 return iA+iB;
               }
oFuncs.fMul = function(iA,iB){
                 return iA-iB;
              }

这样,我们就可以这样调用函数了

oFuncs.fAdd(3,4);
oFuncs.fMul(6,3);

#

当然,还可以这么写

var oFuncs = function(){
    return  {
        fAdd : function(iA,iB){
            return iA+iB;
        }
        fMul:function(iA,iB){
           return iA-iB;
        }
    }
}

这样的话,每次使用方法的时候,要先实例化一下:

var oUseTool = oFuncs();
oUserTool.fAdd(4,8);

封装成类

var oFuncs = function(){
    this.fAdd = function(iA,iB){
        return iA+iB;
    }
    this.fMul = function(iA,iB){
        return iA-iB;
    }
}

var oUseTool = new oFuncs();
oUseTool.fAdd(5,6);

为了防止类中的方法被多次创建,我们也可以把它写在原型链上,如:

var oFuncs = function(){}
oFuncs.propotype.fAdd = function(iA,iB){
    return iA+iB;
}
oFuncs.propotype.fMul = function(iA,iB){
    return iA-iB;
}


var oUseTool = new oFuncs();
oUseTool.fAdd(5,6);

或者这么写:

var oFuncs = function(){}
oFuncs.propotype = {
     fAdd : function(iA,iB){
            return iA+iB;
        }
        fMul:function(iA,iB){
           return iA-iB;
        }
}


var oUseTool = new oFuncs();
oUseTool.fAdd(5,6);