JavaScript--函数中this指向问题

相信大家在刷题或者面试，笔试中都会碰到有关函数中this指向的问题，尽管题目很变态，各种指来指去的非常伤脑筋，但是大家记住下面的五种情况，一层层的寻找，都会得出答案，如果有其它情况，欢迎大家在评论区留言，话不多说，直接上代码！！！！

一、在方法中，this 表示该方法所属的对象。

var person = {
  name: "zhangsan",
  sayName: function () {
    console.log(this.name);
  },
};
person.sayName();

 

 此时this是在person对象中sayName声明的，然后this指向该方法所属的对象，即谁调用了方法，this就指向谁，所以此刻this应该指向的是person对象

name = "zhangsan";
function sayName() {
  console.log(this.name);
}
sayName();

注意：当方法在全局作用域中被调用时，this指向的就是全局作用域，此时this.name就应该是全局作用域下的全局变量，它不能找到用var，let，const声明的变量，因为用关键字在全局作用域下声明的变量是全局作用域的局部变量

二、如果单独使用，this 表示全局对象。

console.log(this) //直接写在全局作用域下

 

 这里this指向一个空对象，这个空对象是Common.js的模块化module对象的exports，但是在浏览器环境下this指向window

三、在函数中，this 表示全局对象。

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

 

 在函数中this指向的是全局对象global，但是在浏览器下this指向的还是window

四、在事件中，this 表示接收事件的元素。

<button onclick="this.style.display='none'"> 点我后我就消失了 </button>

 比如说给一个按钮绑定了一个点击事件，点击之后设置为隐藏，这时候这个事件的载体是按钮，所以这个this自然而然的指向这个button元素

五、在显式函数绑定时，我们可以自己决定this的指向

var obj = {
  name: "zhangsan",
  sayName: function (a) {
    console.log(this.name + a);
  },
};
var b = obj.sayName;//这里b相当于函数

// 1.函数名.call(执行环境对象，实参列表)
// 执行环境对象其实就是this要指向的对象
b.call(obj, 123, 23);

// 2.函数名.apply(执行环境对象，实参列表数组)
b.apply(obj, [123, 23]);

// 3.函数名.bind(执行环境对象)(实参列表)
b.bind(obj)(5);

// 使用一个新的变量接受bind修改后的函数
var res = b.bind(obj,1,2)
res(3)
console.log(res);

 以上就是this指向的五种情况，如果还有其他的情况，欢迎大家留言，感谢大家