一：前言
本文适合有一定JS开发基础的读者，文章涉及开发中经常遇到的一些令人疑惑的问题，理解这些问题有助于我们快速提升对JS这门语言的理解和应用能力。文章只讲述具体问题中的关键问题，不涵盖全面的知识点。如想了解具体的知识，可以参考笔者博客的相关文章。
二：正文
1.丢失的this
在实际应用中， this的指向大致分为以下四种:
(1)作为对象方法的调用
（2）作为普通函数调用
（3）构造器调用
（4）Function.prototype.call或Function.prototype.apply
1-1阅读下面代码：
//1.作为对象方法的调用this总是指向那个对象
window.name = 'globalName';
var getName = function(){
return this.name;
};
console.log( getName() ); // 输出：globalName
//2.作为普通函数的调用：非严格模式下this总是指向window，严格模式下 undefined
window.name = 'globalName';
var myObject = {
name: 'sven',
getName: function(){
return this.name;
}
};
var getName = myObject.getName;//关键：这里保留了一个普通函数的引用
console.log( getName() ); // globalName通过以上两个对比，理解使用方法不同，this指向不同
1-2阅读下面的代码：
var getId = function( id ){
return document.getElementById( id );
};
getId( 'div1' );
//我们也许思考过为什么不能用下面这种更简单的方式：
var getId = document.getElementById;
getId( 'div1' );document.getElementById方法需要用到this。这个this本来被期望指向document,当getElementById被当作 document的属性被调用时，方法内部的this确实是指向document.
但是当使用getId来引用document.getElementById之后，在调用getId，此时就变成了普通函数调用，内部的this就指向了window。
利用call或者apply更正this指向：
//我们可以尝试利用apply 把document 当作this 传入getId 函数，帮助“修正”this：
document.getElementById = (function( func ){
return function(){
return func.apply( document, arguments );
}
})( document.getElementById );
var getId = document.getElementById;
var div = getId( 'div1' );
alert (div.id); // 输出： div1
2.实现手动绑定this
2-1:bind方法的兼容写法
var bind = Function.prototype.bind || function( context ){
var self = this; // 保存原函数
return function(){ // 返回一个新的函数
return self.apply( context, arguments ); // 执行新的函数的时候，会把之前传入的context当作新函数体内的this
}
};
3.闭包
3-1.现在来看看下面这段代码：
var func = function(){
var a = 1;
return function(){
a++;
alert ( a );
}
};
var f = func();
f(); // 输出：2
f(); // 输出：3
f(); // 输出：4
f(); // 输出：5当执行f = func()时，f返回了一个匿名函数的引用，它可以访问到func()被调用时产生的环境，而局部变量a一直处在这个环境里。这个变量就有了不被销毁的理由，这里就产生了一个闭包结构。
3-2常见的闭包的问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script type="text/javascript">
var node = document.getElementsByTagName('div');
for(var i=0;len=node.length;i<len;i++){
nodes[i].onclick=function(){
alert(i);
}
}
//无论点击哪个结点，都返回5
//这是因为onclick事件是异步的，当事件触发的时候，for循环早已经结束
//保存了函数的引用，顺着作用域链从内到外查找i时，查到的值总是5
//解决方法就是在闭包的帮助下，把每次循环的i都封闭起来。
/*
for(var i=0;len=node.length;i<len;i++){
nodes[i].onclick=(function(i){
alert(i);
})(i);
}*/
</script>
</body>
</html>3-3.利用闭包延续局部变量的寿命
//img 对象经常用于进行数据上报，如下所示：
var report = function( src ){
var img = new Image();
img.src = src;
};
report( 'http://xxx.com/getUserInfo' );
//丢失数据的原因是img是report函数中的局部变量，当函数调用之后局部变量就销毁了，而此时或许还没来得及发起http请求
//现在我们把img 变量用闭包封闭起来，便能解决请求丢失的问题：
var report = (function(){
var imgs = [];
return function( src ){
var img = new Image();
imgs.push( img );
img.src = src;
}
})();闭包与内存管理
闭包会使一些数据无法被及时的销毁，如果将来需要回收这些变量，我们可以手动把这些变量设置为null。
跟闭包和内存泄漏有关系的地方是，使用闭包的同时容易形成循环引用，如果闭包的作用域链中保存着一些DOM结点，这时候就有可能造成内存泄漏。
4.高阶函数
（1）函数可以作为参数被传递
（2）函数可以作为返回值输出
4-1.函数作为参数传递
Array.prototype.sort方法：
var array = ['10','5','12','3'];
array.sort();
//array:['10','12','3','5']
//如代码那样，排序的结果并不是我们想要的，这与sort函数的比较规则有关系
array.sort(function(a,b){return a-b;});
//array:['3','5','10','12']
传入一个比较的函数，就可以按照数字大小的规则进行正确的比较了。4-2.函数作为返回值输出
var getSingle = function ( fn ) {
var ret;
return function () {
return ret || ( ret = fn.apply( this, arguments ) );
};
};4-3.函数作为参数被传递并且返回另一个函数
var getScript = getSingle(function(){
return document.createElement( 'script' );
});
var script1 = getScript();
var script2 = getScript();
alert ( script1 === script2 ); // 输出：true4-4.高阶函数应用
（1）高阶函数实现AOP
AOP（面向切面编程）的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些业务逻辑无关的功能包括日志统计、控制安全、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的方式掺入业务逻辑模块中。
下面代码通过扩展Function.prototype来实现把一个函数“动态织入”
Function.prototype.before = function( beforefn ){
var __self = this; // 保存原函数的引用
return function(){ // 返回包含了原函数和新函数的"代理"函数
beforefn.apply( this, arguments ); // 执行新函数，修正this
return __self.apply( this, arguments ); // 执行原函数
}
};
Function.prototype.after = function( afterfn ){
var __self = this;
return function(){
var ret = __self.apply( this, arguments );
afterfn.apply( this, arguments );
return ret;
}
};
var func = function(){
console.log( 2 );
};
func = func.before(function(){
console.log( 1 );
}).after(function(){
console.log( 3 );
});
func();
（2）柯里化
一个currying函数首先会接受一些参数，接受了这些参数之后，该函数不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存了下来。待到函数真正需要求值的时候，之前传入的所有参数都会一次性用于求值。
一个经典的柯里化：
function curry(fn){
var arr1 = Array.prototype.slice.call(arguments,1);
return function(){
var arg2 = Array.prototype.slice.call(arguments);
var array = arr1.concat(arr2);
return fn.apply(null,array);
}
}
不断累积的柯里化：
var currying = function( fn ){
var args = [];//外层函数变量：用来累积
return function(){
if ( arguments.length === 0 ){
return fn.apply( this, args );
}else{
[].push.apply( args, arguments );
return arguments.callee;
}
}
};（3）uncurrying
在javascript中，当我们调用对象的某个方法时，其实不用关心对象原本是否被设计为拥有这个方法，这是动态类型语言的特点，也就是常说的鸭子类型思想。
同理，一个对象也未必只能使用它自己的方法，其实可以借用原本不属于他的方法： call apply
Function.prototype.uncurrying = function () {
var self = this;
return function() {
var obj = Array.prototype.shift.call( arguments );
return self.apply( obj, arguments );
};
};
var push = Array.prototype.push.uncurrying();
var obj = {
"length": 1,
"0": 1
};
push( obj, 2 );//将2使用push的方法作用到obj上
console.log( obj ); // 输出：{0: 1, 1: 2, length: 2}
5.函数节流
函数节流也用到了高阶函数的知识，因为比较重要，所以单开了一个标题。
javascript中的函数在大多数情况下都是由用户主动调用触发的，除非是函数本身的实现不合理。但是在一些少数情况下，函数可能被很频繁的调用，而造成大的性能问题。
（1）函数被频繁调用的场景
1.window.onresize事件
2.mousemove事件
3.上传进度(2)函数节流的原理
解决函数触发频率太高的问题，需要我们按照时间段来忽略一些事件请求。
（3）函数节流的代码实现
详情可以参考
Underscore.js#throttle
Underscore.js#debounce
简单实现：
将即将被执行的函数用steTimeout延时一段时间执行。如果该次延时执行还没有完成，就忽略掉接下来调用该函数的请求。
var throttle = function ( fn, interval ) {
var __self = fn, // 保存需要被延迟执行的函数引用
timer, // 定时器
firstTime = true; // 是否是第一次调用
return function () {
var args = arguments,
__me = this;
if ( firstTime ) { // 如果是第一次调用，不需延迟执行
__self.apply(__me, args);
return firstTime = false;
}
if ( timer ) { // 如果定时器还在，说明前一次延迟执行还没有完成
return false;
timer = setTimeout(function () { // 延迟一段时间执行
clearTimeout(timer);
timer = null;
__self.apply(__me, args);
}, interval || 500 );
};
};
window.onresize = throttle(function(){
console.log( 1 );
}, 500 );另一种实现函数节流的方法-分时函数
某些函数确实是用户主动调用的，但是因为一些客观的原因，这些函数会严重的影响页面的性能。
一个例子就是创建QQ好友列表。如果一个好友列表用一个节点表示，当我们在页面中渲染这个列表的时候，可能要一次性的网页面中创建成百上千个节点。
var ary = [];
for ( var i = 1; i <= 1000; i++ ){
ary.push( i ); // 假设ary 装载了1000 个好友的数据
};
var renderFriendList = function( data ){
for ( var i = 0, l = data.length; i < l; i++ ){
var div = document.createElement( 'div' );
div.innerHTML = i;
document.body.appendChild( div );
}
};
renderFriendList( ary );在短时间内网页面中大量添加DOM节点显然也会让浏览器吃不消。
这个问题的解决方案之一是下面的timeChunk函数：让创建节点的工作分批进行
//第一个参数是创建节点时需要的数据，第二个参数封装了创建节点逻辑的函数，第三个参数表示每一批创建节点的数量。
var timeChunk = function( ary, fn, count ){
var obj,
t;
var len = ary.length;
var start = function(){
for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){
var obj = ary.shift();
fn( obj );
}
};
return function(){
t = setInterval(function(){
if ( ary.length === 0 ){ // 如果全部节点都已经被创建好
return clearInterval( t );
}
start();
}, 200 ); // 分批执行的时间间隔，也可以用参数的形式传入
};
};
var ary = [];
for ( var i = 1; i <= 1000; i++ ){
ary.push( i );
};
var renderFriendList = timeChunk( ary, function( n ){
var div = document.createElement( 'div' );
div.innerHTML = n;
document.body.appendChild( div );
}, 8 );
renderFriendList();
6.惰性加载函数
在web开发中，因为浏览器之间的实现差异，一些嗅探工作总是不可避免。
var addEvent = function( elem, type, handler ){
if ( window.addEventListener ){
return elem.addEventListener( type, handler, false );
}
if ( window.attachEvent ){
return elem.attachEvent( 'on' + type, handler );
}
};这个函数的缺点是，当它每次被调用的时候都会执行里面的if条件分支。
下面这个函数虽然仍然有一些分支判断，但是在第一次进入条件分支之后，在函数内部就会重写这个函数，重写之后的函数就是我们希望的addEvent函数。
var addEvent = function(ele,type,handler){
if(window.addEventListener){
addEvent = function(ele,type,handler){
elem.addEventListener( type, handler, false );
}
}
if(window.attachEvent){
addEvent = function(ele,type,handler){
elem.attachEvent( 'on' + type, handler );
}
}
addEvent(ele,type,handler);
}
三：结语
文章介绍的都是JS需要掌握的重点又是难点的知识，需要多动手实践才能理解。有关相关知识的详细讲解，可以参考笔者的相关文章。当然 ，最好的方式是去谷歌然后自己动手实践。
