JS的this指向

一、this指向谁？

其实就一句话：谁最终调用函数，this就指向谁。

二、this指向特点

1、this指向的，只可能是对象。

2、this指向谁，不取决于this写在哪，而取决于函数在哪里调用。

3、this指向的对象，称之为函数的上下文context，也叫函数的调用者。

三、具体场景

1、直接调用

直接调用函数，即在window上调用，this指向window。

function fn() {
    var a = 2;
    console.log(this, this.a);
}
var a = 1;
fn(); // window 1

2、对象调用

在对象上调用函数，this指向这个对象。

function fn() {
    var a = 2;
    console.log(this, this.a);
}
var a = 1;
var obj = {
    a: 3,
    fn: fn,
}
obj.fn(); // obj 3

3、new操作符

对于new操作符来说，this就永远绑定在fn上，即指向new出来的对象，不会被任何方式改变this。

function Fn() {
    var a = 2;
    console.log(this, this.a);
}
var a = 1;
var fn = new Fn(); // Fn undefined

4、箭头函数里面调用

首先箭头函数其实是没有this和arguments的，箭头函数中的this只取决包裹箭头函数的第一个普通函数的this。

function fn() {
    var a = 2;
    return () => {
        return () => {
            console.log(this, this.a);
        }
    }
}
var a = 1;
fn()()(); // window 1

这个例子中，因为包裹箭头函数的第一个普通函数是fn，所以此时的this指向的是window。

5、定时器(匿名函数)调用

函数作为window内置函数的回调函数调用，调用的是window.setTimeout，所以这个时候this指向window。

var a = 1;
setTimeout(function() {
    var a = 2;
    console.log(this, this.a); // window 1
}, 10);

6、call/apply/bind

对于call、apply、bind这些改变上下文的函数来说，this指向取决于第一个参数。如果第一个参数为''、null、undefined等，则this指向window；有参数则this指向第一个参数。

function fn() {
    var a = 2;
    console.log(this, this.a);
}
var obj = {
    a: 3,
};
var a = 1;
// 参数为空，this指向window
fn.call(); // window 1
fn.apply(); // window 1
var fn1 = fn.bind();
fn1(); // window 1
// 有参数，this指向第一个参数，即obj
fn.call(obj); // obj 3
fn.apply(obj); // obj 3
var fn2 = fn.bind(obj);
fn2(); // obj 3