大部分网站的文章都直接说这几种：
1、普通函数中的this指向window
2、定时器中的this指向window
3、箭头函数没有this,它的this指向取决于外部环境、指向最近的的函数
4、事件中的this指向事件的调用者
5、构造函数中this和原型对象中的this,都是指向构造函数new 出来实例对象
6、类 class中的this 指向由constructor构造器new出来的实例对象
7、自调用函数中的this 指向window

是的，背出这几种或许面试的时候就过关了，但是你真的掌握了吗？别急，下面我们一起来学习一下；

1. this指向

1.1 普通函数调用的this指向

通过刚才我们知道普通函数调用时的this指向是window

如图

1.2 方法调用this指向

做为方法调用，this指向调用该方法的对象

var obj = {
    fn: function () {
        console.log(this);//obj
    }
}

obj.fn();

正如所图，this为调用该方法函顺的对象本身

扩展一下，很多面面试题结合起来；

1.3 作为构造函数调用this的指向

构造函数内部的this，this指向由该构造函数创建的实例对象

function Person (name, age){
    this.name = name;
    this.age= age;
    this.type = '人';
    this.sayHello = function(){
        console.log('hello'+this.name)
    }
}
var p1 = new Person('Tom',18)
p1.sayHello()  //hello Tom
var p2 = new Person('Jack',16)
p2.sayHello()  //hello Jack


解释：
此时的this指向的是构造函数，即p1 和 p2

1.4 事件的处理函数中this的指向

作为事件的处理函数，this指向触发该事件的对象

btn.onclick = function() {
    console.log(this);//当前点击的按钮btn
}

1.5 定时器的参数中this的指向

作为定时器的参数，this指向也是window

setInterval(function () {
    console.log(this);
}, 1000);

对函数内部 this 指向基本就这些，知道了概念，还是要多实践，写代码写多了自然而然就熟悉了。

总结

总结起来函数内部的this，是由函数调用的时候来确定其指向，不是一成不变的，起码要知道上面这些场景，希望能帮助到你；

2. 改变this指向

改变this指向可以用这三种：call，bind，apply；

我们知道有些情况下我们为了使用某种特定环境的 this 引用，这时候时候我们就需要采用一些特殊手段来处理了，例如我们经常在定时器外部备份 this 引用，然后在定时器函数内部使用外部 this 的引用。

然而实际上对于这种做法我们的 JavaScript 为我们专门提供了一些函数方法用来帮我们更优雅的处理函数内部 this 指向问题。别着急，接下来我们学习一下 call、apply、bind 三个函数方法

JavaScript中所用的function本身也是内置对象Function的实例(对象)

function fn(x, y) {
    console.log(this);//window
    console.log(x + y); //11
}

fn(5, 6);

所以普通函数的this指向的是window

2.1 call

call(参数1 ，参数2 ，参数3……) 调用函数，会改变函数中的this

第一个参数: 设置函数内部this的指向(此时的this指向obj对象)

其它参数: 对应函数的参数x和y；

函数的返回值: call的返回值就是函数的返回值

function fn(x,y){
    console.log(this)
    console.log(x+y)
}
var obj ={
    name: '署歌'
}
fn.call(obj,5,6)

解释：
fn函数的this被call指向到第一个参数，所以this即obj对象本身；

2.2 apply

apply(参数1 ，参数2) 只有两个参数，调用函数会改变函数中的this

第一个参数：设置函数内部this的指向

第二个参数: 是数组

function fn(x,y){
    console.log(this)
    console.log(x+y)
}
var obj1 ={
    name: '署歌'
}
fn.apply(obj1,[5,6])

apply 用法和call 基本一样，唯独区别是入参不一样；

call: 入参为一个一个的参数

appy: 入参为一个数组

2.3 bind

bind(参数1 ，参数2 ，参数3……) 改变函数中的this，不会调用函数，而是把函数复制一份

第一个参数：设置函数内部this的指向

其它参数: 对应函数的参数

function fn(x,y){
    console.log(this)
    console.log(x+y)
}
var obj2 ={
    name: '署歌'
}
var f = fn.bind(obj2,5,6)
f()

解释：
改变函数中的this，不会调用函数，而是把函数复制一份，所以要重新赋值，再使用；

总结

apply 用法和call 基本一样，唯独区别是入参不一样；

call: 入参为一个一个的参;
appy: 入参为一个数组

bind: 改变函数中的this，不会调用函数，而是把函数复制一份，所以要重新赋值，再使用；

3. 其他

如果觉得对你有帮助，也欢迎打赏！嘻嘻

有其他兴趣可以关注我的：

门户站点：sevenliao.com

博客站点：13culb.com

技术博客站点：sevenliao.cn

this指向有哪几种？