深入理解JavaScript中的this的完整攻略
什么是this
所谓 this ，就是JavaScript中一个相对特殊的关键字，指向当前函数的执行环境。换句话说，this 可以看做是一个对象，这个对象指向的是函数执行时所在的环境对象，而这个环境对象是由调用方式来决定的。
this指向的典型情况
在JavaScript中，this 的指向是根据如何调用当前函数来确定的，它指向的对象有以下几种情况：
默认绑定
默认绑定是指一个独立的函数直接调用时，this 指向全局对象，即 window ，例如：
function fn() {
console.log(this);
}
fn(); // 输出 window
隐式绑定
隐式绑定就是函数作为某个对象的方法被调用时，this 指向该对象，例如：
var obj = {
name: '张三',
fn: function() {
console.log(this.name);
}
};
obj.fn(); // 输出 '张三'
显示绑定
显示绑定通常使用 call() 、 apply() 和 bind() 方法显式的指定 this 的值，例如：
function fn() {
console.log(this.name);
}
var obj1 = { name: '张三' };
var obj2 = { name: '李四' };
fn.apply(obj1); // 输出 '张三'
fn.call(obj2); // 输出 '李四'
fn.bind(obj1)(); // 输出 '张三'
new绑定
用 new 关键字调用构造函数时，返回一个新的对象，这个新的对象就是 this 指向的对象，例如：
function Person(name) {
this.name = name;
}
var p = new Person('张三');
console.log(p.name); // 输出 '张三'
改变this指向的方法
如果想要改变函数内 this 的指向，有以下几种方法：
使用 call() 方法
使用 call() 方法可以直接调用函数，同时改变 this 的指向，例如：
var obj1 = { name: '张三' };
var obj2 = { name: '李四' };
function fn() {
console.log(this.name);
}
fn.call(obj1); // 输出 '张三'
fn.call(obj2); // 输出 '李四'
使用 apply() 方法
apply() 方法和 call() 方法类似，区别在于参数的传递方式不同，例如：
var obj1 = { name: '张三' };
var obj2 = { name: '李四' };
function fn(arg1, arg2) {
console.log(this.name, arg1, arg2);
}
fn.apply(obj1, [1, 2]); // 输出 '张三', 1, 2
fn.apply(obj2, [3, 4]); // 输出 '李四', 3, 4
使用 bind() 方法
使用 bind() 方法可以绑定函数内 this 指向的对象，并且复制函数，例如：
var obj1 = { name: '张三' };
var obj2 = { name: '李四' };
function fn() {
console.log(this.name);
}
var fn1 = fn.bind(obj1);
var fn2 = fn.bind(obj2);
fn1(); // 输出 '张三'
fn2(); // 输出 '李四'
使用箭头函数
箭头函数的 this 绑定的是它所在的作用域，而不是调用时的作用域，例如：
var obj = { name: '张三' };
var fn = () => {
console.log(this.name);
};
fn.call(obj); // 输出 '张三'
示例
示例1：示范this默认指向全局（浏览器中的window对象）
function Person(name) {
this.name = name;
this.eat = function() {
console.log(this.name + ' 正在吃饭');
}
}
var p = new Person('张三');
var eatFunc = p.eat; // 单独取出 sayName 方法
eatFunc(); // 输出 'undefined 正在吃饭'
在执行 eatFunc() 方法时，this 的指向发生了变化，由 p 对象变成了全局对象 window ，导致在 eat() 方法中使用 this 调用 name 属性时，输出 null 或 undefined 。这种情况可以通过使用 bind() 方法来显式的重新绑定 this 的指向，例如：
var eatFunc = p.eat.bind(p);
eatFunc(); // 输出 '张三 正在吃饭'
示例2：示范解决事件回调函数中this指向问题
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log(this); // 输出 <button id="myButton">点击我</button>
});
在回调函数中使用 this 指向的是当前元素，通过这种方法可以方便地操作当前元素，例如：
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
this.disabled = true;
});
以上就是JavaScript中 this 的详细解释及应用，期望本文对你有所帮助。