美文网首页
JS高程:读书摘要(四)函数

JS高程:读书摘要(四)函数

作者: Upcccz | 来源:发表于2018-12-25 15:07 被阅读0次

函数表达式

函数表达式和函数声明的区别
  • 函数声明提升(function declaration hoisting),意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。
  • 函数表达式有的是变量声明提升。
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)
}
  • caller属性

这个属性中保存着调用当前函数的函数的引用,如果是在全局作用域中调用当前函数,它的值为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的作用域一直存在。

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

  • 作用域链的这种配置机制引出了一个值得注意的副作用,即闭包只能取得包含函数中任何变量的最后一个值,可以使用IIFE(立即执行函数)来解决这一弊端。
  • 使用立即执行函数的好处:通过定义一个匿名函数,创建了一个新的函数作用域,相当于创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏污染全局的命名空间。此时若是想访问全局对象,将全局对象以参数形式传进去即可。
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 中没有正式的私有对象属性的概念,但可以使用闭包来实现公有方法,而通过公有方法可以访问在包含作用域中定义的变量。
  • 有权访问私有变量的公有方法叫做特权方法。可以使用构造函数模式(利用this)、原型模式(使用prototype)来实现自定义类型的特权方法,也可以使用模块模式、增强的模块模式来实现单例的特权方法。

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

相关文章

网友评论

      本文标题:JS高程:读书摘要(四)函数

      本文链接:https://www.haomeiwen.com/subject/mrsflqtx.html