JavaScript中this用法详细指南

2021年3月16日12:46:11 发表评论 732 次浏览

this这个JavaScript的关键字通常使该语言的初学者感到困惑。这种混乱的部分原因是, this与其他语言(例如Java或Python中的self)相比, JavaScript中的JavaScript区别对待。

理解this为了理解JavaScript中的更高级概念或阅读和编写JavaScript代码, 这绝对是必要的, 这就是为什么我们将在本文中尝试阐明这在JavaScript中的真正含义。

我们将花费大量的文章来学习this参考JavaScript中的函数, 这就是为什么我们首先要看一个有关JavaScript函数的事实, 它将帮助我们更好地做到这一点。

JavaScript中的函数本质上是对象。像对象一样, 它们可以分配给变量, 传递给其他函数并从函数返回。与对象非常相似, 它们具有自己的属性。这些属性之一是this.

this的值store是JavaScript程序的当前执行上下文。因此, 在函数内部使用时this值的变化取决于函数的定义方式, 调用方式以及默认的执行上下文。

注意：

this

始终持有对

单

对象, 用于定义当前代码执行上下文行。

在我们进一步研究如何

this

在函数中的行为, 让我们看一下它们在函数外部的行为：

全局背景：

编写在函数外部的代码行属于

全球背景

和的价值

this

在此全局上下文中与全局对象相同。

例如, 如果你打开浏览器控制台并在其中输入以下几行, 然后按回车/确认键：

console.log(this)

你会看到Window对象正在登录到控制台。这是因为在浏览器运行时(例如Chrome运行时)中, 全局对象是Window对象。

但是, 在函数内部, 全局上下文可能不再存在, 并且函数可能具有自己定义的上下文, 因此,

this

。为了理解这一点, 让我们把注意力转移到函数上：

JavaScript中的函数可以通过多种方式调用：

1, 函数调用

2.方法调用

3, 构造函数调用

这与功能调用：

函数调用是指使用函数名称或表达式求值到函数对象并后跟一组前后的第一个方括号(包括方括号表示我们要JavaScript引擎立即执行该函数)来调用该函数的过程)。

例如：

<!DOCTYPE html>
<html>
<body>
<script>
     function doSomething() {
         // do something here
     }
  
// function invocation
doSomething(); 
</script>                    
</body>
</html>

this如果在doSomething函数内部通过上述函数调用来调用, 则它具有全局对象的值, 即窗口浏览器环境中的对象：

<!DOCTYPE html>
<html>
<body>
<script>
     function doSomething(a, b) {
  
        // adds a propone property to the Window object
         this .propone = "test value" ; 
     }
  
// function invocation
doSomething(); 
document.write(window.propone);
</script>                    
</body>
</html>

输出如下：

test value

然而, 这并非总是如此。如果做点什么()功能正在运行严格模式, 它将记录未定义而不是全局窗口对象。这是因为, 在严格模式下(由line表示："使用严格"；), 此值的默认值(对于任何函数对象)均设置为undefined, 而不是全局对象。

例如：

<!DOCTYPE html>
<html>
<body>
<script>
     function doSomething() {
         // enable the strict mode
         'use strict' ; 
  
        // logs undefined
         document.write( this + '<br>' ) 
             function innerFunction() {
               // Also logs undefined, indicating that 
               // strict mode permeates to inner function scopes
                 document.write( this ) 
             }
         innerFunction();
     }
  
// function invocation
doSomething(); 
</script>                    
</body>
</html>

输出如下：

undefined
undefined

这与方法调用：

函数定义为对象的字段或属性时, 称为方法。

<!DOCTYPE html>
<html>
<body>
<script>
     let person = {
         name : "John" , age : 31, logInfo : function () {
             document.write( this .name + " is " + this .age + " years old " );
         }
     }
        // logs John is 31 years old
        person.logInfo() 
                  </script>                    
</body>
</html>

输出如下：

John is 31 years old

在上面的代码示例中,

logInfo()

是一种方法

人对象

我们使用对象调用模式来调用它。

也就是说, 我们使用了

财产访问者

访问作为对象一部分的方法。

这样的调用需要使用一个表达式, 该表达式求值到我们方法所在的对象, 并使用一个属性访问器(例如：person.logInfo()), 然后再加上一组开括号。

必须了解如何

函数调用

和

方法调用

不同。

反过来, 这将有助于我们了解

this

上下文可能在任何给定的函数中, 因为在这些调用的每一个中,

this

是不同的。

在使用属性访问器调用的方法内部, this将具有调用对象的值, 即this将指向与属性访问器结合使用以进行调用的对象。

例如：

<!DOCTYPE html>
<html>
<body>
<script>
     let add = {
         num : 0, calc : function () {
  
             // logs the add object
             document.write( this + ' ' ) 
                 this .num
                 += 1;
             return this .num;
         }
     };
  
// logs 1
document.write(add.calc() + '<br>' ); 
// logs 2
document.write(add.calc()); 
</script>                    
</body>
</html>

输出如下：

[object Object] 1
[object Object] 2

在上面的示例中,

calc()

是一种方法

加

对象, 因此使用第9和10行中的方法调用规则进行调用。

我们知道, 当使用方法调用模式时,

this

设置为调用对象。

在this里面

calc()

方法, 此值设置为调用对象, 在本例中为

加

。这样我们就可以成功访问

加

‘s

数

属性。

但是, 让我们知道一个主要的混淆点：

发生什么事this在嵌套在对象方法内部的函数中？

<!DOCTYPE html>
<html>
<body>
<script>
     let add = {
         num : 0, calc : function () {
  
         // logs the add object
         document.write( this + ' ' ) 
  
         function innerfunc() {
             this .num += 1;
  
         // logs the window object
         document.write( this + ' ' ); 
  
         return this .num
  
     } return innerfunc();
      }
};
  
// logs NaN
document.write(add.calc() + '<br>' ); 
  
// logs NaN
document.write(add.calc());
</script>                 
</body>
</html>

输出如下：

[object Object] [object Window] NaN
[object Object] [object Window] NaN

让我们尝试了解发生了什么。

当我们打电话

calc()

在第14和15行中, 我们使用的是方法调用

this

加

calc()

。可以使用第4行中的log语句来验证这一点。

然而, innerfunc()从内部调用calc()使用简单函数调用的方法(第11行)。这意味着, 在里面innerfunc() this 设置为全局对象, 该对象没有数性质, 因此获得NaN输出。

我们该如何解决这个问题？this从嵌套函数的外部方法？

一种解决方案是分配this从外部函数到要在嵌套函数中使用的变量的值, 如下所示：

<!DOCTYPE html>
<html>
<body>
<script>
     let add = {
         num : 0, calc : function () {
  
             // logs the add object
             document.write( this + ' ' ) 
  
            // using thisreference variable to 
            // store the value of this
            thisreference = this ; 
  
             function innerfunc()
             {
  
              // using the variable to access the
              // context of the outer function
                 thisreference.num += 1; 
  
                // logs the add object
                 document.write(thisreference + ' ' );
                 return thisreference.num;
             }
             return innerfunc();
         }
     };
  
// logs 1
document.write(add.calc() + '<br>' ); 
  
// logs 2
document.write(add.calc()); 
</script>                    
</body>
</html>

输出如下：

[object Object] [object Object] 1
[object Object] [object Object] 2

该问题的其他解决方案包括使用bind(), call()或apply(), 我们将尽快进行调查。

这与构造函数调用：

构造函数调用在以下情况下执行新关键字后跟一个函数名称, 以及一组右括号和右括号(带或不带参数)。

例如：let person1 = new People('John', 21);

这里,

人1

是新创建的对象, 并且

人

是用于创建此对象的构造函数。

构造函数调用是使用JavaScript创建对象的几种方法之一。

当我们使用

新

关键字是否与函数名称结合？

通过这种方法创建对象本质上涉及五个步骤。让我们通过以下示例研究它们：

<!DOCTYPE html>
<html>
<body>
<script>
let people = function (name, age) {
          this .name = name;
          this .age = age;
  
     this .displayInfo = function () {
        document.write( this .name + " is " + this .age + " years old" );
       }
     }
  
let person1
     = new people( 'John' , 21);
  
// logs John is 21 years old
person1.displayInfo();
</script>         
</body>
</html>

输出如下：