定义：this是 JavaScript 语言的一个关键字。它只能在函数体内部使用，函数的不同使用场合，this有不同的值。总的来说，this就是函数运行时所在的环境对象。

纯粹的函数调用（普通函数）

var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1

函数test的this指向的就是函数test所运行的环境（即上下文），因为test所运行的环境是window（调用时test()实际上是 window.test()），所以此时函数test的this指向它的调用者window，this.x等同于window.x,打印值为1。

作为构造函数调用

所谓构造函数，就是通过这个函数，使用new关键字可以生成一个新对象。这时，this就指这个新对象。

function test() {
　this.x = 1;
}

var obj = new test();
obj.x // 1

构造函数test通过new关键字生成新对象obj,此时test为obj的构造函数（obj.constructor得到的函数为test），因此test作用于对象obj（即test所运行的环境是obj）,test的this指向它所运行的环境obj,所以构造函数里面的this.x等同于obj.x。

为了表明这时this不是全局对象，我们对代码做一些改变：

var x = 2;
function test() {
  this.x = 1;
}

var obj = new test();
x  // 2

箭头函数的this指向问题

箭头函数本身没有this指向, 它的this是继承而来；它的this指向所在父级作用域（即宿主对象）运行时所在的环境对象；默认指向在定义它时所处的对象。
备注：如果将this传递给call、bind、或者apply来调用箭头函数，它将被忽略。

var globalObject = this;
var foo = () => this;
console.log(foo() === globalObject); // true

globalObject作用于全局window,foo为箭头函数没有自身的this，指向在定义它时所处的对象,即window。

var s = 21;
 
const obj = {
    s: 42,
    m: () => console.log(this.s),
    k: function(){console.log(this.s)}
};
 
obj.m();	// 21
obj.k();	// 42

obj.m的this作用于箭头函数，由于箭头函数没有自身的this指向，它的this作用于它的父级作用域obj运行时所在的环境（即全局的window对象）； obj.k的this作用于函数k的this运行时所在的环境obj,函数k的this.s等同于obj.s。

更改this指向

call()方法
语法

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

第一个参数thisArg为this的指向，arg1, arg2, ...指定的参数列表。

//定义函数
function fn(n1,n2){
   console.log(this);  
   console.log(n1,n2)
}
//调用call()方法
fn.call();//=>this:window;
let obj = {fn:fn};
fn.call(obj);//=>this:obj;n1,n2:undefined
fn.call(1,2);//=>this: 1;n1=2,n2=undefined;
fn.call(obj,1,2);//=>this: obj;n1=1,n2=2;

//Call方法的几个特殊属性
//非严格模式下
fn.call(undefined);//this=>window
fn.call(null);//this=>window
//严格模式下
"use strict"
fn.call(undefined);//this=>undefined
fn.call(null);//this=>null

apply()方法
语法

apply(thisArg, argsArray)

thisArg在 func 函数运行时使用的 this 值。thisArg一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。

//call()的传参方式
fn.call(obj, 1, 2);
//apply()的传参方式
fn.apply(obj, [1, 2]);

//apply方法的使用和call方法基本相同，唯一的区别是，apply方法传参要求是数组类型的，数组内可以任意形式的数据
function fn (n1,n2){
    console.log(this);
    console.log(n1,n2)
    console.log(arguments)
}
let obj = {fn:fn};

//调用apply()方法
fn.applay(abj,[1,2]);
fn.applay(abj,1,2)；//报错

fn.applay(abj,[11,'apply',{a:123}]);//注意第二个参数必须是数组，否则会报错

# bind()方法
bind：语法和call一模一样，区别在于立即执行还是等待执行，bind与call的唯一区别就是call直接改变函数test的指向，而bind是生成了一个新函数test2()，该函数改变了指向。

//bind和call方法调用形式类似，但是原理完全不同
fn.call(obj,10,20);//=>fn先执行，将fn内的this指向obj，并且把参数10,20传递给fn

fn.bind(obj,10,20)//bind是先将fn中的this指向obj，并且将参数10,20预先传递给fn，但是此时的fn并没有被执行，只有fn执行时this指向和传递参数才有作用
fn.bind(obj,10,20);//=>不会有任何输出
fn.bind(obj,10,20)();//=>调用后才会有输出

//=>需求：点击box这个盒子的时候，需要执行fn，并且让fn中的this指向obj
oBox.onclick=fn; //=>点击的时候执行了fn,但此时fn中的this是oBox

oBox.onclick=fn.call(opp); //=>绑定事件的时候就已经把fn立即执行了(call本身就是立即执行函数),然后把fn执行的返回值绑定给事件

oBox.onclick=fn.bind(opp);
//=>fn.bind(opp)：fn调取Function.prototype上的bind方法，执行这个
/* 
 * function(){
 *     fn.call(opp);
 * }
 */
oBox.onclick=function(){
   //=>this:oBox
    fn.call(opp);
}

声明：以上做个人笔记用，如果理解不正确欢迎各位大佬指正。

前端this指向个人整理笔记

纯粹的函数调用（普通函数）

作为构造函数调用

箭头函数的this指向问题

更改this指向