JavaScript--this

this

this是执行上下文对象的一个属性，想要知道this的指向，首先要了解它所在的作用域，不同作用域下的this指向的东西是不一样的。

全局作用域下的this

首先，全局作用域就是直接在script标签中，直接编写的JS代码（单独的js文件中直接编写的代码），全局作用域在打开页面的时候创建，关闭的时候销毁，并且拥有一个window的全局对象。

在全局作用域下的this：

var a = 1;
console.log(this.a); // 1

this.b = 2;
console.log(this.b); // 2

window.c = 3;
console.log(this.c); // 3

let d = 4;
console.log(this.d); // undefined

const e = 5;
console.log(this.e); // undefined

function f(){
    return 1
}
console.log(this.f()) // 1

console.log(this === window) // true

上面的例子可以看出，除了const 和 let 声明的返回为undefined（块级作用域，它不属于顶层的对象，所以不需要加this，这里包括了es6中的class声明的全局变量），其他的声明方式均为全局作用域，可以看出，全局作用域下this和window是相等的（不能再严格模式下，严格模式下，this禁止指向全局变量）；所以这里我们可以将this换成window，也没问题。但是我们在实际开发中，全局作用域下，我们会直接省略this。

在函数代码中的this

在函数代码中的this,作用域中的this指向可能会不同，但是，函数在运行的时候，this的指向是不会改变的，同时也不能被赋值。

我们可以通过简单的案例，来看看函数中的this是指向哪儿的：

function f(){
    console.log(this);
}
f();// Window

这里的this也是直接指向的window。

当作为函数的时候调用：

function f(){
    this.a = 1;
    console.log(this); // Window
}
f();
console.log(a); // 1

所以，当函数作为独立函数调用的时候，this默认指向的是window（非严格模式下）。

当作对象属性时候调用

var a = 1;
var obj = {
    a : 2,
    f:function(){
        console.log(this); // 这里的this指向的是obj
        console.log(this.a); // 2
    }
}
obj.f();

当作为对象的时候，谁调用，this就指向谁。

比如：

var a = 1;
var obj = {
    a : 2,
    obj2:{
        a:3,
        f:function(){
            console.log(this); // 这里的this指向的是obj2
            console.log(this.a); // 3
        }
    }
   
}
obj.obj2.f();

这里是obj2调用的函数 f ，所以this指向的是obj2。

使用apply或call改变this指向

apply 和 call 可以改变函数的指向：

var a = 1
function f() {
    console.log(this.a);
}
var obj = {
    a: 2
}
var obj2 = {
    a: 3
}
f(); // 1 this=>window
var newobj = f.bind(obj)
newobj(); // 2 this=>obj
f.call(obj2); // 3 this=>obj2

构造函数中的this

var a = 1
function Person(){
    a = 2;
    console.log(this.a) // undefined
    this.b = 3;
    console.log(this.b); // 3
    console.log(this) // 该构造函数
}
new Person()

这里的this指向了该构造函数本身。

定时器中的this

function f(){
    setTimeout(function(){
        console.log(this); // Window
    },1000)
    setInterval( function() {
        console.log(this); // Window
    }, 1000);
}

function f2(){
    setTimeout(()=>{
        console.log(this); // Window
    },1000)
    setInterval(()=>{
        console.log(this); // Window
    }, 1000);
}

定时器中指向的是Window。

var obj = {
    f : function(){
        console.log(this); // 该对象
        setTimeout(function(){
            console.log(this); // Window
        })
    }
}
obj.f()

对象中的定时器，也是指向的window。

箭头函数中的this

箭头函数它是没有自己的this，它的this是继承而来的，它不会受到call()，apply()，bind()的影响。