理解JavaScript中的'this'关键字

了解JavaScript中的 "this "关键字如何工作

Feature Image

如果你属于编程背景，你可能已经多次遇到 "this "关键字。每个存在的编程语言通常都包含 "this "的概念，尤其是现代编程语言。

但这里的问题是，不同的编程语言对 "this "关键词的定义有细微的变化。在本指南中，我将向你解释JavaScript的 "this "关键词。

在编程中，有一些概念在实现之前需要彻底理解。"this "关键字就是其中之一。你不能直接跳到 "this "关键字的实现上，你必须首先了解它的属性和使用情况。

除此之外，"this "关键字主要是与函数一起使用，因此让我们首先了解一下。

注意：在这个内容中，不会有 "this "关键字的标准定义，这是因为该关键字的功能随着其使用情况不断变化。所以，它对每一个用例都是比较好的。

单独使用时的 "this "关键词

如果你想单独使用 "this "关键字，即没有任何函数或对象。在这种情况下，浏览器的默认对象即 "window "将发挥作用，其值将被设置为 "this "关键词的值。

比如说

<!DOCTYPE html>
<html>
    <body>
        <script>
        document.write(this);
        </script>
    </body>
</html>

输出

[object Window]

带有函数的 "this "关键字

通常情况下，函数是很容易理解的，而且有最直接的功能。但是，在JavaScript中，函数要比它们看起来复杂得多。

JS的函数就像对象一样。函数也有属性。其中一个属性是 "this "关键字。this "关键字的价值完全取决于函数的调用方式。

注意："this "关键字总是持有一个对象的值。

函数调用的不同方式

基本函数调用
方法调用
构造器调用

1."this "关键字是如何在基本函数调用中工作的？

在深入研究一些脚本之前，让我简单介绍一下基本函数调用。每当一个函数被创建时，其主体包含在开头和结尾的括号中，并且使用其名称进行调用时，这就是一个基本函数调用。

在这种情况下，如果脚本是在浏览器环境下执行的，那么 "this "关键字将持有全局对象的值，即窗口对象。因此，对 "this "关键字所做的任何修改都会反映在窗口对象中。

比如说

<!DOCTYPE html>
<html>
<body>
    <script>
    function disp(){
        this.value = "Demo Object";
    }
    
    disp();
    document.write(window.value);
    </script>
</body>
</html>

输出

Demo Object

在上面的脚本中，也可以用this.value代替window.value，或者为了理解 "this "和 "window "之间的联系，可以使用下面的表达式。

document.write(this);

上述 "this "关键字的行为只有在脚本没有使用严格模式时才有效。在严格模式的情况下，"this "关键字的值被设置为undefined 。

<!DOCTYPE html>
<html>
<body>
    <script>
    function disp(){
        'use strict';
        this.value = "Demo Object";
    }
    
    disp();
    document.write(window.value);
    </script>
</body>
</html>

这里有些人可能会得到一个空白的输出，而有些人可能会得到undefined ，这完全取决于浏览器。

2.2. "this "关键字是如何与方法调用一起工作的？

当函数被定义为对象的一个属性时，就被称为方法。所以，不要把JavaScript中的函数或方法搞混。

大多数开发人员对使用的术语感到困惑。为了使理解过程顺利，我将用一般的术语用简单的语言来解释整个概念。

在方法调用过程中，一个函数被定义为一个对象的属性。现在，为了调用该函数，使用对象的名称，然后是带有开括号和闭括号的函数名称。

比如说

object.fuctionname();

在技术术语中，这种表达方式被称为属性访问器。

在这个过程中，"this "关键字所持有的值是用于调用方法的对象的值。

为了更好地理解，请参考该脚本。

<!DOCTYPE html>
<html>
<body>
    <script>
    const programming = {
        language: "JavaScript",
        level: "easy",
        display: function(){
            document.write("This is "+ this.language+" and it is quite "+ this.level+" to write code. ");
        }
    };
    
    programming.display();
    </script>
</body>
</html>

输出

This is JavaScript and it is quite easy to write code.

注意：如果你遇到一个脚本，在两个函数中都定义了嵌套函数和 "this "关键字，你必须记住，第一个函数 "this "关键字将拥有对象的值，而嵌套函数 "this "关键字将拥有全局对象的值，即 "窗口 "的值。

3.3. "this "关键字是如何与构造函数调用一起工作的？

在谈论构造函数调用中的 "this "关键字之前，让我简单介绍一下构造函数调用。

当使用new关键字创建一个函数对象时，该函数被用作一个构造器。这整个概念被称为构造函数调用。

这是JS中创建一个实例的几种方法之一。

比如说

let demObj = new functionName();

在这个过程中，"this "关键字持有新创建对象的值。

在这个过程中，一个对象被创建为函数名，因此它将构造函数的属性设置为函数。后来，该函数与对象相连，这样它就继承了函数或构造函数的所有属性。

然后，构造函数现在作为对象的一个属性。调用后，"this "关键字可以访问对象所持有的值。

例如

<!DOCTYPE html>
<html>
<body>
  <script>
    let demoObj = function(arg1, arg2){
        this.val1 = arg1;
        this.val2 = arg2;
        
        this.disp = function(){
        document.write("This is "+ this.val1 + " and its quite " + this.val2);
        }
    }
    
    let object1 = new demoObj("JS","easy");
    
    // logs the output
    object1.disp();
    </script>
</body>
</html>

输出

This is JS and its quite easy

这里，创建了一个对象object1 ，它调用了构造函数。该构造函数然后设置 "this "关键词的值。一旦对象的所有属性被 "this "关键字继承，disp() 函数就会被创建，并给出所需的输出。这并不复杂，首先创建一个对象，然后调用一个构造函数来设置该对象的值，之后该对象的所有值都由 "this "关键字继承。

最后说明

你可能会遇到一些 "this "关键字的用例，但在本指南中没有列出。这是因为这些用例还不够流行，或者没有被开发者广泛地实现。除此之外，如果你理解了上面提到的用例，你可以很容易地了解这些概念。

如果你遇到令人困惑的事情，你可以把它放下。我们将进一步讨论它。也许，你需要练习这些脚本，以便对 "this "关键字有一个清晰的认识。

注意：在阅读这些脚本时，JS可能看起来相当复杂，但让我告诉你，如果你把基础知识讲透了，你只需要熟悉语法和写作风格。

谢谢你的阅读!

了解JavaScript中的'this'关键字