把this玩转于手心

什么是this？

在JavaScript中，this是一个，它指向当前执行代码的对象 。this的指向可以是全局对象 、函数对象 、对象的方法 ，也可以是构造函数 。

默认情况（默认绑定）

默认情况下，this指向全局对象。在浏览器中，全局对象是window对象。因此，在浏览器中，如果在一个函数中没有明确指定this指向的对象，那么this指向的就是window对象。

function foo() {
  console.log(this);
}

foo(); // 输出：window

显式绑定（明确绑定）

我们可以通过call() 、apply() 和bind() 方法来显式地绑定this指向的对象。

call()方法

call() 方法接受两个参数，第一个参数是要绑定this指向的对象，第二个参数及以后的参数是要传递给函数的参数。

function foo() {
  console.log(this);
}

var obj = {
  name: 'John Doe'
};

foo.call(obj); // 输出：{ name: 'John Doe' }

apply()方法

apply() 方法与call() 方法类似，但它接受一个数组作为第二个参数，该数组包含要传递给函数的参数。

function foo() {
  console.log(this);
}

var obj = {
  name: 'John Doe'
};

foo.apply(obj, ['John', 'Doe']); // 输出：{ name: 'John Doe' }

bind()方法

bind() 方法创建一个新的函数，该函数的this指向被绑定到指定的对象。

function foo() {
  console.log(this);
}

var obj = {
  name: 'John Doe'
};

var boundFoo = foo.bind(obj);

boundFoo(); // 输出：{ name: 'John Doe' }

箭头函数

箭头函数没有自己的this指向。箭头函数的this指向继承其外层函数的this指向。

var obj = {
  name: 'John Doe',
  foo: function() {
    console.log(this);
  }
};

obj.foo(); // 输出：{ name: 'John Doe' }

var arrowFoo = () => {
  console.log(this);
};

arrowFoo(); // 输出：window

结论

this指向是一个JavaScript开发人员必须掌握的基本概念。通过理解this指向，我们可以更好地理解JavaScript中的对象和函数。