this

this代表了函数运行时，是函数运行上下文

纯函数调用,此时this指向全局对象global

 const x  = 1;
 global.x = 2;
 function hello() {
 const x = 3;
 console.log(this.x);
 }
 hello();//2

作为构造函数调用,此时this指向new出来的实例对象

 const x  = 1;
 global.x = 2;
 function Hello() {
 this.x     = 3;
 this.hello = function () {
 console.log(this.x);
 }
 }
 new Hello().hello();//3

作为对象方法调用,此时this指向该对象

 const x  = 1;
global.x = 2;
function hello() {
    console.log(this.x);
}
const o = {};
o.x=4;
o.hello = hello;
o.hello.call({x:6});

call、apply调用,运行时改变函数上下文环境,即改变this指向;第一个参数都是指定this指向的环境,call接受依次参数,apply接收参数伪数组;

 const apple = {color: 'red'}, banana = {color: 'yellow'};
 function sayYourColor() {
 this.color = 'default';
 this.say   = function (oo) {
 console.log(`my color is ${this.color},  oo is ${oo}`);
 }
 }
 const fruit = new sayYourColor();
 fruit.say('a');//my color is default,  oo is a
 fruit.say.call(apple, 'b');//my color is red,  oo is b
 fruit.say.apply(banana, ['c']);//my color is yellow,  oo is c

bind和箭头函数,只有第一次bind会生效;箭头函数定义时会绑定父环境中的this,不会运行时动态变化,即使bind也无法改变

 function setTimeOutSelf() {
 this.x    = 'self';
 this.out1 = function () {
 setTimeout(function () {
 console.log(`this.x -> ${this.x}`);
 }, 1000)
 };
 this.out2 = function () {
 setTimeout(function () {
 console.log(`this.x -> ${this.x}`);
 }.bind({x:'out'}).bind(this), 1000);
 };
 this.out3 = function () {
 setTimeout((()=> {
 console.log(`this.x -> ${this.x}`);
 }).bind({x:'out'}), 1000)
 }
 }
 const TOS=new setTimeOutSelf();
 TOS.out1();//this.x -> undefined
 TOS.out2();//this.x -> out
 TOS.out3();//this.x -> self

bind 是返回对应函数；apply 、call 则是立即调用。

JS 每一个 function 有自己独立的运行上下文，而箭头函数不属于普通的 function，所以没有独立的上下文。所以在箭头函数里写的 this 其实是包含该箭头函数最近的一个 function 上下文中的 this（如果没有最近的 function，就是全局）