AJax技术

学习JavaScript设计模式(链式调用)(2)

字号+ 作者:H5之家 来源:H5之家 2017-12-20 13:30 我要评论( )

//without callbackwindow.API = window.API || function(){ var name = JChen; this.setName = function(newName){name = newName;return this; }; this.getName = function(){return name; };};var o = new API()

//without callback window.API = window.API || function(){ var name = 'JChen'; this.setName = function(newName){ name = newName; return this; }; this.getName = function(){ return name; }; }; var o = new API(); console.log(o.getName()); console.log(o.setName('Haha').getName());

使用回调函数时

//with callback window.API2 = window.API2 || function(){ var name = 'JChen'; this.setName = function(newName){ name = newName; return this; }; this.getName = function(callback){ callback.call(this, name); return this; }; }; var o2 = new API2(); o2.getName(console.log).setName('Hehe').getName(console.log);

在使用回调函数时候callback.call(this, name)在一般情况下是没问题的,但是,这个例子偏偏用到了console.log,那么就有问题了。原因是console的this是指向console而不是winodw。

这个问题也很好解决。如下:

//with callback window.API2 = window.API2 || function(){ var name = 'JChen'; this.setName = function(newName){ name = newName; return this; }; this.getName = function(callback){ callback.call(this, name); return this; }; }; var o2 = new API2(); var log = function(para){ console.log(para); }; o2.getName(log).setName('Hehe').getName(log);

链式调用这种风格有助于简化代码的编写工作,让代码更加简洁、易读,同时也避免多次重复使用一个对象变量,希望大家可以熟练掌握。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • XML DOM加载

    XML DOM加载

    2017-12-11 16:31

  • file:///C:/Users...这种file://开头的本地文件不能使用ajax获取

    file:///C:/Users...这种file://开头的本地文件不能使用ajax获取

    2017-12-09 13:02

  • 《科学技术与工程》2007年08期

    《科学技术与工程》2007年08期

    2017-12-03 18:00

  • JavaScript Ajax实现异步通信

    JavaScript Ajax实现异步通信

    2017-11-28 13:10

网友点评