首页 > 代码库 > 读javascript高级程序设计16-几条函数小技巧
读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 instanceofPerson) { 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后才会将相应的方法加入执行队列。
读javascript高级程序设计16-几条函数小技巧