JavaScript——this关键字_javascript中关键字this-优快云博客

本文详细介绍了JavaScript中this的多种应用场景，包括在对象方法、单独使用、函数内部、事件处理以及通过apply和call方法绑定。理解this的关键在于其上下文依赖性，不同的环境会导致this指向不同。在方法中，this指向调用方法的对象；在全局环境中，this指向window；在事件处理中，this指代触发事件的元素。此外，通过函数绑定可以改变this的指向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

在面向对象的语言中this表示当前对象的一个引用。

但是在JavaScript中this不是固定不变的，它回随着指定环境的改变而改变。

在方法中，this表示该方法所属的对象。
如果单独使用，this表示全局对象。
在函数中，this表示全局对象。
在函数中，在严格模式下，this是未定义的。
在事件中，this表示接受事件的元素。
类似call()和apply()方法可以将this引用到任何对象。

二、方法中的this

在对象方法中，this指向调用它所在方法的对象。fullName方法所属的对象就是person。

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

三、单独使用this

单独使用this,则它指向全局对象，在浏览器中就是window。在严格模式下，如果单独使用，this也是指向全局。

var x = this;

四、函数中使用this

函数中，函数的所属这默认绑定到this上。在浏览器中，window为全局对象，而在vue中由于是单页应用，this指向当前页面。但是在严格模式下。函数是没有绑定到this上的，这时候this就是未定义的。

五、事件中的this

在HTML事件句柄中，this指向了接收事件的HTML元素。

<button onclick="this.style.display='none'">
点击消失
</button>

六、对象方法中绑定

下面实例中，this是person对象，person对象是函数的所有者。this.firstName表示this(person)对象的firstName属性。

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

七、显示函数绑定

在JavaScript中函数也是对象，对象则有方法，apply和call就是函数对象的方法。者两个方法异常强大，他们允许切换函数执行的上下文环境，即this绑定的对象。

在下面实例中，当我们使用person2作为参数来调用person1.fullName方法时，this将指向person2，即便它是person1的方法：

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