JavaScript中的this关键字

开幕雷击

很遗憾，它拥有不同的值，具体取决于它的使用位置：

具体介绍

在方法中，this 指的是所有者对象

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

单独的情况下，this 指的是全局对象。

实例

var x = this;

在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。
在浏览器窗口中，全局对象是 [object Window]：

在函数中，this 指的是全局对象。

function myFunction() {
  return this;
}

在 JavaScript 函数中，函数的拥有者默认绑定 this。

因此，在函数中，this 指的是全局对象 [object Window]。

在函数中，严格模式下，this 是 undefined。

"use strict";
function myFunction() {
  return this;
}

JavaScript 严格模式不允许默认绑定。

因此，在函数中使用时，在严格模式下，this 是未定义的（undefined）。

在事件中，this 指的是接收事件的元素。

<button onclick="this.style.display='none'">
  点击来删除我！
</button>

在对象中

在此例中，this 是 person 对象（person 对象是该函数的“拥有者”）：

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

this.firstName 意味着 this（person）对象的 firstName 属性。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

call() 和 apply() 方法可以将 this 引用到任何对象。

call() 和 apply() 方法是预定义的 JavaScript 方法。

它们都可以用于将另一个对象作为参数调用对象方法。

您可以在本教程后面阅读有关 call() 和 apply() 的更多内容。

在下面的例子中，当使用 person2 作为参数调用 person1.fullName 时，this 将引用 person2，即使它是 person1 的方法：

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

在类中

在类中this指代所创建的类的实例。
js类的介绍

扩展

以下是我面试滴滴的一道面试题，就当作小练习啦

  let obj = {
            dev:'bfe',
            a:function(){
               return this.dev
                },
            b:(){
               return this.dev
                },
            c:()=>{
               return this.dev
               },
            d:function(){
              return (()=>{
              return this.dev
              })()
              },
            e:function(){
              return this.b()
             },
            f:function(){
              return this.b
           },
           
      }
      console.log(obj.a())
      console.log(obj.b())
      console.log(obj.c())
      console.log(obj.d())
      console.log(obj.e())
      console.log(obj.f()())

  

问：上述代码控制台打印结果。

先别看分析，自己想想

在JavaScript中，函数的this值取决于它是如何被调用的。对于常规函数，this通常指向调用该函数的对象（也称为调用上下文）。对于箭头函数，this在函数定义时就已固定，指向定义该函数的上下文中的this值。

现在我们来代码逐个分析：

obj.a()：这里a是一个作为对象obj属性的普通函数，当它被调用时，this指向调用它的对象，也就是obj。因此，它会返回obj.dev的值，即’bfe’。

obj.b()：代码中的方法b语法格式不正确。应该声明成类似于a的普通函数，例如b: function(){…}。如果修改后以与a相同的方式定义，那么结果将与obj.a()相同，返回’bfe’。然而，按照当前的写法，执行时会因语法错误导致程序停止，所以不会有输出，所以需要修改正确。

obj.c()：c是一个箭头函数，箭头函数没有自己的this，它的this是继承自定义该箭头函数时的上下文，在这个例子中，就是全局上下文（假设该代码段不在任何其他函数内）。因此，除非全局上下文有一个名为dev的变量，否则this.dev将为undefined。

obj.d()：d是一个匿名函数，但是它返回了一个被立即执行（IIFE）的箭头函数的调用结果。由于外层匿名函数的this绑定到其定义时的上下文，即obj对象，返回的内层箭头函数同样使用这个绑定的this，因此这里也会返回’bfe’。

obj.e()：方法e是一个普通函数，它尝试返回this.b()的结果。但由于b本身是未正确定义的，这里同样会遇到一个问题。如果假设b是像a那样定义的普通函数，那么this.b()会成功执行并返回’bfe’。否则，如果保持原样，会因为b的定义错误而抛出异常。

obj.f()()：
方法f是一个普通函数，它返回this.b。注意这里没有括号，所以它返回的是b函数本身，而不是调用结果。随后我们通过第二对括号调用这个返回的函数。同b一样，由于b的定义不存在或者不正确，这里要么会返回一个函数，要么因错误而停止执行。
假设b是正确定义的，则this.b将会指向b函数，但由于在全局上下文中调用（因为f()返回了b，然后直接调用b，没有指定调用上下文），this将是全局对象或undefined（在严格模式下），这可能导致无法访问dev属性，并返回undefined。

综上所述，如果忽略掉obj.b()的定义错误并假设它像obj.a()那样被定义，控制台打印顺序和结果将是：

bfe       // 来自 obj.a()
bfe       // 假设 obj.b() 被修正为普通函数
undefined // 来自 obj.c(), 在全局上下文中 this.dev 是 undefined
bfe       // 来自 obj.d()
bfe       // 假设 obj.b() 被修正且 obj.e() 运行成功
undefined // 来自 obj.f()(), b 方法如果没有绑定特定的this, 则在全局上下文中运行

其中如果知识不足的同学可能看不懂obj.f

他的外层是一个匿名函数：最外围的 function(){ … } 是一个没有名称的普通函数（匿名函数）。在你提供的代码上下文中，它应该被赋值给某个对象的属性或变量，或者作为回调函数使用。

他的内层是一个箭头函数：()=>{ return this.dev } 是一个箭头函数。与普通函数不同，箭头函数不绑定自己的 this，而是捕获定义时所在上下文的 this 值。

立即调用的函数表达式(IIFE)：(()=>{ return this.dev })() 中的最后的一对括号 () 表示箭头函数被创建后立即执行。这是一个常用的模式，用于立刻执行一个函数并返回其结果。

把这三点结合起来解读，当这个匿名函数被调用时，因为它是通过函数声明的方式创建的，它的 this 值会依赖于调用它的上下文即’obj’。然后它返回并立即执行一个箭头函数。由于箭头函数本身不绑定 this，它会捕获外层匿名函数的 this 上下文。因此，内部箭头函数中的 this.dev 实际上访问的是外层匿名函数的 this.dev 属性。