读javascript高级程序设计16-几条函数小技巧

内容概要

• 作用域安全的构造函数
• 惰性载入函数
• 函数绑定
• 函数节流

 

一、作用域安全的构造函数

我们知道，当使用new操作符调用构造函数时，构造函数内部的this会指向新创建对象的实例。

function Person(name){this.name=name;}var p=new Person('peter');console.log(p.name);//结果：perter

但是，如果没有使用new操作符，而是将构造函数当作普通函数调用时，this会指向window对象。

var p1=Person('peter');console.log(p1.name);//报错console.log(window.name);//peter

因此，在构造函数中应该首先检查this是否为正确的类型实例，这种方式就是作用域安全的构造函数。

function Person(name) {if (this instanceof

Person) { this.name = name; } else { return new

 Person(name);  }}var p = new Person('peter');console.log(p.name); //pertervar p1 = Person('peter');console.log(p1.name); //perterconsole.log(window.name); //报错

在该构造函数基础上，结合原型链的实现如下：

function Person(name) {  if (this instanceof Person) {    this.name = name;  }  else {    return new Person(name);  }}function Student(name,sno){Person.call(this,name);  this.sno=sno;}Student.prototype

=new

 Person();var s=new Student('peter','N0015');console.log(s.name);

通过作用域安全的构造函数，可以保证在缺少new操作符调用构造函数的时候在正确的执行环境中进行。

二、惰性载入函数

有些函数包含很多分支，每次调用时都会执行一遍if分支判断，但实际上可能每次走的都是相同分支。看下这个创建CORS对象的方法：

function createCORSRequest(method,url){              //创建XHR对象           var xhr = new XMLHttpRequest();        //启动请求           if("withCredentials" in xhr){             xhr.open(method,url,true);             }else if(typeof XDomainRequest!='undefined'){                  xhr=new XDomainRequest();                  xhr.open(method,url);                  }else{                       xhr=null;                       }                         return xhr;              }var xhr1 = createCORSRequest('get', 'http://www.othersite.com/weather.ashx');var xhr2 = createCORSRequest('get', 'http://www.othersite.com/articles.ashx');

实际上对于同一款浏览器每次创建对象时都会执行相同的分支，因此每次都进行if判断是多余的，使用惰性载入函数可以实现函数执行分支只发生一次。有两种常见方案：

方案一：在第一次调用函数时，根据分支结果，将该函数替换为另一个按合适的方式执行的函数。我们改进上面的函数如下：

function createCORSRequest(method, url) {  var xhr0 = new XMLHttpRequest();  if ('withCredentials' in xhr0) {    var xhr = new XMLHttpRequest();createCORSRequest = function (method, url) {      xhr.open(method, url, true);      return xhr;    }  } else if (typeof XDomainRequest != 'undefined') {createCORSRequest = function (method, url) {      var xhr = new XMLHttpRequest();      xhr = new XDomainRequest();      xhr.open(method, url);      return xhr;    }  } else {createCORSRequest = function (method, url) {      return null;    }  }  return createCORSRequest(method, url);}

这样改进后，每次执行时不必再执行多个if分支判断，而是直接执行替换后的简洁函数。它只会在第一次调用时有一些性能损失。

方案二：在声明函数时，就指定适当的函数。同样改进上面的例子：

var createCORSRequest=(function(method, url) {  var xhr0 = new XMLHttpRequest();  if ('withCredentials' in xhr0) {return function (method, url) {         var xhr = new XMLHttpRequest();      xhr.open(method, url, true);      return xhr;    }  } else if (typeof XDomainRequest != 'undefined') {return function (method, url) {      var xhr = new XMLHttpRequest();      xhr = new XDomainRequest();      xhr.open(method, url);      return xhr;    }  } else {return function (method, url) {      return null;    }  }})();

这种方案不同的是使用var声明函数，并为每个分支指定了匿名且自动执行的函数。这样，函数第一次加载的时候就确定了执行哪个分支的函数。

三、函数绑定

在执行回调函数或者事件处理程序时，常常需要把函数作为变量传递，此时我们需要保存函数的代码执行环境。函数绑定就是要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数

var demo = {  message: 'hello world',  show: function () {    console.log(this.message);  }}var obj = document.getElementById('my-btn');EventUtil.addHandler(obj, 'click', demo.show);//点击按钮结果undefined

其实我们可以利用闭包写法修复这个问题：

EventUtil.addHandler(obj, 'click', function (event) {  demo.show();});

但是用太多的闭包看上去代码不够简洁。在很多js库中，都会定义bind()函数来实现函数绑定。

function bind(fn, context) {  return function () {    return fn.apply(context, arguments);  }}

这个bind函数实现比较简单，两个参数分别为要调用的函数和函数执行环境，执行结果返回一个在指定执行环境调用函数的函数，它把其内部函数的arguments参数全部传递过去。调用方法如下：

EventUtil.addHandler(obj, 'click',bind(demo.show,demo));

四、函数节流

对于周期性执行的代码，应该进行函数节流。

例如下面的滚动事件：

window.onscroll = function(){       throttle(demo,window);       }

当页面滚动的时候，会持续的输出结果。这种高频率的响应，如果方法复杂一些的话会耗用还多的性能。对于这种情况我们可以进行如下优化：

//设置和消除定时器function throttle(method,context){     clearTimeout(method.id);     method.id=setTimeout(function(){          method.call(context)          },100);     }function demo(){     console.log(1);     }  window.onscroll = function(){       throttle(demo,window);       }

throttle方法有两个参数：要执行的方法和作用域。第一次调用时会创建定时器，后续调用时都是先消除已有的定时器，然后重新创建定时器。这样一来只有最后一次调用之后100ms后才会将相应的方法加入执行队列。