hoyong

导航

初学者彻底理解javascript闭包以及this关键字(转)

不管是闭包还是this关键字,都是困扰JS初学者的比较难懂的东西,如果你对它们的认识还不足够清晰,那么现在就一起把它们掌握掉。还是那句话,我们从最基本的开始,建立起一个非常清晰的知识结构,好了,开始吧 ?

闭包

当然我们今天说的是javascript里的闭包。要学习闭包,首先需要明白函数和变量,其次要知道变量和函数的一些特性。来复习一下:

变量

变量是那些会变化的东西(就这么简单),变量有一个值,我们能改变这个值。我们先声明一个变量名,然后对这个变量赋值,就创建了一个变量。变量分按作用域(这个很重要后面会讲到)为全局变量和局部变量。

函数

我们最初学习的是通过函数声明来创建一个函数,即首先是 function 关键字,然后是函数的名字,这就是指定函数名的方式。另一个方式叫做函数表达式,最常见的形式是这样的:

var functionName = function(arg0, arg1, arg2){
//函数体
};

我们创建的这个函数叫做匿名函数,因为 function 关键字后面没有标识符,没有名字嘛。
结合函数和作用域,我们来小小地总结一下:函数内可以读取函数外的变量,而函数外却读取不了函数内部的变量(局部变量)。理解了这句话,我们就可以来看闭包了:

闭包

前面说过,函数可以访问函数作用域链中的变量,但如果我们想在函数外访问函数内却不行了。比如这个例子:

  function myfunction(){
    var num=21;
  }
  alert(num); // error

眼前就有一个变量,尴尬的是我们调用不了。
想想办法:根据函数可以访问函数作用域链中的变量这句话,如果我们在函数内再定义一个函数,让这个新函数访问旧函数里的变量,然后返回这个函数,然后直接运行那个旧函数不就可以了吗!

function myfunction(){
    var num=21;
    function newfunction(){
      alert(num); 
    }
    return newfunction;
  }
  var result=myfunction();
  result(); // 21

没有任何问题,在函数外面成功访问到了num变量。
恭喜你,你刚刚创建了一个闭包。。。是的,这个就是闭包。闭包就是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数

明白了闭包,再来看为什么可以把闭包和this放一起理解:

this关键字

首先你需要记住的是:this的对象是运行时基于函数的执行环境绑定的,它的指向完全取决于函数的调用方式

不多说来看两个经典例子:

第1个例子

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    return function(){
      return this.name;
    };
  }
};
alert(object.getNameFunc()()); //"The Window"(在非严格模式下)

第2个例子

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

关于这两个例子,我个人感觉《Javascript高级程序设计》这本书里讲得不够明确。我的理解是第1个例子里是在全局环境中调用了这个函数,所以this关键字最终指向了全局对象The Window,从而利用闭包在全局环境中调用了The Window;第2个例子不同,它返回的是that的name,而this对象被赋值给了that变量,就是说this对象和that捆绑在了一起,那么在调用这个方法时相当于在object里利用闭包去寻找最终变量(that是引用着object的),所以只能找到My Object变量。

这两个例子非常好,怎么个好法呢。它们完整解释(展现)了闭包的作用机理或者说过程,同时又证明了this关键字在函数被不同的环境调用时的指向是不一样的。

怎么样,看到这里是不是彻底明白了闭包和this关键字呢。

 

================================================================================================================

 

《Javascript高级程序设计》这本书里提到,每个函数在被调用时都会自动取得两个特殊变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量。

 

所以是不是可以理解为会一直访问到全局变量才会停止呢?

posted on 2019-04-26 09:43  hoyong  阅读(212)  评论(0编辑  收藏  举报