JavaScript中的this例题实战总结详析

JavaScript中的this是一个十分重要的概念，理解this对于编写出高质量的JavaScript代码至关重要。在实际的代码开发中，我们常常会遇到this的使用问题，这篇文章就让我们来总结一下实战中的this例题。

例1：函数中使用this关键字

var obj = {
  x: 123,
  foo: function() {
    console.log(this.x);
  }
};

var bar = obj.foo;

bar();

这段代码中，我们定义了一个对象obj，其中包括一个属性x和一个方法foo。在方法foo中，我们调用了this关键字来访问对象属性x。接着，我们将方法foo复制给了变量bar，并调用bar。那么问题来了，最终会输出什么？

答案是undefined。这是因为，在调用bar时，我们实际上是在全局作用域中调用了一个函数。此时，this指代的是全局对象window，而全局对象中并没有定义属性x，所以最终输出undefined。

为了让代码输出123，我们需要改变bar的调用方式，使得调用时this指向正确的对象。可以采用call或apply方法调用函数。

bar.call(obj);

这样调用后，输出结果为123。

例2：事件监听器中this的指向问题

<button id="btn">点击我</button>

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  console.log(this);
});

假设我们在页面上创建了一个按钮，然后在JavaScript代码中对其添加了一个点击事件监听器。在监听器中，我们又使用this关键字。那么当我们点击按钮时，最终会输出什么呢？

答案是按钮元素对象，即 <button id="btn"> </button>。这是因为，在事件监听器中，this指代的就是触发该事件的元素对象，即按钮本身。如果我们在监听器函数中使用this关键字访问该按钮的属性或方法，就可以方便地获取按钮的各种信息。

例3：构造函数中的this

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var p1 = new Person('张三', 20);

console.log(p1.name);
console.log(p1.age);

这是一个经典的JavaScript构造函数，用来创建Person对象。在构造函数中，我们使用this关键字来创建对象属性，从而给对象赋值。然后我们创建了一个Person对象，并通过输出对象属性的方式验证了对象的属性值是否正确。

在JavaScript中，构造函数中的this指代的是正在构建的实例对象。在上述例子中，当我们通过new关键字实例化一个Person对象时，this就会指向该对象。最终，我们通过读取实例对象的属性来获取其具体的信息。

例4：某些库中的this指向问题

var obj = {
  x: 123
};

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

foo.call(obj);

这段代码中，我们定义了一个对象obj，其中包含了一个属性x。然后我们定义了一个函数foo，用来输出当前this对象的x属性。最后，我们使用call方法调用foo函数，并将this指向obj对象。

我们可以得到输出结果123。这是因为通过call方法调用函数时， 个参数会被绑定到this关键字上。在本例中，我们将obj对象作为参数传递给了call方法，从而使this指向了obj对象。