javascript实现简单的链式调用

最新推荐文章于 2024-08-09 08:35:49 发布

weixin_30955617

最新推荐文章于 2024-08-09 08:35:49 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaohong/archive/2012/08/12/2635521.html

本文介绍了JavaScript中链式调用的基本概念及其实现方法，通过构造Dog类并实现getName和getAge方法来演示如何进行链式调用。

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

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

01var function Dog(name,age){

02        this.name = name;

03        this.age = age;

04    };

05    Dog.prototype={

06        getName:function(){

07            console.log(this.name);

08        },

09        getAge:function(){

10            console.log(this.age);

11        }

12    };

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

1var dog1= new Dog("旺旺",3);

2dog1.getName();

3dog1.getAge();

实例化，并且调用方法。

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

01var Dog=function(name,age){

02        this.name = name;

03        this.age = age;

04    };

05    Dog.prototype={

06        getName:function(){

07            console.log(this.name);

08            return this;

09        },

10        getAge:function(){

11            console.log(this.age);

12            return this;

13        }

14    };

15 

16    var dog1= new Dog("旺旺",3);

17    dog1.getName().getAge();

上面的代码可以看出，Dog方法上多了一段代码：return this;
细心一点你会发现这里dog1实例前还需要一个new初始化，还是有点不方便。在改进一下：

01var Dog=function(name,age){

02        this.name = name;

03        this.age = age;

04    };

05    Dog.prototype={

06        getName:function(){

07            console.log(this.name);

08            return this;

09        },

10        getAge:function(){

11            console.log(this.age);

12            return this;

13        }

14    };

15    window.Dogs=function(name,age){

16        return new Dog(name,age);

17    };

18    Dogs("旺旺",3).getName().getAge();

这里在window下定义一个Dogs方法，作为Dog的别名，这样就可以直接用Dogs(“旺旺”,3).getName().getAge();这样调用了。
苛刻的网友说这样太暴露了，这样有两个全局变量变量Dog和Dogs，在改进一下：

01var Dog=function(name,age){

02        if(!(this instanceof Dog)){

03            return new Dog(name,age);

04        }

05        this.name = name;

06        this.age = age;

07    };

08    Dog.prototype={

09        getName:function(){

10            console.log(this.name);

11            return this;

12        },

13        getAge:function(){

14            console.log(this.age);

15            return this;

16        }

17    };

18    Dog("旺旺",3).getName().getAge();

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

1if(!(this instanceof Dog)){

2     return new Dog(name,age);

3}

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

更为安全代码：

01(function(){

02        var Dog=function(name,age){

03            if(!(this instanceof Dog)){

04                return new Dog(name,age);

05            }

06            this.name = name;

07            this.age = age;

08        };

09        Dog.prototype={

10            getName:function(){

11                console.log(this.name);

12                return this;

13            },

14            getAge:function(){

15                console.log(this.age);

16                return this;

17            }

18        };

19        return (window.Dog=Dog);

20    })();

21    Dog("旺旺",3).getName().getAge();

或者：

01(function(){

02        var Dog=function(name,age){

03            this.name = name;

04            this.age = age;

05        };

06        Dog.prototype={

07            getName:function(){

08                console.log(this.name);

09                return this;

10            },

11            getAge:function(){

12                console.log(this.age);

13                return this;

14            }

15        };

16        window.Dogs=function(name,age){

17            return new Dog(name,age);

18        };

19    })();

20 

21    Dogs("旺旺",3).getName().getAge();