在 JavaScript 编程中，this 关键字非常重要，也比较难理解，经常让初学者比较迷惑，所有今天我们一起来聊一下this关键字。

　　一.this的概述

　　this是Javascript语言的一个关键字，它代表函数运行时,自动生成的一个内部对象，只能在函数内部使用，随着函数使用场合的不同，this的值会发生变化，但是有一个总的原则，那就是this指的是调用函数的那个对象。

　　总结：谁调用了这个函数，this指向谁(对象)

　　二.this的指向

　　因为this存在于函数内部，通过不同的函数来检测this基本指向。

　　1.如果函数前面没有对象去调用，那么指向window，但是ES5新增的严格模式除外，因为在严格模式下this指向undefined。

　　代码如下：

　　普通函数：

　　function fn() {

　　console.log(this);

　　}

　　fn();//window

　　window.fn();//window

　　解析：普通函数直接调用，默认里面的this都是指向window,同时我们说函数也是window下面的方法，所以也可以通过window来调用，但结果同样指向window.

　　"use strict";//添加严格模式

　　function fn() {

　　console.log(this); //window

　　}

　　fn();//undefined

　　window.fn();//window

　　解析：严格模式下面如果直接调用函数，根据严格模式的语法行为改变里面的this是指向undefined,但window去调用依然还是指向window

　　自执行函数：

　　!(function () {

　　console.log(this); //window

　　})();

　　解析：下面的情况和上面一致，因为是子调用，即前面没有对象调用都指向window，严格模式下面指向undefined

　　函数表达式：

　　var声明的函数表达式，同上面的情况一致。

　　var fn1 = function(){

　　console.log(this);

　　}

　　fn1();//window

　　window.fn1();//window

　　let声明的函数表达式

　　let fn1 = function(){

　　console.log(this);

　　}

　　fn1();//window

　　window.fn1();//这里会报错 window.fn1 is not a function，因为let声明的函数表达式不是window下面方法，(let具有块作用域和暂时性死区)

　　2.事件处理函数，自定义对象里面的方法的this指向，根据谁调用函数this指向谁的特性，这里的this都指向当前操作的对象。

　　document.onclick = function(){

　　console.log(this);//document

　　}

　　解析：因为是document通过事件类型click触发了此函数,所以函数内部的this指向document,事件绑定addEventListener也一样。

　　const obj = {

　　name:'zhangsan',

　　age:18,

　　showName:function(){

　　console.log(this);// obj

　　console.log(this.name);//zhangsan

　　}

　　}

　　obj.showName();

　　解析：原理同上谁调用了函数，函数内部的this指向谁，这里的showName是obj对象下面的方法，通过obj对象调用，所以指向obj对象。

　　3.构造函数里面的this指向

　　因为构造函数的外表跟普通函数差不多，主要区别在于被调用的方式。当用 new 运算符调用函数时，该函数总会返回一个对象，通常情况下，构造函数里的this就指向返回的这个对象。

　　let MyClass = function(){

　　this.name = 'zhangsan';

　　};

　　let obj = new MyClass();

　　console.log(obj.name); //zhangsan

　　解析：构造函数里的this就指向返回的这个对象

　　但用new调用构造函数时，还要注意一个问题，如果构造函数显式地返回了一个 object 类型的对象，那么此次运算结果最终会返回这个对象，而不是我们之前的this。

　　let MyClass = function(){

　　this.name = 'zhangsan';

　　return { //显式地返回一个对象

　　name: 'lisi'

　　}

　　};

　　let obj = new MyClass();

　　console.log (obj.name); //lisi

　　如果构造函数不显式地返回任何数据，或者是返回一个非对象类型的数据，就不会造成上述问题，主要是new关键字调用函数，函数内部隐式返回this造成的。

　　let MyClass = function(){

　　this.name = 'zhangsan'

　　return 'lisi';

　　};

　　let obj = new MyClass();

　　console.log(obj.name); // 输出：zhangsan

　　4.箭头函数的this指向。

　　ES6新增了箭头函数，对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中(父级作用域)的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。

　　const obj = {

　　a:1

　　};

　　const fn = function () {

　　alert(this.a);//输出1，因为调用时修改了this指向，所以this指向obj

　　};

　　fn.call(obj); //本来this指向window,通过call(下文有讲解)改变this指向obj，最终的this就变成obj

　　const fn = () => {

　　alert(this.a);//输出undefined,因为window下面没有a属性。

　　};

　　fn.call(obj);//代码里面使用了箭头函数，this就不会受到影响，依然指向window

　　document.onclick = () => {

　　alert(this); //window,this来自于父级，如果没有父级，指向window

　　};

　　document.onclick = function () {

　　alert(this); //document,因为document调用了此函数

　　window.setInterval(() =>{

　　alert(this); //document,因为使用了箭头函数，this指向外层的函数里面的this.

　　}, 1000);

　　};

上一篇

手把手教你解决传说中的NPE空指针异常

下一篇

JavaScript中this的理解（二）