关键字 this 是指在调用函数时绑定到该函数的对象的值，这意味着其值因函数是作为方法、作为独立函数还是作为构造函数调用而异。
调用函数时，它会在后台创建关键字 this 的实例，作为对包含该函数的对象的引用，从而允许从其作用域内访问与该函数一起定义的属性和方法。在某些方面，使用 this 与使用 const 声明的变量类似。与常量一样，this 无法移除，其值也无法重新分配，但 this 关键字包含的对象的方法和属性可以更改。
全局绑定
在函数或对象上下文之外，this 是指 globalThis 属性，它是指向大多数 JavaScript 环境中的全局对象的引用。在网络浏览器中运行的脚本的上下文中，全局对象是 window 对象：
this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}
在 Node.js 中，globalThis 是 global 对象：
$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}
在严格模式之外，this 还会引用独立函数内的全局对象，因为父 Window 是有效“拥有”这些函数的对象。
function myFunction() {
console.log( this );
}
myFunction();
> Window {...}
(function() {
console.log( this );
}());
> Window {...}
使用严格模式时，this 在独立函数内的值为 undefined：
(function() {
"use strict";
console.log( this );
}());
> undefined
在引入严格模式之前，this 的 null 或 undefined 值会被替换为对全局对象的引用。由于这种旧版行为，您有时可能会看到全局绑定被称为“默认绑定”。
隐式绑定
将函数作为对象的方法调用时，该方法内的 this 实例会引用包含该方法的对象，从而可以访问与该方法并存的方法和属性：
let myObject = {
myValue: "This is my string.",
myMethod() {
console.log( this.myValue );
}
};
myObject.myMethod();
> "This is my string."
看起来 this 的值取决于函数及其封闭对象的定义方式。相反，this 值的上下文是当前的执行上下文。在本例中，执行上下文是 myObject 对象调用 myMethod 方法，因此 myObject 是 this 的值。在前面的示例中，这可能看起来像是技术细节，但对于 this 的更高级用法，这是一个需要牢记的重要区别。
通常，使用 this 时，不应要求周围代码具有任何特定结构。这条规则的例外情况是 ES5 箭头函数。
箭头函数中的 this
在箭头函数中，this 会解析为词法封闭环境中的绑定。这意味着箭头函数中的 this 是指该函数最外层封闭上下文中的 this 值：
let myObject = {
myMethod() { console.log( this ); },
myArrowFunction: () => console.log( this ),
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
myObject.myArrowFunction();
> Window {...}
在前面的示例中，myObject.myMethod() 会将 myObject 记录为“拥有”该方法的对象，但 myObject.myArrowFunction() 会返回 globalThis（或 undefined），因为箭头函数内的 this 实例实际上是指向最外层封闭作用域。
在以下示例中，myEnclosingMethod 会在执行时在包含它的对象上创建箭头函数。箭头函数内的 this 实例现在是指封闭环境（即包含该箭头函数的方法）内的 this 值。由于 myEnclosingMethod 中的 this 值引用了 myObject，因此在您定义箭头函数后，箭头函数中的 this 也会引用 myObject：
let myObject = {
myMethod() { console.log( this ); },
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
显式绑定
隐式绑定可处理与 this 相关的大多数用例。不过，您有时可能需要 this 的值来表示特定执行上下文，而不是假定上下文。下面是一个示例（虽然略微过时），它展示了如何在 setTimeout 的回调函数中使用 this，因为此回调具有唯一的执行上下文：
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
myObject.myMethod();
> "This is my string."
setTimeout( myObject.myMethod, 100 );
> undefined
虽然 setTimeout 的这一缺点后来已通过其他功能得到了解决，但之前我们曾通过在预期上下文范围内创建对 this 值的显式引用来解决“丢失”this 的类似问题。在旧版代码库中，您偶尔可能会看到 this 实例被分配给使用 that、self 或 _this 等标识符的变量。以下是包含传递的 this 值的变量的常见标识符惯例。
当您使用 call()、bind() 或 apply() 方法调用函数时，this 会明确引用被调用的对象：
let myFunction = function() {
console.log( this.myValue );
}
let myObject = {
"myValue" : "This is my string."
};
myFunction.call( myObject );
> "This is my string."
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."
显式绑定会替换隐式绑定提供的 this 值。
let myObject = {
"myValue" : "This string sits alongside myMethod.",
myMethod() {
console.log( this.myValue );
}
};
let myOtherObject = {
"myValue" : "This is a string in another object entirely.",
};
myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."
如果以将 this 的值设置为 undefined 或 null 的方式调用函数，则该值会在严格模式下替换为 globalThis：
let myFunction = function() {
console.log( this );
}
myFunction.call( null );
> Window {...}
同样，如果以会向 this 提供基元值的方式调用函数，则该值会在严格模式之外替换为基元值的封装容器对象：
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> Number { 10 }
在严格模式下，传入的 this 值不会以任何方式强制转换为对象，即使它是基元值、null 值或 undefined 值也是如此：
"use strict";
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> 10
myFunction.call( null );
> null
new 绑定
使用 new 关键字将类用作构造函数时，this 会引用新创建的实例：
class MyClass {
myString;
constructor() {
this.myString = "My string.";
}
logThis() {
console.log( this );
}
}
const thisClass = new MyClass();
thisClass.logThis();
> Object { myString: "My string." }
同样，使用 new 调用的构造函数内的 this 值也指向要创建的对象：
function MyFunction() {
this.myString = "My string.";
this.logThis = function() {
console.log( this );
}
}
const myObject = new MyFunction();
myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }
事件处理脚本绑定
在事件处理程序上下文中，this 的值引用调用它的对象。在事件处理脚本的回调函数内，这意味着 this 会引用与处理脚本关联的元素：
let button = document.querySelector( "button" );
button.addEventListener( "click", function( event ) { console.log( this ); } );
当用户与上一部分代码中的 button 交互时，结果是包含 <button> 本身的元素对象：
> Button {}
将箭头函数用作事件监听器回调时，最接近的封闭式执行上下文再次提供 this 的值。从顶层来看，这意味着事件处理程序回调函数内的 this 为 globalThis：
let button = document.querySelector( "button" );
button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined
与任何其他对象一样，当您使用 call()、bind() 或 apply() 方法引用事件监听器的回调函数时，this 会显式引用该对象：
let button = document.querySelector( "button" );
let myObject = {
"myValue" : true
};
function handleClick() {
console.log( this );
}
button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }
检查您的理解情况
对于在网络浏览器中运行的脚本，当 this 在函数或对象上下文之外使用时，它会引用哪个全局对象？
window 对象browser 对象undefined 对象