浅析 JavaScript 中 var that=this
在 JavaScript 中,经常会遇到需要在一个函数内部访问该函数外部的对象的情况。为此,开发者们通常采用 var that = this
的方法来保存 this
的值,并在函数内部使用 that
来访问该对象。本文将深入探讨这种方法的原理、使用场景以及注意事项,希望对读者有所启发。
原理
在 JavaScript 中,函数被调用时会创建一个执行上下文(execution context),其中包含了该函数的所有变量和函数定义。同时,JavaScript 还有一个特殊的变量 this
,指向当前正在执行的代码所属的对象。但是,有时候我们需要在函数内部访问该函数外部的对象,例如:
-------- ------------ - --------- - ----- ------------- - ---------- - ------------------- - - ----------- -- - --- ------ - --- ---------------- --------------------------- ------
以上代码中,setTimeout
函数会在 1 秒后调用 person.sayHello
方法。但是在 sayHello
方法中,this
并不是指向 person
对象,而是指向 window
(全局对象),因此输出的结果是 "Hello, undefined"
。这是因为在 setTimeout
执行 sayHello
方法时,this
已经不再指向 person
对象了。
为了解决这个问题,我们可以在 Person
构造函数中使用 var that = this
来保存 this
的值:
-------- ------------ - --- ---- - ----- --------- - ----- ------------- - ---------- - ------------------- - - ----------- -- - --- ------ - --- ---------------- --------------------------- ------
在以上代码中,that
变量保存了 this
的值,而 sayHello
方法中则使用了 that
变量来访问 name
属性。因此,输出的结果是 "Hello, Alice"
。
使用场景
var that = this
的用法通常出现在以下场景中:
- 在对象方法内部访问该对象的其他方法或属性时;
- 在回调函数中访问该回调函数外部的对象时。
例如,在以下代码中,var that = this
的用法解决了在回调函数中无法访问 person
对象的问题:
-------- ------------ - --- ---- - ----- --------- - ----- -------------------- - ---------- - --------------------- - ------------------- - - ----------- -- ------ -- - --- ------ - --- ---------------- -------------------------
在以上代码中,waitAndSayHello
方法中创建了一个 1 秒后执行的回调函数,该函数内部无法直接访问 person
对象。但是,由于使用了 var that = this
的方法,回调函数中可以通过 that
变量访问 person
对象的属性。
注意事项
在使用 var that = this
的方法时,需要注意以下几点:
- 该方法只适用于使用函数定义语法创建的对象(即使用
function
关键字或箭头函数创建的对象),不适用于使用类定义语法创建的对象(即使用class
关键字创建的对象); - 如果在函数内部定义了局部变量
that
,将会覆盖外部的that
变量,导致出现错误; - 使用
var that = this
的方法会占用额外的内存空间,因此在不必要的情况下应避免使用。
结论
var that = this
是一种有效解决 JavaScript 中函数内部访问外部对象的技巧。它适用于函数定义语
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/1979