JavaScript this

JavaScript this 关键字指的是当前运行环境的上下文对象。

JavaScript this 关键字指的是当前运行环境的上下文对象。

根据使用位置的不同,它具有不同的值:

  • 在对象方法中, this 指的是所有者对象
  • 单独使用 thisthis 指的是全局对象
  • 在非严格模式的全局函数中, this 指的是全局对象
  • 在严格模式的全局函数中, thisundefined
  • 在事件中, this 指的是接收事件的元素
  • call()apply() 方法何以将 this 指向任何对象。

this 在对象方法

在对象方法中, this 指的当前的对象实例。

在本页顶部的示例中, this 指的是person对象。

person 对象中的全名方法中的 this:

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};

单独使用 this

单独使用时,this 指向全局对象。在浏览器窗口中,全局对象是 Window 对象。

let x = this;

严格模式下,单独使用时, this 也是全局对象:

"use strict";
let x = this;

函数中的 this

JavaScript 全局函数所有者是全局对象 Window, 所以 this 指向 Window 对象。

函数中的 this 指向全局对象:

function myFunction() {
  return this;
}

严格模式中的情况并不相同。由于 JavaScript 严格模式不允许默认绑定,因此,严格模式下函数中的 thisundefined

严格模式下函数中的 this 指向 undefined

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

HTML 事件中的 this

在 HTML 事件处理程序中, this 指的是事件发生的 HTML 元素:

<button onclick="this.style.display='none'">Click to Remove Me!</button>

显式函数绑定

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

他们都可以在调用函数时,指定当前运行函数的 this 值。

在下面的例子中,通过 call 调用 person1.fullName 时,传入 person2 对象作为 this

const person1 = {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};
const person2 = {
  firstName: "John",
  lastName: "Doe",
};
person1.fullName.call(person2); // Will return "John Doe"