前端JavaScript篇之对this对象的理解

对this对象的理解

在JavaScript中，this关键字是一个非常重要的概念，它用于指向当前执行上下文中的对象。具体来说，this的值是在函数调用时确定的，它的值取决于函数的调用方式。

在JavaScript中，this的指向可以通过四种调用模式来判断：

1. 函数调用模式：

当一个函数不是一个对象的属性时，直接作为函数来调用时，this指向全局对象（在浏览器中是window对象，在Node.js中是global对象）。例如：

function test() {
  console.log(this)
}

test() // 输出全局对象，一般是window对象

请添加图片描述

2. 方法调用模式：

如果一个函数作为一个对象的方法来调用时，this指向这个对象。例如：

var obj = {
  name: 'Xin',
  sayName: function () {
    console.log(this.name)
  }
}

obj.sayName() // 输出Xin

请添加图片描述

3. 构造器调用模式：

如果一个函数用new调用时，函数执行前会新创建一个对象，this指向这个新创建的对象。例如：

function Person(name) {
  this.name = name
}

var person = new Person('Xin')
console.log(person.name) // 输出Xin

请添加图片描述

4. apply、call和bind调用模式：

这三个方法都可以显示的指定调用函数的this指向。其中apply方法接收两个参数：一个是this绑定的对象，一个是参数数组。call方法接收的参数，第一个是this绑定的对象，后面的其余参数是传入函数执行的参数。也就是说，在使用call()方法时，传递给函数的参数必须逐个列举出来。bind方法通过传入一个对象，返回一个this绑定了传入对象的新函数。这个函数的this指向除了使用new时会被改变，其他情况下都不会改变。例如：

function sayName() {
  console.log(this.name)
}

var obj1 = {
  name: 'John'
}

var obj2 = {
  name: 'Mike'
}

sayName.call(obj1) // 输出John
sayName.call(obj2) // 输出Mike

var boundSayName = sayName.bind(obj1)
boundSayName() // 输出John