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

魏明发布于2019-08-21 16:23 / 2931人阅读

摘要：理解了这句话，我们就可以来看闭包了闭包前面说过，函数可以访问函数作用域链中的变量，但如果我们想在函数外访问函数内却不行了。

不管是闭包还是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关键字呢。

云服务器 GPU云服务器 js闭包的理解 jsp关键字this javascript闭包 javascript闭包详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88488.html

面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

cfanr 2019-08-20 16:33 评论0 收藏0
前端基础进阶（四）：详细图解作用域链与闭包

摘要：之前一篇文章我们详细说明了变量对象，而这里，我们将详细说明作用域链。而的作用域链，则同时包含了这三个变量对象，所以的执行上下文可如下表示。下图展示了闭包的作用域链。其中为当前的函数调用栈，为当前正在被执行的函数的作用域链，为当前的局部变量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初学JavaScrip...

aikin 2019-08-21 18:29 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0