JavaScript中this指向的四种核心场景解析

JavaScript this指向概述

在JavaScript开发中，this的指向问题常令开发者困惑，且极易引发错误。与面向对象语言中this固定代表当前对象引用的特性不同，JavaScript中的this并非静态不变，而是动态依赖于其所在的执行环境。

JavaScript中，this始终指向调用其所在方法的对象。由于this是函数运行时自动生成的内部对象，因此它仅在函数内部有效且可用。

接下来，我们将分几种具体场景深入剖析this的实际用法。

全局函数调用中的this

1. 全局函数调用场景

  function globalTest() {
    this.name = "global this";
    console.log(this.name);
  }
  globalTest(); //global this

在上述代码中，globalTest()属于全局方法的全局性调用，因此this指向全局对象window。为验证this确实指向window，我们对代码进行如下调整：

  var name = "global this";

  function globalTest() {
    console.log(this.name);
  }
  globalTest(); //global this

当name作为全局变量存在时，运行结果仍为“global this”，这证实了this指向window。若在方法体内尝试修改全局name变量，再次调用该方法输出“rename global this”，则说明全局name在方法内部已被修改。相关代码如下：

  var name = "global this";

  function globalTest() {
    this.name = "rename global this"
    console.log(this.name);
  }
  globalTest(); //rename global this

基于上述三段代码的分析，我们可以得出结论：在全局方法调用的情况下，this指向全局对象window，即调用该方法所在的对象。

对象方法调用中的this

2. 对象方法调用场景

当函数作为对象的方法被调用时，this指向该方法的上级对象，也就是调用该方法的对象。在以下代码示例中，this指向obj对象。

  function showName() {
    console.log(this.name);
  }
  var obj = {};
  obj.name = "ooo";
  obj.show = showName;
  obj.show(); //ooo

构造函数中的this指向

3. 构造函数调用场景

在构造函数内部，this指向新创建的对象实例本身。

  function showName() {
    this.name = "showName function";
  }
  var obj = new showName();
  console.log(obj.name); //showName function

在上述代码中，我们通过new关键字创建对象实例。new关键字能够改变this的指向，使其指向新创建的对象obj。此外，我们再增加一个全局变量name，以证明this并未指向全局对象：

  var name = "global name";

  function showName() {
    this.name = "showName function";
  }
  var obj = new showName();

  console.log(obj.name); //showName function
  console.log(name); //global name

在构造函数内部，我们对this.name进行赋值操作，但这一操作并未改变全局变量name的值。

apply与call改变this指向

4. apply/call调用场景下的this

apply和call方法的主要作用都是改变函数体内部的this指向。它们的具体定义如下：

call方法说明

语法格式：call(thisObj，Object)

定义：调用一个对象的方法，并使用另一个对象替换当前对象。

说明部分

call方法可用于代替另一个对象调用一个方法。该方法可将函数的对象上下文从初始上下文更改为由thisObj指定的新对象。

若未提供thisObj参数，则Global对象将被用作thisObj。

apply方法说明

语法格式：apply(thisObj，[argArray])

定义：应用某一对象的方法，并使用另一个对象替换当前对象。

说明部分

如果argArray不是有效的数组或arguments对象，将导致TypeError错误。

若未提供argArray和thisObj中的任何一个参数，则Global对象将被用作thisObj，且无法传递任何参数。

  var value = "Global value";

  function FunA() {
    this.value = "AAA";
  }

  function FunB() {
    console.log(this.value);
  }
  FunB(); //Global value 因为是在全局中调用的FunB(),this.value指向全局的value
  FunB.call(window); //Global value,this指向window对象，因此this.value指向全局的value
  FunB.call(new FunA()); //AAA, this指向参数new FunA()，即FunA对象

  FunB.apply(window); //Global value
  FunB.apply(new FunA()); //AAA

在上述代码中，call和apply中的this指向一致，区别仅在于参数传递形式不同：call逐个传递参数，而apply接收一个数组。具体细节将在后续文章中单独阐述。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。