ES6 中如何处理 this 指向
在 JavaScript 中,this 指向在很多情况下是非常重要的。ES6(ES2015)为 this 指向提供了一些新的解决方案。在本文中,我们将讨论 ES6 中的箭头函数、bind()、call() 和 apply() 方法等方法,来掌握 this 指向的使用。
箭头函数
箭头函数是 ES6 中的一个新特性,它可以用来更好地处理函数中的 this 指向问题。
在普通的函数中,this 指向是基于如何调用函数的。而在箭头函数中,this 的指向是由箭头函数所处的词法环境决定的。在箭头函数中,this 绑定的是箭头函数声明时所在的作用域的 this 值,而不是箭头函数在执行时所在的作用域的 this 值。
以下是箭头函数的使用示例:
--- ----- - - ------ -- --------- ---------- - --- ----- - -- -- ------------------------ -------- - -- ----------------- -- -- -
在上面的示例中,我们使用箭头函数来解决了普通函数中 this 指向的问题。箭头函数 this 指向是由词法环境来决定的,因此 inner 函数中的 this 指向的是 myObj 的对象本身,而不是指向全局作用域。
bind()
bind() 方法可以让我们手动改变 this 的指向。
bind() 方法返回一个新的函数,这个函数的 this 值被绑定到 bind() 方法的第一个实参的值,而且 bind() 方法的返回值是可被执行的函数。
以下是一个使用 bind() 方法的示例:
--- ----- - - ------ -- --------- ---------- - -------- ------- - ------------------------ - --- ------- - ------------------ ---------- - -- ----------------- -- -- -
在上面的示例中,我们可以看到,我们手动将 inner 函数中的 this 值绑定到了 myObj 对象,因此在 myInner 被执行的时候,this 指向的就是 myObj 对象了。
call() 和 apply()
与 bind() 方法一样,call() 和 apply() 方法也可以手动改变 this 的指向。
call() 方法会立即执行一个函数,它将 this 指向传递给它的第一个实参的值,而余下的实参则是被传递到函数中。
apply() 方法的行为和 call() 一样,除了 apply() 方法接受的实参是以一个数组的形式传递的。
以下是使用 call() 和 apply() 的示例:
--- ----- - - ------ -- --------- ---------- - -------- ------- - ------------------------ - ------------------ - -- ----------------- -- -- -
在以上示例中,我们在 inner 函数中使用了 call() 方法将内部的 this 绑定到了 myObj 对象。
结论
箭头函数提供了更加简单和易于理解的 this 指向方式。如果可使用箭头函数解决 this 指向问题,尽量使用箭头函数。
如果箭头函数无法满足需求,可以采用 bind()、call() 和 apply() 等方法来手动改变 this 的指向。
除此之外,避免在定时器和事件处理程序中使用 this,因为它们指向的是调用它们的全局上下文。可以通过将它们存储在一个变量中来解决这个问题。
--- ----- - - ------ -- --------- ---------- - --- ---- - ----- --------------------- - ------------------------ -- ------ - -- ----------------- -- -- --- -
在以上示例中,变量 self 存放了 myObj 对象,因此在 setTimeout() 函数的环境中也可以使用其内部的值。
通过以上示例,我们可以学习如何在 ES6 中更好地处理 this 指向问题。这对于前端工程师们来说是一个很重要的基础知识。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671b0a0a9babaf620fa70af1