JavaScript深入刨析this的指向以及如何修改指向

什么是this

在JavaScript中，this是一个十分重要且常用的关键字，用来指代当前函数执行上下文中的对象。而这个对象指代的意义在不同的使用场景下会发生变化，因此我们需要深入学习并理解this的指向。

在JavaScript中，this的指向可以分为以下4种情况：

作为对象的方法调用：this指向该对象
作为普通函数调用：this指向全局对象window
作为构造函数调用：this指向新对象
通过apply、call、bind对函数进行调用：this指向绑定的对象

如何修改this指向

在JavaScript中，想要修改函数内部this的指向需要借助一些函数方法来实现：

1. bind方法

bind方法会创建一个新的函数，并且将原来的函数中的this绑定到指定对象上。

例如：

var obj = {
  name: 'John'
};

function getName() {
  return this.name;
}

var getNameBind = getName.bind(obj);
console.log(getNameBind()); // 输出：John

2. call方法与apply方法

call方法与apply方法都可以改变函数内部this的指向。

不同的是，call方法需要明确传递参数列表，而apply则需要将参数列表封装成一个数组传递给函数。

例如：

var obj1 = {
  name: 'John'
};

var obj2 = {
  name: 'Mary'
};

function getName() {
  return this.name;
}

console.log(getName.call(obj1)); // 输出：John
console.log(getName.apply(obj2)); // 输出：Mary

示例说明

示例1：方法调用中的this

对象的方法调用时，this指向该对象。如下代码：

var obj = {
  name: 'John',
  getName: function() {
    return this.name; 
  }
};

console.log(obj.getName()); // 输出：John

示例2：构造函数调用中的this

通过关键字new来调用构造函数时，this会指向新创建的对象。如下代码：

function Person(name) {
  this.name = name;
  this.getName = function() {
    return this.name;
  }
}

var person = new Person('John');
console.log(person.getName()); // 输出：John

通过构造函数创建的对象可以“继承”构造函数的属性和方法，这是一种加强版的对象字面量语法。