一文了解JavaScript中的this关键字

JavaScript中this关键字是什么？极悦小编给大家举例说明。

例子

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

这是什么?

在 JavaScript 中，this关键字指的是一个对象。

哪个对象取决于this调用(使用或调用)的方式。

this关键字根据其使用方式指代不同的对象：

在对象方法中，this指的是对象。

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

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

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

在一个事件中，this指的是接收到该事件的元素。

像call()、apply()和这样的方法bind()可以引用任何对象。this

这在一个方法中

在对象方法中使用时，this指的是对象。

在顶部的示例中，this指的是person对象。

因为fullName方法是person对象的方法。

fullName : function() {
  return this.firstName + " " + this.lastName;
}

这个单独

单独使用时，this指的是全局对象。

因为this是在全局范围内运行的。

在浏览器窗口中，全局对象是[object Window]：

let x = this;

在严格模式下，单独使用时，this也指全局对象：

"use strict";
let x = this;

this在函数中(默认)

在函数中，全局对象是this.

在浏览器窗口中，全局对象是[object Window]：

function myFunction() {
  return this;
}

函数中的this (严格)

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

因此，当在函数中使用时，在严格模式下，this是undefined.

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

事件处理程序中的this

在 HTML 事件处理程序中，this指的是接收到事件的 HTML 元素：

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

对象方法绑定

在这些示例中，this是person 对象：

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

例子：

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

即this.firstName是this(人对象)的firstName属性。

显式函数绑定

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

它们都可以用来调用以另一个对象为参数的对象方法。