Js中的this

js中的this关键字不同于其他大多数编程语言，其他语言的this基本都是指当前对象本身，不会有什么变体，而js不同，它的this可能在不同的地方指向不同的变量，下面主要记录一些常见的情况。

以下均为非严格模式下的场景

传统函数写法

let a = {
    test: 1,
    fn: function() {
        console.log(this.test);
    }
};

a.fn() // 1，运行时的最后一个对象是a，所以就是a中的test

let a = {
    test: 1,
    fn: function() {
        console.log(this.test);
    }
};

var test = 2;

a.fn() // 1，运行时的最后一个对象是a，依旧是a中的test, 不受外层test的影响

let a = {
    test: 1,
    fn: function() {
        console.log(this.test);
    }
};

var test = 2;

let b = {
	test: 3
}

a.fn.call(this) // 2
a.fn.apply(this) // 2
a.fn.bind(this)() // 2

a.fn.call(b) // 3
a.fn.apply(b) // 3
a.fn.bind(b)() // 3

上面三个利用call/apply/bind进行了this指向的变更，故this指向了最外层，如果是浏览器默认是window

箭头函数写法

let a = {
    test: 1,
    fn: () => {
        console.log(this.test);
    }
};

var test = 2;

let b = {
	test: 3
}

a.fn() // 2
a.fn.call(b) // 2
a.fn.apply(b) // 2
a.fn.bind(b)() // 2

由于使用了es6的箭头函数，函数中的this在定义时就确定好了(这里也就是最外层词法作用域)，不会被call/apply/bind所改变。

除此之外，call/apply/bind之间的作用和区别，简言之，作用都是为了改变this指向（让b可以调用a的方法），只不过：

1. 改变的this只针对传统函数中的this有效。
2. call/apply直接调用，而bind返回的是函数，还需要再()才能调用。
3. call和bind的参数一样,都是各个参数以逗号分隔，而apply的参数是各个参数组成的数组。