普通函数
this的值取决于函数是如何被调用的
<body><script>// 函数普通中 this指向windowfunction foo() {console.log(this)}foo()// this的指向是在函数调用时确定的// 函数是由对象调用的, 函数中的this指向调用它的对象// 对于全局函数是由window对象调用的// window.foo()</script>
</body>
构造函数
构造函数中的this指向实例对象
<body><script>function Person() {// 构造函数中this指向创建的实例对象}var p = new Person()</script>
</body>
对象的方法
对象的方法中的this指向对象
<body><script>const obj = {sayHi() {console.log(this)},}obj.sayHi()</script>
</body>
事件回调
事件回调中的this指向触发事件的对象
<body><div>1111</div><script>const div = document.querySelector('div')div.addEventListener('click', function () {// 事件的回调用, 由对应dom对象调用的console.log(this)})</script>
</body>
定时器
定时器中的this指向window
<body><script>// 定时器的回调是由window对象调用的, 因此, 回调中的this指向window对象window.setTimeout(function () {console.log(this)}, 1000)</script>
</body>
箭头函数
箭头函数的this值是在函数定义时确定的，而不是在函数调用时。箭头函数会捕获其父级作用域的this值，无论这个this值如何变化，箭头函数中的this都会保持不变。
判断方法: 找this的父级作用域, 函数作用域或全局作用域
<body><script>const fn = () => {console.log(this)}fn()const obj = {name: 'xiaoming',}// call()调用函数, 同时改变this的指向function foo() {// 在foo作用域中, this指向obj的console.log(this)const bar = () => {console.log(this)}bar()}foo.call(obj)</script>
</body>
function Person() {this.age = 0;// 普通函数setInterval(function growUp() {// 这里的this指向window或undefined（取决于是否在严格模式下）this.age++;console.log(this.age); // 这里的this不会按预期指向Person实例}, 1000);// 箭头函数setInterval(() => {// 这里的this捕获的是Person实例的thisthis.age++;console.log(this.age); // 这里的this会按预期指向Person实例}, 1000);
}var p = new Person();
应用
<body><button>点击</button><script>document.querySelector('button').addEventListener('click', function () {// 在事件回调中, this指向button的dom对象console.log(this)setTimeout(() => {// 在定时的普通回调中, this指向window// 在定时的箭头回调中, this指向外部(定义时)的this, 也就是domthis.innerHTML = '点击了'}, 1000)})// 在回调函数定义时, 尽量使用箭头函数</script>
</body>
![[MYSQL] MYSQL 时间与时区](https://blog-static.cnblogs.com/files/johnnyzen/cnblogs-qq-group-qrcode.gif?t=1679679148)
