this指向问题

1.全局上下文

如果你在非严格模式（"use strict"）下直接在全局作用域中调用一个函数，this 将指向全局对象（在浏览器中通常是 window）。

function myFunction() {  
    console.log(this === window); // true  
}  
myFunction();

2.严格模式（"use strict"）

在严格模式下，全局上下文中的 this 不再指向 window，而是 undefined（除非它在函数内部被调用，那么 this 的值将取决于如何调用该函数）。

3.对象方法

当函数作为对象的方法被调用时，this 将指向该对象。

谁调用就指向谁

var myObject = {  
    property: 'Hello',  
    myMethod: function() {  
        console.log(this.property); // 输出 'Hello'  
    }  
};  
myObject.myMethod();

4.构造函数

当使用 new 关键字调用函数时，该函数会作为构造函数，并且 this 会被绑定到新创建的对象实例上。

function MyConstructor() {  
    this.property = 'Hello';  
}  
var obj = new MyConstructor();  
console.log(obj.property); // 输出 'Hello'

 

5.显式设置

你可以使用 call、apply 或 bind 方法来显式设置 this 的值。

1.call 方法

call 方法调用一个具有给定 this 值和作为单独参数提供的参数的函数。

function.call(thisArg, arg1, arg2, ...)

function greet(greeting, punctuation) {  
  return greeting + ', ' + this.name + punctuation;  
}  
  
const obj = { name: 'World' };  
  
console.log(greet.call(obj, 'Hello', '!')); // 输出 "Hello, World!"

2.apply 方法

apply 方法调用一个具有给定 this 值和作为数组（或类似数组对象）提供的参数的函数。

function.apply(thisArg, [argsArray])
 

function greet(greeting, punctuation) {  
  return greeting + ', ' + this.name + punctuation;  
}  
  
const obj = { name: 'World' };  
const args = ['Hello', '!'];  
  
console.log(greet.apply(obj, args)); // 输出 "Hello, World!"

3.bind 方法

bind 方法创建一个新的函数，当被调用时，它的 this 关键字将设置为提供的值，在调用新函数时，将给定参数列表作为原函数的参数序列的前置参数。

注意，bind 方法返回一个新的函数，并不会立即执行原函数。而 call 和 apply 则会立即执行原函数

function.bind(thisArg[, arg1[, arg2[, ...]]])
 

function greet(greeting, punctuation) {  
  return greeting + ', ' + this.name + punctuation;  
}  
  
const obj = { name: 'World' };  
const boundGreet = greet.bind(obj, 'Hello');  
  
console.log(boundGreet('!')); // 输出 "Hello, World!"

 

6.箭头函数

箭头函数不会绑定自己的 this 值，它会捕获其所在上下文的 this 值作为自己的 this 值。这意味着在箭头函数中，this 指向定义它的函数或全局对象（取决于箭头函数是在哪里定义的）。

箭头函数中的this与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在this !

        1.箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this 的值和外层的this是一样的

        2.箭头函数中的this引用的就是最近作用域中的this

        3.向外层作用域中，一层一层查找this,直到有this的定义

注意：

1.在开发中[使用箭头函数前需要考虑函数中this 的值]，事件回调函数使用箭头函数时，this 为全局的window因此DOM事件回调函数如梁里面需要DOM对象的this,则不推荐使用箭头函数

2.同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数
 

var obj = {  
    property: 'Hello',  
    myMethod: function() {  
        setTimeout(() => {  
            console.log(this.property); // 输出 'Hello'，因为箭头函数捕获了外部的 this  
        }, 0);  
    }  
};  
obj.myMethod();

 

7.事件监听器

在DOM事件监听器中，this 通常指向触发该事件的元素。

document.getElementById('myButton').addEventListener('click', function() {  
    console.log(this); // 输出触发点击事件的按钮元素  
});