JavaScript的this词法

最后更新于:2022-04-01 11:54:55

this关键字是JavaScript中最复杂的机制之一,是一个特别的关键字,被自动定义在所有函数的作用域中,但是相信很多JsvaScript开发者并不是非常清楚它究竟指向的是什么。本文旨在对this进行初步的了解。 ![这里写图片描述](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603edad1d6.jpg "") person1.grow();//25 setTimeout(person1.grow, 100);//undefined 至所以出现两个不一样的结果,是因为grow函数丢失了同this之间的绑定。 对于这个问题,暂且保留。继续往下看 person2.grow();//undefined 这是因为在person2的grow函数中,this指代的对象即是全局对象window(非严格模式下,严格模式下this指代的为undefined). 对于这个问题,比较好解决,我们的目的是绑定在person2作用域上。 因此我们可以像下面这样书写: 将this赋值给self;因为在setTimeout函数外部,this对象指代的是person2,我们可以将其赋值给self,解决此处this绑定的问题。self只是一个可以通过词法作用域和闭包进行引用的标识符,不关系this绑定的过程中发生了什么。 ![这里写图片描述](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603edc0022.jpg "") ES6(ECMAScript6)引入了一个箭头函数,和上面一样可以解决此问题。=>是ES6中添加的一个特殊的语法格式用于函数声明。 100 胖箭头函数在涉及到this绑定时的行为和普通函数的行为完全不一致,它放弃了普通this绑定的规则,使用当前的词法作用域覆盖this本来的值。 “胖箭头”的用法,胖箭头通常被认为是function关键字的简写。 ![这里写图片描述](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603edd0456.jpg "") 言归正传,继续探讨解决此问题的其它方法,有一个更好的方法是正确的使用和包含this机制。 ![这里写图片描述](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603ede0e3a.jpg "") bind(this),此处的this指代的是person对象,作用与胖箭头一样。 到这个地方,对于person1的问题,我们仍然没有解决。 前面的方法对其都是不起作用的,很明显,我们在person1对象外部使用setTimeout去调用函数,this会指代全局对象window(同样是非严格模式下),因此,此处采用简单粗暴的方法,用call强制性的将this绑定到person1上。 ![这里写图片描述](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603edf421d.jpg "") 希望本文能对你了解JavaScript的关键字this有所帮助。
';