《javascript设计模式与开发实践》阅读笔记（2）—— this，闭包与高阶函数

this

  this总是指向一个对象，有四种情况
1. 作为对象的方法调用。
2. 作为普通函数调用。
3. 构造器调用。
4. Function.prototype.call 或Function.prototype.apply 调用。

1. 作为对象的方法调用

当函数作为对象的方法被调用时，this 指向该对象：

var obj = {
            a: 1,
            getA: function(){
                alert ( this === obj ); // 输出：true
                alert ( this.a ); // 输出: 1
            }
        };

obj.getA();

2. 作为普通函数调用

当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的this总是指向全局对象。在浏览器的JavaScript 里，这个全局对象是window 对象。

window.name = 'globalName';

var getName = function(){
　　return this.name;
};

console.log( getName() ); // 输出：globalName

特别点的例子：

window.name = 'globalName';
var myObject = {
3 　　name: 'sven',
4 　　getName: function(){
5 　　　　return this.name;
6 　　}
7 };
8 var getName = myObject.getName;    //这里是把字面量给了getName
9 console.log( getName() ); // globalName

3. 构造器调用

当用new 运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this就指向返回的这个对象，见如下代码：

var MyClass = function(){
    this.name = 'sven';
};

var obj = new MyClass();
alert ( obj.name ); // 输出：sven

坑：

var MyClass = function(){
      this.name = 'sven';
      this.app="ok";
      return { // 返回一个对象
         name: 'anne',
         haha:this.app;
    }
};
var obj = new MyClass();
 
console.log ( obj.name ); //  anne 
console.log(obj.app)    //  undefined
console.log(obj.haha)  //  ok   
 

返回一个对象时，或者说接口的时候，内部的属性就无法直接访问，除非接口当中包含，这个和封装的思路是一样的。

4. Function.prototype.call 或Function.prototype.apply 调用

可以动态地改变传入函数的this：

var obj1 = {
    name: 'sven',
    getName: function(){
        return this.name;
    }
};
var obj2 = {
    name: 'anne'
};

console.log( obj1.getName() ); // 输出: sven
console.log( obj1.getName.call( obj2 ) ); // 输出：anne

call 和apply的异同

同：第一个参数指定了函数体内this 对象的指向。
异：apply第二个参数为数组或者是类数组，call则是参数依次写出来，参数数量不固定

特别：如果我们传入的第一个参数为null，函数体内的this 会指向默认的宿主对象，在浏览器中则是window

var obj1 = {
    name: 'sven'
};
var obj2 = {
    name: 'anne'
};
window.name = 'window';
var getName = function(){
    alert ( this.name );
};
getName(); // 输出: window
getName.call( obj1 ); // 输出: sven
getName.call( obj2 ); // 输出: anne

call apply bind 的区别

call和apply都是直接调用，而bind返回的是一个函数，调用的话还需要加括号。

闭包

变量的作用域

以函数为边界，外界无法直接访问到

变量的生存周期

全局变量的生存周期是永久的，除非我们主动销毁。在函数内用var关键字声明的局部变量来说，当退出函数时，这些局部变量即失去了它们的价值，它们都会随着函数调用的结束而被销毁。

闭包实践 阶乘函数：

var mult = function(){
    var a = 1;
    for ( var i = 0, l = arguments.length; i < l; i++ ){
        a = a * arguments[i];
    }
    return a;
};

初步的函数无法记录已经计算过的阶乘，也就是说每次输入之后都需要再次计算，这里引入缓存机制，实质就是用一个对象把键值存进去

var cache = {};  //存键值的对象 

var mult = function(){
    var args = Array.prototype.join.call( arguments, ',' );  //把参数变成字符串

    if ( cache[ args ] ){    //如果有这个属性，返回这个属性值
        return cache[ args ];
    }

    var a = 1;
    for ( var i = 0, l = arguments.length; i < l; i++ ){
        a = a * arguments[i];
    }

    return cache[ args ] = a;    //计算的值赋给缓存的对象
};

这步改造实现了缓存，但是多了一个全局对象，理想状态应该所有的实现细节都放在函数内部

var mult = (function(){
    var cache = {};   //存键值的对象 
    return function(){
        var args = Array.prototype.join.call( arguments, ',' );  //把参数变成字符串
        if ( args in cache ){   //如果有这个属性，返回这个属性值
            return cache[ args ];
        }
        var a = 1;
        for ( var i = 0, l = arguments.length; i < l; i++ ){
            a = a * arguments[i];
        }
        return cache[ args ] = a;  //计算的值赋给缓存的对象
    }
})();

这步利用闭包缓存了计算的值，用匿名函数保护了变量，但是返回的函数暴露了很多没有必要的东西，应该把实现放在主体，再提炼一下

var mult = (function(){
    var cache = {};
    var calculate = function(){ // 封闭calculate 函数，这里是计算实现部分
        var a = 1;
        for ( var i = 0, l = arguments.length; i < l; i++ ){
            a = a * arguments[i];
        }
        return a;
    }
    return function(){
        var args = Array.prototype.join.call( arguments, ',' );  //这里应该是有意暴露这个变量
        if ( args in cache ){
            return cache[ args ];
        }
        return cache[ args ] = calculate.apply( null, arguments );   //函数定义时未提供形参，这里利用apply使用函数
    }
})();

闭包与内存管理

有种说法是闭包会引起内存泄漏，因为垃圾回收机制无法回收变量，但是使用闭包本身就是为了使用这些变量，或者留着以后使用这些变量，把这些变量放在闭包中和放在全局作用域，对内存方面的影响是一致的。
如果想回收这些变量，可以手动设为null。而由于循环引用导致的内存泄漏本质上也不是闭包的问题，解决方法也是设置变量为null。

高阶函数

满足下面任一条件就是高阶函数。
函数可以作为参数被传递 或者 函数可以作为返回值输出。

作为参数被传递，例如回调函数。
作为返回值输出，例如接受不同参数生成不同类型的判断器

例1：

var Type = {};
    for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){
    (function( type ){
        Type[ 'is' + type ] = function( obj ){
            return Object.prototype.toString.call( obj ) === '[object '+ type +']';
        }
    })( type )
};

Type.isArray( [] ); // 输出：true
Type.isString( "str" ); // 输出：true

例2：既作为参数，又作为返回值

var getSingle = function ( fn ) {    //传入函数作为参数
    var ret;
    return function () {
        return ret || ( ret = fn.apply( this, arguments ) );  //闭包，保留ret的值，ret存在就返回ret,否则执行一次fn,并把fn的返回值赋给ret，再返回ret，即ret存储的是fn的返回值
    };
};

var getScript = getSingle(function(){
    return document.createElement( 'script' );
});

var script1 = getScript();
var script2 = getScript();

alert ( script1 === script2 );  //true  对象类型都是引用类型，所以两个指向的是同一个对象

这里利用闭包让ret变量不会被回收；fn只是个字面量，并没有执行，用apply的方式，可以执行fn并获得它的结果存到ret里面；所以getScript的执行结果是一个script节点，因为第一次执行后ret已经有值了，所以第二次还是返回那个值，无论执行几次，返回的对象都是同一个。这个就是单例模式的一个简单例子。

AOP是什么？

AOP（Aspect Oriented Programming，面向切面编程），其主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，再通过“动态织入”的方式掺入业务逻辑模块中。无关的功能包括日志统计、安全控制、异常处理等。

AOP的好处

可以保持业务逻辑模块的纯净和高内聚性，还可以很方便地复用日志统计等功能模块。

js实现AOP

Function.prototype.before = function( beforefn ){
    var __self = this; // 保存原函数的引用
    return function(){ // 返回包含了原函数和新函数的"代理"函数
        beforefn.apply( this, arguments ); // 执行新函数，修正this，this指向window函数
        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(){  //定义一个func函数
    console.log( 2 );
};

func = func.before(function(){  //重新赋值func函数
    console.log( 1 );
}).after(function(){
    console.log( 3 );
}).before(function(){
    console.log( 0 );
});


func();  //执行func  0  1   2   3

这段代码实现了装饰者模式，这里在Function.prototype上添加了两个方法，因为函数都继承Function.prototype，所以所有函数都具有这两个方法；方法的内部返回了一个函数，也就是说调用完这两个方法后，返回的还是一个函数可以接着调用这两个方法。

分析这段代码需要把函数赋值和函数执行分开看。
第一步明确before和after的职责，bofore是先执行参数函数，再执行调用它的函数（本身）；after是先执行调用它的函数（本身），再执行参数函数。

然后分析func这个函数。func可以拆解成这样

var aa=func.before(function(){  
    console.log( 1 );
});

var bb=aa.after(function(){
    console.log( 3 );
});

func=bb.before(function(){
    console.log( 0 );
});

所以func相当于

func=function(){
    console.log( 0 );
    bb();
}

解析bb()

func=function(){
    console.log( 0 );
    aa();
    console.log( 3 );
}

解析aa()

func=function(){
    console.log( 0 );
    console.log( 1 );
    console.log( 2 );  //老的func
    console.log( 3 );
}

所以，执行func的结果为 0 1 2 3