网站地图    收藏   

主页 > 前端 > javascript >

JavaScript闭包使用方法详解

来源:自学PHP网    时间:2022-02-17 11:34 作者: 阅读:

[导读] 本文章来给各位同学介绍JavaScript闭包使用方法,有需要了解的朋友可进入参考。...

闭包就是一种在函数内访问和操作外部变量的方式,一般情况下,我们会在函数外部定义一些变量以供函数内部使用。


var a = 1;

function fn( arg ){

 var b =2;

 function fnInner ( arg ){

 console.log(a); //访问全局的变量

 console.log(b); //访问外部函数体内的变量

 console.log(arg); //访问函数自身的变量

 }

 fnInner(3);

}

fn函数的闭包引用了变量b,还有函数本身。fnInner函数引用了b,a,传递给它的参数。我们需要注意一点,虽然函数并没有特别创建一个变量来保存这些要引用的数据,但是要保存和引用这些变量还是会带来内存的消耗。


私有变量

JavaScript语言本身并没有提供创建私有变量的方式,但是我们知道,函数外的变量是无法访问函数内部的变量的,这意味着我们可以这样创建私有变量:



function(){

 this.public = 1; //public在函数外面可以访问

 var private = 1;//private变量在函数外部无法访问

}

回调函数和定时器

有时候我们会这样写一个回调函数



var a = 1;

jQuery.ajax({

 url : "test.html",

 success : function(html){

 console.log(a);

 }

})

类似的的还有在设置定时器的时候,我们在1000ms后将一个函数插入队列等待执行



var a = 1;

setTimeout(function(){

 console.log(a);

},1000);

a = a + 1;

ajax回调里的结果可能比较容易猜到,匿名函数本身是一个闭包,保存了变量a的值,从而可以访问。而第二个定时器回调主要要说明的就是,闭包所引用的值是在执行期生成的,而我们虽然在a = a+1前面定义了匿名函数,但是执行的时候因为匿名函数被插入到执行队列的尾部,那么a = a +1会先执行,然后在执行匿名函数,也就是说这个例子返回的值为2。

改变闭包的context

有这么一段代码



var Button = {

  click: function(){

    console.log(this);

    this.clicked = true;

  }

};

var elem = document.querySelector("body");

elem.addEventListener("click", Button.click, false);

我们的目的是通过点击body来改变Button对象的clicked值,但是失败了


虽然我们在定义的时候试图让this指向了Button,但是在addEventListener之后,this又被指向到elem。


解决方法有很多。


在支持Function.prototype.bind方法的浏览器里,我们只需要简单地修改一下代码即可



var Button = {

  click: function(){

    console.log(this);

    this.clicked = true;

  }

};

var elem = document.querySelector("body");

elem.addEventListener("click", Button.click.bind(Button), false);

注:Function.prototype.bind方法参考ECMAScript 262 15.3.4.5中的说明,作用和apply类似,但是不会执行原函数


如果不支持Function.prototype.bind,那么,我们可以自己实现一个bind函数。



function bind(context, name){

  return function(){

    return context[name].apply(context, arguments);

  };

}

var Button = {

  click: function(){

    console.log(this);

    this.clicked = true;

  }

};

var elem = document.querySelector("body");

elem.addEventListener("click", bind(Button, "click"), false);


本文参考自John Resign的《secrets of the JavaScript ninjia》


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论