详解原生JavaScript的this指向问题和强制改变this指向的三种方法

this关键字概念

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

this在几种情况下指向谁

1.在方法中,this 表示该方法所属的对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
浏览器显示内容为:John Doe  

2.如果单独使用,this 表示全局对象。

"use strict";
var x = this;
在浏览器中，window 就是该全局对象为 [object Window]

3.在函数中,this 表示全局对象。

function myFunction() {
  return this;
}
在浏览器中，window 就是该全局对象为 [object Window]
window.myFunction();

4.在函数中,在严格模式下,this 是未定义的(undefined)。

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

5.在事件中,this 表示接收事件的元素。

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

强制改变this指向的三种方法

call()方法

格式 函数名.call();
参数： 
	第一个参数:传入该函数this指向的对象，传入什么强制指向什么
	第二个参数:将原函数的参数往后顺延一位。
	show.call('call',10,20);

apply()方法

格式 函数名.apply();
参数： 
	第一个参数:传入该函数this指向的对象，传入什么强制指向什么
	第二个参数:数组,数组里面放入我们原有的参数
	show.apply('ap',[10,20])

bind() 方法:预设this指向

先通过bind的预设下thie指向，然后返回一个新函数，此时这个新函数this已经指向bb了
var a = show.bind('bb');
a(10,20);
简写:show.bind('bb')(10,20);  
show.bind('指向的名字')('原来的参数')