this in js

Statement, the original text is taken from the wild dog public account, this article is just my study notes on this article

/***
 * js中的this，javascript中的this指向并不是在函数定义的时候确定的，而是在调用的时候确定的额。换句话说，函数的调用方式决定了this的指向。
 * js中，普通函数的调用有三种：直接调用、方法调用和new调用。除此之外，还有一些特殊的调用方式，比如通过bind()将函数绑定到对象之后再进行调用、通过call()、apply()进行调用等。而es6引入了箭头函数之后，箭头函数调用时，其this指向又有所不同。
 */
//1直接调用，就是通过函数名(...)的方式调用的，这时候，函数内部的this指向全局对象在浏览器中全局对象是window,在node中全局对象是global
    //eg.1.
//简单兼容浏览器和nodejs的全局对象
const _global = typeof window === "undefined" ? global :window;

function test(){
    console.log(this === _global);//true
}

test();//直接调用

//eg.2.
(function(_global){
    //通过IIFE限定作用域
    function test(){
        console.log(this === _global);//true
    }

    test();//非全局作用域下的直接调用

})(typeof window === "undefined" ? global : window);

/**
 * // bind()对直接调用的影响
 * function.prototype.bind()的作用是将当前函数与指定的对象绑定，并返回一个新函数，这个新函数无论以什么样的方式调用，其this始终指向绑定的对象
 */

//eg.1.
const obj = {};

function test(){
    console.log(this === obj,this);
}

const testObj = test.bind(obj);
test(); //false,window
testObj(); //true

/**
 * call和apply对this的影响
 * 使用apply和call的时候仍然需要注意，如果目录本身是一个绑定了this对象的函数，那apply和call不会像预期那样执行
 */
//eg.1.
const obj = {};
function test(){
    console.log(this === obj);
}

//绑定到一个新对象，而不是obj
const testObj = test.bind({});
test.apply(obj);    //true

//期望this是obj，即输出true
//但是因为ietestObj绑定了不是obj的对象，所以会输出false
testObj.apply(obj);    //false

//由此可见，bind对函数的影响是深远的，慎用！

/***
 * 2.方法调用
 * 方法调用是指通过对象来调用其方法函数，它是对象.方法函数(...)这样的调用形式。这种情况下，函数中的this指向调用该方法的对象。但是，同样需要注意bind()的影响。
 */

const obj = {

    //第一种方式，定义对象的时候定义其方法
    test(){
        console.log(this === obj);
    }
};

//第二种方式，对象定义好之后为其附加一个方法（函数表达式）
obj.test2 = function(){
    console.log(this === obj);
}

//第三种方式和第二种方式原理相同
//是对象定义好之后为其附加一个方法（函数定义）
function t(){
    console.log(this === obj);
}
obj.test3 = t;

//这也是为对象附加一个方法函数
//但是这个函数绑定了一个不是obj的其他对象
obj.test4 = (function(){
    console.log(this === obj);
}).bind({});

obj.test();     //true
obj.test2();    //true
obj.test3();    //true

//受bind()影响，test4中的this指向不是obj，绑定到了新的空对象上,如果绑定到obj上，则为true
obj.test4();    //false

//这里需要注意的是，后三种方式都是预定义函数，在将其附加给obj对象作为其方法。再次强调，函数内部的this指向与定义无关，受调用方式的影响。

/**
 * 方法中this指向全局对象的情况
 * 注意这里说的是方法中而不是方法调用中。方法中的this指向全局对象，如果不是因为bind(),那就一定是因为不是用的方法调用方式
 */
//eg.1.
const obj = {
    test(){
        console.log(this === obj,this);
    }
};

const t = obj.test;
t();    //false,window

//t就是obj的test方法，但是t()调用时，其中的this指向了全局.

class Handlers{
    //这里 $button 假设是一个指向某个按钮的jQuery对象
    constructor(data,$button){
        this.data = data;
        $button.on("click",this.onButtonClick);
    }

    onButtonClick(e){
        console.log(this.data);
    }
}

const handlers = new Handlers("string data",$("#someButton"));
//对#someButton 进行点击操作之后
//输出undefined
//但预期是输出string  data

//很显然this.onButtonClick作为一个参数传入on()之后，事件触发时，是对这个函数进行的直接调用，而不是方法调用，所以其中的this会指向全局对象。要解决这个问题有很多种方法

//1.这是在es5中的解决方法之一
var _this = this;
$button.on("click",function(){
    _this.onButtonClick();
});

//也可以通过bind()来解决
$button.on("click",this.onButtonClick.bind(this));

//es6中可以通过箭头函数来处理，在jQuery中慎用
$button.on("click",e => this.onButtonClick(e));

//不过请注意，将箭头函数用作jQuery的回调时造成要小心函数内对this的使用。jQuery大多数回调函数（非箭头函数）中的this都表示调用目标，所以可以写$(this).text()这样的语句，但jQuery无法改变箭头函数的this指向，同样的语句语义完全不同。

/**
 * new调用
 */
//在es6之前，每一个函数都可以当作时构造函数，通过new调用来产生新的对象（函数内无特定返回值的情况下）。而es6改变了这种状态，虽然class定义的类用typeof运算符得到的仍然是"function"，但它不能像普通函数一样直接调用；同时，calss中定义的方法函数，也不能当作构造函数用new来调用。

//而在es5中，用new调用一个构造函数，会创建一个新对象，而其中的this就指向这个新对象。这没有什么悬念，因为new本身就是设计来创建新对象的。

//eg.1.
var data = "Hi";    //全局变量

function AClass(data){
    this.data = data;
}

var a = new AClass("Hello World");
console.log(a.data);    //Hello World
console.log(data);  //Hi

var b = new AClass("Hello World");  //new 创建的新对象
console.log(a === b);     //false

/**
 * 4箭头函数中的this
 */

//先来看看MDN 上对箭头函数的说明

//An arrow function expression has a shorter syntax than a function expression and dose not bind its own this,argumengs,super,or new.target,Arrow functions are always anonymous.These function expressions are best suited for non-method functions,and they cannot be used as constructors.
//这里已经清楚的说明了，箭头函数没有自己的this绑定。箭头函数中使用的this，其实时直接包含它的那个函数或函数表达式中的this。

//eg.1.
const obj = {
    test(){
        const arrow = () => {
            //这里的this时test()中的this,
            //由test()的调用方式决定
            console.log(this === obj);
        };
        arrow();
    },
    getArrow(){     return ()=>{
        //这里的this是getArrow()中的this,
        //由getArrow()的调用方式决定
        console.log(this === obj);
    };

    }
};

obj.test();     //true

const arrow = obj.getArrow();
arrow();    //true

//示例中的两个this都是由箭头函数的直接外层函数(方法)决定的，而方法函数中的this是由其调用方式决定的。上例的调用方式都是方法调用，所以this都指向方法调用的对象，即obj。
//箭头函数让大家在使用闭包的时候不需要太纠结this，不需要通过像_this这样的局部变量来临时引用this给闭包函数使用。来看一段Babel对函数的转译可能能加深理解:
//ES6
const obj = {
    getArrow(){  return() =>{
        console.log(this === obj);
    };

    }
}

//ES5,由Babel转译
var obj = {
    getArrow:function getArrow(){
        var _this = this;       return function(){
            console.log(_this === obj);
        };
    }
}

//另外需要注意的是，箭头函数不能用new调用，不能bind()到某个对象（虽然binc()方法调用没问题，但是不会产生预期效果）。不管在什么情况下使用箭头函数，它本身是没有绑定this的，它用的是直接外层函数(即包含它的最近的一层函数或函数表达式)绑定的this。

I hope my experience of entering the pit is helpful to you, may the Holy Light be with you