js中的this

声明，原文摘自野狗公众号，本文只是本人对这篇文章的学习笔记

/*** * 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,windowtestObj(); //true/** * call和apply对this的影响 * 使用apply和call的时候仍然需要注意，如果目录本身是一个绑定了this对象的函数，那apply和call不会像预期那样执行 *///eg.1.const obj = {};function test(){    console.log(this === obj);}//绑定到一个新对象，而不是objconst testObj = test.bind({});test.apply(obj);    //true//期望this是obj，即输出true//但是因为ietestObj绑定了不是obj的对象，所以会输出falsetestObj.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();     //trueobj.test2();    //trueobj.test3();    //true//受bind()影响，test4中的this指向不是obj，绑定到了新的空对象上,如果绑定到obj上，则为trueobj.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 Worldconsole.log(data);  //Hivar 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();     //trueconst arrow = obj.getArrow();arrow();    //true//示例中的两个this都是由箭头函数的直接外层函数(方法)决定的，而方法函数中的this是由其调用方式决定的。上例的调用方式都是方法调用，所以this都指向方法调用的对象，即obj。//箭头函数让大家在使用闭包的时候不需要太纠结this，不需要通过像_this这样的局部变量来临时引用this给闭包函数使用。来看一段Babel对函数的转译可能能加深理解://ES6const 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。