最近把javaScript的基础给看了一遍,就去看typeScript了,在慕课网上看了一下typeScript的入门教程,看到了箭头表达式这一节(箭头表达式是ES6的新特性,不知道为什么导师会说是typeScript的新特新。不管了,反正ES6我还没开始看,学就对了),稍微看了一下评论,哇,有点不对劲啊。特别是看到了下面这条评论,就打算研究一下箭头表达式的this指向问题。
通过写了一些demo,打印了一下日志也算是搞清楚了 this到底怎么个指向法。
第一种情况:
方法直接使用function申明,在setTimeout中使用箭头表达式进行申明。
得到的js代码为:
var stock = new getStock("qiqiqi");
日志:
发现this和this_2都是指向当前对象(object)。我们来看一下生成的js代码。因为通过 new 关键字进行构造,所以 this 指向的是当前对象,这是无可厚非的。又因为var _this = this;把当前对象赋给了 _this ,然后在setTimeout的function中输出的是 _this(箭头表达式搞的鬼),所以也是指向当前对象。因为两个this指向的是同一个对象,所以可以得到 name 的值为qiqiqi。
第二种情况:
方法直接使用function进行申明,在setTimeout中也用function进行申明。
得到的js代码为:
var stock = new getStock1("xixixi");
日志:
发现 this 指向的是 当前对象(object),但是this_2 指向的却是window。首先通过了 new 关键字进行构造,
所以,this 指向的是当前对象。然后,我们来看一下自动生成的js代码。发现 并没有 var _this = this; 这条语句的存在。
setTimeout中的function中也是直接使用this,所以导致this_2 指向的是window。因为this和this_2指向的内容不同,
所以,得不到name的值。
第三种情况:
方法用箭头表达式进行申明,setTimeout中也用箭头表达式进行申明。
得到的js代码为:
var stock = new getStock2("hehehe");
日志:
发现this 和 this_2都是指向window。我们来看一下自动生成的js代码。首先会在js代码的最上面看到一条语句:
var _this = this;因为是在最上面定义的,所以this指向的是window,所以_this指向的也是window。我们可以在js代码
中看见, this和this_2 后面跟的都是_this(哇,箭头表达式这么厉害的,就是因为使用的是箭头表达式,
才导致当前this变成了_this),所以this 和 this_2都是指向window,指向同一个对象,所以可以得到name的值为hehehe。
第四种情况:
方法用箭头表达式进行申明,setTimeout中用function进行申明。
得到的js代码:
var stock = new getStock3("ppp");
日志:
发现this和this_2一样是指向window。我们通过观察自动生成的js代码可以发现,和第三种情况又稍微有一些不一样。
this为_this 指向window,在第三种情况里说过了。this_2为this,也就是setTimeout中的function的this,因为没有
通过new关键字去构造该function,所以 this指向的也是window。既然this和this_2指向的都是window,所以也可以得到
name的值为ppp。
通过对以上四种方法的总结,我得出了以下结论。
另:因为javaScript只看了一丢丢的基础,很多东西还是不知道,所以在专业术语上可能存在一些问题,我也不知道该怎么表达,所以大家忍忍。。O(∩_∩)O哈哈~
说句题外话:感觉typeScript很像java哇!有木有!有木有!就。。。溜了溜了~