我理解的this

一直以来，对this的指向问题一直没有好好理解，最近得空，赶紧恶补一下。

1、涵义

this是什么？

简单说，关键字“this”指向当前代码运行时的对象（当前运行时调用该属性或方法的对象）

this是在函数调用过程中设置的

例子：

function fn() {
    return this.name;
}

let a = {
    name: '小明',
    who: fn
}

let b = a.who;
console.log(a.who());  //this指向a，当前who方法是被a调用
console.log(b()); //this指向window，当前b处于全局环境下，this.b === window.b，所以this指向window

2、this使用环境

全局上下文

在全局上下文环境中，this指向window对象

// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true
let a = 1;
console.log(window.a); //1
this.b = 2;
console.log(window.b); //2
console.log(b); //2

函数上下文

在函数内部，this的值取决于函数被调用的方式。

例子：

function fn() {
    return this.name;
}

let a = {
    name: '小明',
    who: fn
}

let b = {
    name: '小红',
    who: fn,
    c: {
        d: fn
    }
}


console.log(a.who()); //this指向a
console.log(b.who()); //this指向b
console.log(fn()); //this指向window
console.log(b.c.d()); //this指向b.c，为什么不是指向b呢？那是因为this总是指向直接调用它的最近的对象，this只会向上继承最近的一层，不会继承更上面的层；
let h = b.c.d;
h(); //此时this指向window，因为h处于全局对象中

再看一个例子：

let a = {
    b () {
        console.log(this);
        let c = function () {
            console.log(this);
        }();
    }
}
a.b();
这两个this分别指向什么呢？
//第一个this指向a
//第二个this指向window

为什么会这样呢？
就如开头所说的：在函数内部，this的值取决于函数被调用的方式。

上面例子的函数可以看成如下的变体：

let d = function () {
        console.log(this);
    }
let a = {
    b () {
        console.log(this);
        let c = d();//此时，d相当于是被window调用，所以this此时指向window
    }
}
a.b();

那如果我们还是要坚持第一种写法，那可以对this事先赋予一个变量来保存

let a = {
    b () {
        console.log(this);
        let self = this;
        let c = function () {
            console.log(self);
        }();
    }
}
a.b(); //这样this的值就不会被改变

箭头函数下的this

let a = {
    b () {
        console.log(this);
        let c = () => {
            console.log(this);
        };
        return c;
    }
}
a.b(); // 第一个this指向a
a.b()(); // 两个this都指向a
//两个this都绑定到a，这与非箭头函数的绑定结果完成不一样。
//这是因为当使用箭头函数时，this自动绑定到执行上下文的外层函数上
let f = a.b;
f()(); //此时this指向window，因为this是在执行的时候设置。这时候的f是被window调用，所以this指向window；
let f = a.b(); //此时，this指向a。a.b函数已经被调用，所以this此时已经绑定到a上；
f(); //此时的this绑定到哪里呢？没错，还是在a上，这是因为箭头函数中this的值已经被绑定到外层函数上。

this的绑定方法：call、apply、bind

使用call，或者apply方法可以指定this在执行上下文的指向

call与apply的作用相同，它们的区别在于接受参数的方式不一样。call()接受的参数以列表的形式传参，而apply接受的参数以数组的方式传参

例子：call、apply方法

function sum(b) {
    return this.a + b;
}
let sum1 = {a: 1};
sum.call(sum1, 2); //3 this绑定到sum1
sum.apply(sum1, [2]); //3 this绑定到sum1

例子：bind方法

ES6新增了绑定this的bind()方法，调动fn.bind(obj)方法，会创建一个与fn具有相同函数体和作用域的函数, 同时this将永久地被绑定到指定的obj对象上。

function fn() {
    return this.a;
}
let obj = {
    a: 'binded'
}
let bind1 = fn.bind(obj);
console.log(bind1()); //binded
let bind2 = bind1.bind({a: 'binded2'});
console.log(bind2); //binded

下面两种环境中的this，就是我们经常使用的，略过啦

构造函数中的this

构造函数中的this指向new出来的对象（构造的新对象）

事件处理函数中的this

当函数被用作事件处理函数时，this指向当前触发的DOM对象

例子：

<button onclick="alert(this.tagName)">
  Show this
</button>
// this指向当前target：button元素