5件关于JavaScript中this参数的事

前言：搬运这篇文章的目的，无非是早上起来想填补一下不扎实的根基

点击关注👉 大前端私房菜 2022-11-17 08:00 发表于北京

this 关键字是 JavaScript 中最令人困惑的部分之一，本文试图通过介绍有关它的五个重要事项来阐明其目的和用法。

1、它允许访问同一对象上的其他属性

在 JavaScript 中，函数可以是独立的单元，但它们也可以用作对象的值。考虑下一个对象。

const obj = {
 msg: 'Hi',
 logMessage: function(){}
}

logMessage 属性存储一个函数，logMessage 是一种方法。

logMessage 函数如何访问同一对象上的其他成员？

这是这个伪参数变得有用的地方，它允许访问同一对象上的其他成员。

const obj = {
  msg: 'Hi',
  logMessage: function(){
    console.log(this.msg);
  }
}
obj.logMessage();
//'Hi'

在 logMessage 方法中，this 关键字用于访问同一对象的 msg 属性。

基本上，这就是在 JavaScript 中使用 this 关键字的原因，它允许访问其他拥有或继承的属性。

这种行为只有一个条件，函数应该作为方法调用，而不是作为函数调用。

2、它取决于函数的调用方式而不是函数的定义位置

考虑以下访问 this 参数的函数。

this.msg = "Parent";
function logMessage(){
  console.log(this.msg);
}

在下一个示例中，对两个对象使用相同的函数。

const obj = {
  msg: 'Hi',
  logMessage
}
const newObj = {
 msg: 'Hello',
 logMessage
}

这个变量引用的对象是什么？

这取决于函数的调用方式，而不是函数的定义位置。

当 logMessage 作为 obj 对象上的方法调用时，它引用该对象。

obj.logMessage();
//'Hi'

当它作为 newObj 对象上的方法被调用时，它指向它。

newObj.logMessage();
//'Hello'

请考虑以下示例，其中 logMessage 属性存储在 obj 对象内定义的函数。

const obj = {
  msg: 'Hi',
  logMessage: function(){
    console.log(this.msg);
  }
}

logMessage 中的 this 参数是否总是引用 obj 对象，因为它是在该对象中定义的？

答案是，NO。

下面是调用 logMessage 并使用 call 方法传递由 this 参数引用的不同对象的示例。

const newObj = {
  msg: 'Hello'
}
obj.logMessage.call(newObj);
//'Hello'

同样可以使用 apply 方法来完成，我们甚至可以强制它使用空对象运行，这次函数记录未定义。

obj.logMessage.apply({});
//undefined

3、与函数形式一起使用时，它指向其他东西

函数不一定是对象的一部分，它们可以是独立的单元，因此，可以用函数形式调用。

考虑下一个例子。

const obj = {
  msg: 'Hi',
  logMessage: function(){
    console.log(this.msg);
  }
}
const logMessage = obj.logMessage;
logMessage();
//undefined

logMessage 中的 this 不依赖于函数的定义位置，在这种情况下是在 obj 对象中。

这取决于如何调用 logMessage，在前面的示例中，logMessage 被调用为函数而不是方法。这指向了一些意想不到的东西，this.msg 给出了未定义的内容。

这是另一个例子。

const obj = {
  msg: '',
  logMessage: function(){
    this.msg = 'Hi';
    function logSomething(){
      console.log(this.msg);
    }

    logSomething();
  }
}
obj.logMessage();
//undefined

logMessage 作为方法调用（obj.logMessage()），但 logSomething 作为函数调用。因为 logSomething 不是作为方法调用，而是作为函数调用，所以，在其中 this 指向未例外的东西。在这种情况下，this.msg 给出未定义。

如果您希望 this 引用正确的对象，请确保始终将 logMessage 作为方法调用。

4 、箭头函数没有this

确实箭头函数没有自己的 this。它们实际上是用来解决我们之前在方法内部调用内部函数时遇到的问题。

检查下一个示例。

const obj = {
  logMessage: function(){
    const msg = 'Hi';
    const logSomething = ()=>{
      console.log(msg);
    }

    logSomething();
  }
}
obj.logMessage();
//'Hi'

logSomething 是否将 msg 作为变量？不。

logSomething 在尝试访问它没有的变量时会发生什么？

它向下看它的父级元素来找到变量并使用它。

据说箭头函数没有自己的 this，它实际上是什么意思？

这意味着它看不起它的父级元素来找到变量并使用它。

看下面的例子。

const obj = {
  msg: '',
  logMessage: function(){
    this.msg = 'Hi';
    const logSomething = ()=>{
      console.log(this.msg);
    }

    logSomething();
  }
}
obj.logMessage();
//'Hi'

logSomething 没有这个参数，与从外部环境中使用的其他变量和参数一样，它向下查看链并在其父级中找到它并使用它。

logSomething 中的 this 与 logMessage 中的对象相同。

5、应用程序可以在不使用它的情况下编写

除非应用程序已经以这种方式编写，否则无需使用 this 关键字编写应用程序。

像 React Hooks、VueJs Composition API 和 Svelte 这样的 UI 框架允许在不使用 this 关键字的情况下编写组件。

我们可以使用闭包来编写封装对象，这是一个例子。

const obj = (function(){
  let msg = '';

  function logMessage(){
    msg = 'Hi';
    const logSomething = ()=>{
      console.log(msg);
    }

    logSomething();
  }

  return {
   logMessage
  }
})();
obj.logMessage();
//'Hi'

logMessage 是在自执行函数内部定义的内部函数。logMessage 是一个闭包。它从外部函数引用 msg 变量。即使在自执行函数返回后，它也可以访问此变量。

现在它不关心我们是否将 logMessage 作为函数或作为方法调用，它总是引用正确的 msg 变量。

const logMessage = obj.logMessage;
logMessage();
//'Hi'

写在最后的想法

如果您真的想使用 this 关键字，或者受限于应用程序内部已经做出的决定，请记住该函数应作为方法调用以指向正确的对象。

如果真的不喜欢使用 this 关键字，您也可以考虑使用闭包实现对象并完全避免使用 this。

文章仅供学习收藏，请勿追究