乐趣区

关于javascript:JS中this关键字的思考

JS 中的 this 关键字,总是会让人蛊惑,它到底指向谁。在网上的学习与前辈的探讨中,有一句话让我的问题都迎刃而解:当太过绕脑的时候,能够画内存图,内存图会通知你此时 this 的指向。

1. 传统函数中的 this

前人大牛们曾经总结过无数次的话“this 的指向要害看调用环境,谁调用它它就指向谁”。但话语总归是太过形象,不如理论画一画内存图。

总所周知,JS 中的内存分为栈内存与堆内存,栈内存用于寄存规范数据类型,但其实栈内存中的变量也寄存对象,不过寄存的是对象的地址。
而对象与函数等简单数据类型都寄存于堆内存当中。
说白了,JS 的 this 就是指,谁调用这个函数,this 就是谁。

2. 箭头函数中的 this

箭头函数有所不同,传统函数的 this 指调用该函数的对象,而箭头函数则永远指向调用该函数的对象的父级。

上图中,sayName() 函数被 obj 调用了,则 this 指的就是对象 obj。
而 sayNameloud() 是箭头函数,箭头函数永远指向父级作用域,此时被对象 obj 调用,obj 对象的父级对象是 window,于是 this.name 打印进去便是张三。
值得注意的是,通过 call 和 apply 调用箭头函数时,不会扭转 this 的指向。

3. 构造函数中的 this

构造函数中的 this 永远指向构造函数他自身。

退出移动版