this总是指向一个对象，有时指向全局对象，有时指向构造对象，有时指向DOM对象
一、javascript中的this使用场景
1. 作为对象的方法调用
做为对象的方法调用时 this 指向对象本生
2. 作为普通函数被调用
普通函数里的this总是指向全局变量
对象的方法复制给变量，在通过变量来调用后对象的方法变成了普通函数
观看这个例子发现：
getName1 = Person.getName 是把getName1指向Person.getName方法的内存地址(方法本身没有被执行)，其本质是个函数，所以在使用getName1() 时就是调用普通函数
getName2 = Person.getName() 是把Person.getName的返回值(已经执行了)bingxl赋值给getName2
对两个变量经行typeof操作
3. DOM事件触发函数里的this
DOM事件触发函数里的this指向DOM节点本身
test() 是一个普通函数，所以test里的this指向了全局对象window
4. 构造器调用
使用new运算符调用构造函数时会返回一个对象，构造函数里的this一般就指向返回的对象
当构造函数使用return显式的返回一个对象时new操作符返回的就是显式返回的对象
5. call ， apply 和 bind
通过call 或apply调用会改变this的指向传入的对象
讲完了this的4个使用方法，举一些面试题
后面三句代码得到什么？
第一个aaa.say();输出“哈利”，这个没啥好讲的；
第二个bbb.say()，bbb=对象声明自身的say方法只是把aaa对象的say方法引用过来，但注意，这里引用的是一个方法而非一个对象，而aaa.say存储的是一个匿名函数。
如果这样不好理解，那么我们可以改写下bbb对象的写法，如下：
这种写法与原来的代码没有什么区别，但是可以让人看的更明白些，输出“赫敏”；
第三个ccc()是在最外层执行，也就是在全局对象window下。所以ccc()执行的时候this指代的就是window对象。而在window对象下声明了name属性，就相当于window.name = '罗恩'，输出的当然就是罗恩。
当然，也有特殊情况，那就是 setTimeout 和 setInterval 。如果开头的aaa对象的声明改成：
再看原来的三行输出什么？即aaa.say();bbb.say(); ccc(); 输出什么？
会发现输出全是‘罗恩’，也就是说，三次this，指代的都是window对象。
但是为什么这样呢？查阅的链接里说，关于为什么会这样，因为涉及到JS异步回调（关于js异步回调）的知识，如果只是仅仅想快速熟悉this的用法，那么只要记住这个特殊情况即可。这个知识点曾经是阿里还是小米的面试题。关于js异步回调的知识，博主会下次更新。
下面再来看看几道笔试题，进一步加深印象：
这个题输出 undefined
首先看,下面的匿名函数外部有个（），代表立即执行，而括号当中是foo.bar,匿名函数后边括号中的值或者对象是以参数的形式传给匿名函数的，而每个函数都有这么个默认的属性arguments,而刚刚好foo.bar对应的arguments[0],所以这里相当于是把foo.bar这个方法赋值给了arguments[0],而很明显的是在匿名函数中arguments[0]是在全局环境下的，arguments[0]的作用域是window，也就是说foo.bar中的this指向的是arguments[0],所以在执行baz的时候自然this就是window了，而window上边没有baz属性，于是返回udefined,而typeof undefined 输出的是undefined，（注意：这里typeof输出的字符串!）
下面再做一道笔试题：
这题输出多少呢？我们知道foo.bar的确是函数方法的调用，但是在赋值给f的时候，this的指向就改变了
如果不好理解，那么把函数拆分一下：
这样在调用形式上又是普通函数调用，this指向的是window，所以答案是“undefined”。
二、 箭头函数中的this
箭头函数的作用域与父级的上下文绑定在一起
（1）箭头函数中的this就是定义时所在的this, 也就是说 箭头函数本身没有this。
箭头函数也可以使用bind, call , applay来改变this指向
arrow的作用域是构造函数Test的作用域，Test的作用域是实例化时候的作用域
箭头函数内部的this，取决于它所在的父级的上下文的this指向，new Test() 的时候，this指向实例，所以是“test function”
（2）箭头函数的使用场景
箭头函数在es6的标准中引入，可以用于替代传统定义函数的写法，一般用在函数本身代码量比较少，且处理逻辑简单的场景，此时可以用箭头函数替代原有函数，但是如果函数的代码量较大及处理逻辑较为复杂的时候，还是使用传统函数定义的方法。
1、简化函数的定义
函数传递参数
简化函数执行上下文绑定的方式
this在js里面使用场景较多，切换也比较频繁，因此带来了各种运行时因为上下文切换导致的错误，如下代码：
由于使用了setTimeout在1000ms以后执行console中的内容，此时this已经不代表c对象的实例，此时this为全局的this，所以运行时候输出undefined。此种情况下传统的做法可以使用function.prototype.bind将执行的上下文绑定在函数上面
使用箭头函数可以让这一过程更简单
二、不能使用箭头函数的场景（箭头函数内部的this，取决于它所在的父级的上下文的this指向）
1、定义方法的时候
（1）定义字面量方法
calculator.sum使用箭头函数来定义，但是调用的时候会抛出typeError，因为运行时this.array是未定义的，调用calculator.sum的时候，执行上下文里面的this仍然指向window，原因是箭头函数上山下文绑定到了window，this.array等价于window.array，显然后者是未定义的。
解决办法：
（2）定义原型方法
使用传统的函数表达式就能解决问题 JS Bin
sayCatName 变成普通函数之后，被调用时的执行上下文就会指向新创建的 cat 实例。
2、定义事件回调函数
箭头函数在声明的时候就绑定了执行上下文（箭头函数内部的this，取决于它所在的父级的上下文的this指向），要动态改变上下文是不可能的，在需要动态上下文的时候，它的弊端就凸显出来了，比如在客户端编程中常见的dom事件回调函数（evenListener）绑定,触发回调函数时候this指向当前发生事件的dom节点，而动态上下文这个时候就很有用，比如下边这段代码试图使用箭头函数来做事件回调函数
在全局上下文定义的箭头函数执行的时候，this会指向为window，当单击事件发生的时候，浏览器会尝试用button作为上下文来执行事件回调函数，但是箭头函数预定义的上下文不能被修改，这样this.innerHTML就等价于window。innerHTML，而后者是没有任何意义的。
使用函数表达式就可以在运行时候动态的改变this，修正后的代码
3、定义构造函数
构造函数中的this指向新创建的对象，当执行new Car()的时候，构造函数Car的上下文就是新创建的对象，也就是说 this instanceof Car === true。显然箭头函数是不能用来做构造函数的,实际上js会禁止你这么做，如果你这么做了，他就会抛出异常。
换句话说，箭头构造函数的执行并没有任何意义，并且是由歧义的，比如当我们运行下面代码
构造新的Message实例时，js引擎抛了错误，因为Message不是构造函数，在笔者看来相比旧的js引擎在出错时悄悄失败的设计，ES6出错时给出具体错误信息是非常不错的实践，可以通过使用函数表达式或者函数声明来声明构造函数修复上面的例子
网友评论