JS高程：读书摘要（四）函数

2018-12-25  本文已影响0人  Upcccz

函数表达式

函数表达式和函数声明的区别
sayHi(); // 正常弹出Hi
function sayHi(){
  alert("Hi!");
} 

sayHi1();// 报错 sayHi1 is not a function
var sayHi1 = function(){
  alert("Hi!");
}
递归

递归函数是在一个函数通过名字调用自身的情况下构成的。如下所示的阶乘函数和斐波那契数列求第n项值。

function fn(num){
  return num <=1 ? 1 : num * fn(num-1)
}
//  fn(5) = 120  --  5*4*3*2*1
function fn2(n){
  return n > 2 ? fn2(n-1) + fn2(n-2) : 1 
}
// fn(8) = 21 -- 1 1 2 3 5 8 13 21

需要注意的是，在函数内部调用函数本身，是使用函数名，这个函数名此时是一个全局变量，一旦被置空，则递归时则会报错。

var anotherFactorial = fn;
fn = null;
alert(anotherFactorial(4)); //出错！

可以使用arguments.callee来解决这个问题

function fn(num){
  return num <=1 ? 1 : num * arguments.callee(num-1)
}

而在严格模式下，不能访问arguments.callee，可以使用命名函数表达式来解决这个问题。外部通过变量factorial来访问，内部通过fn来访问

var factorial = function fn (num)  {
    return num <=1 ? 1 : num * fn(num-1)
}

这个属性中保存着调用当前函数的函数的引用，如果是在全局作用域中调用当前函数，它的值为null。

function outer(){
    inner();
}
function inner(){
    alert(inner.caller);// 会弹出outer函数的函数体
    // alert(arguments.callee.caller)  与上一样  耦合性更低
}
outer();
尾递归

尾递归会比普通的线性递归多一个参数，这个参数同时还是最终结果，相当于最后不需要在每次递归结果后再去计算，之前的阶乘函数和斐波那契数列可以用尾递归来实现。

function fn(n,res=1){
   return n<=1 ? res : fn(n-1,n*res)
}

function fn2(n,a=0,b=1){
  return n > 2 ? fn2(n-1,b,a+b) : b
}

如下两张图对比，尾递归一定程度是比普通递归更优的。


递归.jpg 尾递归.png
闭包
function outer() {
    var i = 0;
    var inner = function(){
        i++;
        console.log(i)
    }
    return inner
}
var a = outer()
a(); // 1
a(); // 2 inner相当于被全局变量a一直挂钩，所以inner的作用域一直存在。

由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多，我们建议读者只在绝对必要时再考虑使用闭包。

function createFunctions(){
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}
var newArr = createFunctions();
console.log(newArr[0]())  // 10 ，此时的i只记住了i最终的值。
//  result这个数组是一个由10个函数组成的数组
//  每个函数都返回了10，期望是每个函数按照下标索引返回0-9；


function createFunctions(){
    var result = new Array();
    for (var i=0; i < 10; i++){
      result[i] = (function(num){
           return num 
      })(i);
    }
    return result; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
闭包与this对象
var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        console.log(this.name) //  "My Object", 此时this指向object
        return function(){
        // 这里的this已经指向已经改变了
        // 使用object.getNameFunc()可以返回这个匿名函数
        // 此时的this就会指向调用这个匿名函数的对象
            return this.name;
        };
    }
};
alert(object.getNameFunc()()); //"The Window"（在非严格模式下）
// 等同于 alert弹出 function(){return this.name;}();

针对这种情况，可以将外部函数的this用内部函数能访问到的局部变量存储起来。

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        var that = this
        return function(){
            return that.name;
        };
    }
};
alert(object.getNameFunc()()); //"My Object"
内存泄漏

如果闭包的作用域链中保存着一个HTML 元素，那么就意味着该元素将无法被销毁。

function assignHandler(){
    var element = document.getElementById("someElement");
    element.onclick = function(){
        alert(element.id);
    };
}

由于匿名函数保存了一个对assignHandler()的活动对象element.id的引用，因此就会导致无法减少element的引用数。只要匿名函数存在，element 的引用数至少也是1，因此它所占用的内存就永远不会被回收。就造成了内存泄漏

function assignHandler(){
    var element = document.getElementById("someElement");
    var id = element.id;
    element.onclick = function(){
        alert(id);
    };
    element = null;
}

在上面的代码中，通过把element.id的一个副本保存在一个变量中，并且在闭包中引用该变量消除了循环引用。但仅仅做到这一步，还是不能解决内存泄漏的问题。必须要记住：闭包会引用包含函数的整个活动对象，而其中包含着element。即使闭包不直接引用element，包含函数的活动对象中也仍然会保存一个引用。因此，有必要把element 变量设置为null。这样就能够解除对DOM对象的引用，顺利地减少其引用数，确保正常回收其占用的内存。

IIFE(立即执行函数)

定义并立即调用了一个匿名函数。将函数声明包含在一对圆括号中，表示它实际上是一个函数声明。而紧随其后的另一对圆括号会立即调用这个函数。这样就构建了一个私有作用域。

(function(){
  //这里是块级作用域
})();

下面的例子，就可以看出IIFE的优势了。

(function() {
    var i = 0;
    i++;
    console.log(i)
})()

这种做法可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链了，即用即毁。

模块模式

单例创建私有变量和特权方法。所谓单例（singleton），指的就是只有一个实例的对象。JavaScript 是以对象字面量的方式来创建单例对象的。

var singleton = {
    name : value,
    method : function () {
        //这里是方法的代码
    }
};

模块模式通过为单例添加私有变量和特权方法能够使其得到增强

var singleton = function(){
    //私有变量和私有函数
    var a = 10;
    function fn(){
        return false;
    }
    return {
        b: true,
        fn2 : function(){
            a++;
            return fn();
        }
    };
 }()   // 立即执行函数

返回的对象字面量中只包含可以公开的属性和方法，由于这个对象是在匿名函数内部定义的，因此它的公有方法有权访问私有变量和函数。从本质上来讲，这个对象字面量定义的是单例的公共接口。
又比如

var application = function(){
    //私有变量和函数
    var components = new Array();
    //初始化
    components.push(new BaseComponent());
    //公共
    return {
        getComponentCount : function(){
            return components.length;
        },
        registerComponent : function(component){
            if (typeof component == "object"){
                components.push(component);
            }
        }
    };
}();

在创建这个用于管理组件的对象的过程中，首先声明了一个私有的components数组，并。而返回对象的getComponentCount()和registerComponent()方法，都是有权访问数组components的特权方法。前者只是返回已注册的组件数目，后者用于注册新组件。
简言之，如果必须创建一个对象并以某些数据对其进行初始化，同时还要公开一些能够访问这些私有数据的方法，那么就可以使用模块模式。模块化开发

如果前面演示模块模式的例子中的application 对象必须BaseComponent 的实例，那么就可以使用以下代码。

var application = function(){
    //私有变量和函数
    var components = new Array();
    //初始化
    components.push(new BaseComponent());
    //创建application 的一个局部副本
    var app = new BaseComponent();
    //公共接口
    app.getComponentCount = function(){
        return components.length;
    },
    app.registerComponent = function(component){
        if (typeof component == "object"){
            components.push(component);
        }
    }
    return app
}();

在这个重写后的应用程序（application）单例中，首先也是像前面例子中一样定义了私有变量。主要的不同之处在于命名变量app的创建过程，因为它必须是BaseComponent 的实例。这个实例实际上是application 对象的局部变量版。此后，我们又为app对象添加了能够访问私有变量的公有方法。最后一步是返回app对象，结果仍然是将它赋值给全局变量application。

小结

1、当在函数内部定义了其他函数时，就创建了闭包。闭包有权访问包含函数内部的所有变量，原理如下。

2、使用闭包可以在JavaScript 中模仿块级作用域(IIFE)，要点如下。

3、闭包还可以用于在对象中创建私有变量，相关概念和要点如下。

JavaScript 中的函数表达式和闭包都是极其有用的特性，利用它们可以实现很多功能。不过，因为创建闭包必须维护额外的作用域，所以过度使用它们可能会占用大量内存。

上一篇 下一篇

猜你喜欢

热点阅读