JavaScript-设计模式-面向对象编程

280 阅读2分钟

image

函数定义

全局定义

//函数定义
function checkName(){
    ...
}
//另一种形式
var checkName = function(){...}

这两种方式都会在全局作用域中创建一个全局变量,当定义的过多,多人协作,很容易覆盖掉.

用对象的方式定义

//对象方式定义
var CheckObj = {
    checkName : function (){...}
}
//另一种方式
var CheckObj = function() {};
CheckObj.checkName = function(){...}

当要使用checkName()方法时,直接CheckObj.checkName(),就可以

以返回对象的方式

var CheckObj = function () {
    return {
         checkName : function (){...}
    }
}

var a = CheckObj()
a.checkName()

这样每次执行方法的时候都返回一个新对象

以类的方式

var CheckObj = function () {
    this.checkName : function (){...}
}
var a = new CheckObj();
a.checkName();

这种方式创建就是类了,所以调用方法需要new CheckObj(),获得实例,我们把所有的方法都放在了函数内部,通过this定义,所以每一次new 对象时,新创建的对象都会对类的this上的属性进行复制,所以新对象都会有一套属于自己的方法,但是这样消耗很大

以原型的方式

var CheckObj = function () {}
CheckObj.prototype.checkName = function () {...}
//另一种形式
var CheckObj = function () {}
CheckObj.prototype = {
    checkName = function () {...}
}

这样不管创建多少个实例,实例所拥有的方法都是一个,因为他们都从原型上往上找,都找到同一个方法

链式调用

var CheckObj = {
    checkName : function (){
        ...
        return this
    }
    checkEmail : function (){
        ...
        return this
    }
    checkAddr : function (){
        ...
        return this
    }
}
//调用方式
CheckObj.checkName().checkEmail().checkAddr()

//也可以放在原型上
var CheckObj = function () {}
CheckObj.prototype = {
    checkName : function (){
        ...
        return this
    }
    checkEmail : function (){
        ...
        return this
    }
    checkAddr : function (){
        ...
        return this
    }
}
//调用
var a = new CheckObj()
a.checkName().checkEmail().checkAddr()

绑定到Function上

Function.prototype.checkName = function () {}
//调用
var f = function() {}
f.checkName()
//或者
var f  = new Function();
f.checkName();;

不推荐这么使用:因为这样会污染了原生对象Function,当别人创建函数的时候也会被污染,造成不必要的开销,所以可以提供一个公共的接口

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

//调用
var method = function(){};
//或者
var method = new Function();
method.addMethod('checkName',function(){
    ...
})
method.checkName();

同样也可以链式调用

Function.prototype.addMethod = function(name,fn){
    this[name] = fn
    return this
}
//这样就可以链式添加原型上的方法
var method = new Function();
method.addMethod('checkName',function(){
    ...
}).addMethod('checkEmail',function(){
    ...
})
//如果想调用时也是用链式调用
method.addMethod('checkName',function(){
    ...
    return this
}).addMethod('checkEmail',function(){
    ...
    return this
})
method.checkName().checkEmail()

类的调用方式

Function.prototype.addMethod = function(name,fn){
    this.prototype[name] = fn
    return this
}
//使用时
var Methods = function(){}
Methods.addMethod('checkName',function(){
    ...
})
var m = new Methods();
m.checkName()

未完待续...


主要总结于<<JavaScript设计模式>>一书,有兴趣的可以看看