昨天看到一篇很不错的链式调用文章，存在这里记一下。

原帖地址：http://www.css88.com/archives/4524

用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻，貌似现在很多库都支持了方法的链式调用,比如YUI3等。链式调用是一个非常不错的语法特性，能让代码更加简洁、易读。很多时候链式调用可以避免多次重复使用一个对象变量。今天有人在群里说起javascript链式调用，写了几个简单的实现方式共大家参考一下：

一般我们我用函数构造一个类，例如：

var function Dog(name,age){
    this.name = name;
    this.age = age;
};
Dog.prototype={
    getName:function(){
        console.log(this.name);
    },
    getAge:function(){
        console.log(this.age);
    }
};

定义一个Dog类，并具备几个简单的方法

var dog1= new Dog("旺旺",3);
dog1.getName();
dog1.getAge();

实例化，并且调用方法。

要实现链式调用是非常简单的事情，唯一需要做的就是在每个方法后面返回this。例如：

var Dog=function(name,age){
    this.name = name;
    this.age = age;
};
Dog.prototype={
    getName:function(){
        console.log(this.name);
        return this;
    },
    getAge:function(){
        console.log(this.age);
        return this;
    }
};

var dog1= new Dog("旺旺",3);
dog1.getName().getAge();

上面的代码可以看出，Dog方法上多了一段代码：return this;

细心一点你会发现这里dog1实例前还需要一个new初始化，还是有点不方便。在改进一下：

var Dog=function(name,age){
    this.name = name;
    this.age = age;
};
Dog.prototype={
    getName:function(){
        console.log(this.name);
        return this;
    },
    getAge:function(){
        console.log(this.age);
        return this;
    }
    };
    window.Dogs=function(name,age){
    return new Dog(name,age);
};
Dogs("旺旺",3).getName().getAge();

这里在window下定义一个Dogs方法，作为Dog的别名，这样就可以直接用Dogs(“旺旺”,3).getName().getAge();这样调用了。

苛刻的网友说这样太暴露了，这样有两个全局变量变量Dog和Dogs，在改进一下：

var Dog = function(name,age){
    if(!(this instanceof Dog)){
        return new Dog(name,age);
    }
    this.name = name;
    this.age = age;
};

Dog.prototype={
    getName:function(){
        console.log(this.name);
        return this;
    },
    getAge:function(){
        console.log(this.age);
        return this;
    }
};
Dog("旺旺",3).getName().getAge();

这里在构造函数中加了这么一句：

if(!(this instanceof Dog)){
    return new Dog(name,age);
}

判断this是否为Dog实例，如果不是就创建一个新实例。

更为安全代码：

(function(){
    var Dog=function(name,age){
        if(!(this instanceof Dog)){
            return new Dog(name,age);
        }
        this.name = name;
        this.age = age;
    };
    Dog.prototype={
        getName:function(){
            console.log(this.name);
            return this;
        },
        getAge:function(){
            console.log(this.age);
            return this;
        }
    };
    return (window.Dog=Dog);
})();
Dog("旺旺",3).getName().getAge();

或者：

(function(){
    var Dog=function(name,age){
        this.name = name;
        this.age = age;
    };
    Dog.prototype={
        getName:function(){
            console.log(this.name);
            return this;
        },
        getAge:function(){
            console.log(this.age);
            return this;
        }
    };
    window.Dogs=function(name,age){
        return new Dog(name,age);
    };
})();
Dogs("旺旺",3).getName().getAge();

希望对新手有所帮助，如有不对之处欢迎留言拍砖斧正！