在JavaScript中了解'此”及其在各种情况下的行为

>曾经被javaScript的this关键字困扰吗？ 你并不孤单！ 抓住它的细微差别就像学习新技能一样 - 它需要练习，但是一旦您得到它，一切都会点击。

>本博客文章揭开this的神秘信息，并在不同上下文中探索了其行为。让我们开始！

什么是this？ 在JavaScript中，是代表函数属于对象的关键字。 它通过在运行时确定其值来启用可重复使用的动态函数。 函数呼叫的上下文决定了

的价值，使其既强大又有时令人困惑。

this密钥点：this

是一个关键字，而不是变量。

>

您不能将值直接分配给
• >this>
它的值在运行时动态确定。
• this
• 现实世界类比：

想象

作为博物馆导游。 在艺术博物馆中，该指南代表艺术博物馆；在历史博物馆中，它们代表历史博物馆。 同样，适应其上下文。> 在不同的方案中

this：this

1。全局上下文（默认绑定）：this

>外部功能，

指的是全局对象。 这取决于环境：

浏览器（没有严格模式）：this是

> object。

• > node.js（没有严格模式）： this>示例：window
• >严格模式：this在严格的模式下，{}在浏览器中保留

，在node.js.

中

>示例：

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

this 2。常规功能内部：window undefined

在常规函数中，

>的值取决于函数的调用方式。>

>没有严格的模式：

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

在浏览器中，

是>对象;在node.js中，它是全局对象。> 严格模式：

：this

。

• >示例： this window
• 3。内部对象方法（隐式绑定）：> 当函数是对象的方法时，this指向该对象。 undefined
>示例：

4。箭头功能：

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

箭头功能没有自己的。他们从周围的词汇范围继承了它。

this>示例：

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

5。构造函数函数（新绑定）：

使用new>关键字，this是指新创建的对象。>

>示例：

6。类：

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

在ES6类中，的行为与构造函数函数相似。

>示例：this

7。

，

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

，

（显式绑定）：call()> apply()这些方法允许明确设置bind()>>

this：立即调用该函数，单独传递参数。

>

• ：类似于call()>，但是将参数作为数组传递。
>
• apply()：返回一个新功能，call()绑定到特定对象。
>
• bind()this>示例：

8。事件听众：

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

在事件听众中，通常是指触发事件的元素。>

>示例：this

优先顺序：：

>

<code class="language-javascript">const techBook = {
  title: 'Advanced JavaScript',
  showTitle: function() {
    const arrowFunc = () => {
      console.log(this.title);
    };
    arrowFunc();
  }
};
techBook.showTitle(); // Output: Advanced JavaScript</code>

新绑定 显式绑定

隐式绑定
>默认绑定
3. 结论：
>掌握

对于编写清洁，上下文感知的JavaScript至关重要。 在最初具有挑战性的同时，在不同方案中理解其行为使您能够编写更有效和可维护的代码。 练习是关键！ 在下面的评论中分享您的经验！

>

以上是在JavaScript中了解'此”及其在各种情况下的行为的详细内容。更多信息请关注PHP中文网其他相关文章！