一次搞定闭包和this

阅读时长 3 分钟读完

在前端开发中,闭包和this是经常被提及的概念。然而,它们都有着不少的难点,很多初学者也容易混淆或理解不充分。本文将会分别介绍闭包和this,并通过实例演示如何使用它们。

闭包

闭包是指一个函数能够访问它定义时所在的词法环境中的变量。简单来说,闭包就是在函数内部创建一个新的作用域,在其中定义的变量对外部仍然可见。这一特性使得我们能够创建私有变量、模拟面向对象等等。

创建闭包

下面是一个例子,我们通过函数makeCounter来创建了一个闭包:

-- -------------------- ---- -------
-------- ------------- -
  --- ----- - --
  ------ ---------- -
    ------ --------
  -
-

----- ------- - --------------
----------------------- -- -- -
----------------------- -- -- -

在这个例子中,函数makeCounter返回了一个函数,这个函数可以访问并修改makeCounter内部的变量count。当我们把返回的函数存储到变量counter中时,就创建了一个闭包。

使用闭包

闭包可以让我们在函数内部创建私有变量,比如:

-- -------------------- ---- -------
-------- ---------------- -
  ------ ---------- -
    --------------- ---- -- ----------
  -
-

----- ------- - --------------------
----- ------- - ------------------

---------- -- -- -- ---- -- -----
---------- -- -- -- ---- -- ---

在这个例子中,我们通过makePerson函数创建了两个闭包,它们分别保存了不同的name变量。当我们调用闭包时,它们都会访问自己内部保存的name变量并输出相应的字符串。

注意事项

闭包虽然强大,但也需要注意一些问题。下面列举了一些常见的注意事项:

  • 每次调用函数都会创建一个新的闭包,并保存它内部的所有变量。因此,如果闭包保存了大量数据,可能会导致内存占用过高。
  • 由于闭包可以访问外部作用域中的变量,因此当闭包保存了对外部变量的引用时,这些变量不会被垃圾回收器回收。因此,在使用闭包时需要特别注意内存泄漏问题。

this

this是一个比较复杂的概念,它指的是当前函数执行时所在的上下文对象。具体来说,this的值取决于函数的调用方式。

this的取值

下面是一些常见的this取值情况:

  • 在全局环境下(没有引入模块化),this指向全局对象,比如window
  • 在函数内部,如果函数是作为对象的方法被调用的,this指向这个对象。
  • 在函数内部,如果函数使用new关键字调用,this指向实例化后的新对象。
  • 在函数内部,如果函数使用callapplybind等函数调用方法,this指向第一个参数传入的对象。

下面是一些例子,演示了不同情况下this的取值:

-- -------------------- ---- -------
-- ----
---------------- --- -------- -- -- ----

-- ----
----- --- - -
  ----- --------
  ------- -
    ------------------- -- ---- -- ---------------
  -
--
------------ -- -- ------ -- ---- -- -----

-- -- --- ---
-------- ------------ -
  --------- - ----

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈