前端进阶 训练营杨文坚课代表study019我们在学习JavaScript的过程中,由于对一些概念理解得不是很清楚,但是又想要通过一些方式把它记下来,于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。
危害比较大的是,有的不准确的结论在网上还广为流传。
比如对于this指向的理解中,有这样一种说法:谁调用它,this就指向谁。在我刚开始学习this的时候,我是非常相信这句话的。因为在一些情况下,这样理解也还算说得通。可是我常常会在开发中遇到一些不一样的情况,一个由于this的错误调用,可以让我懵逼一整天。那个时候我也查资料,在群里问大神,可是我仍然搞不清楚“我特么到底错哪里了”。其实只是因为我心中有一个不太准确的结论。
这里吐槽一下百度搜索,搜索出来的文章,好多知识点都是错的,害了劳资好久所以,我认为需要有这样一篇文章,来帮助大家全方位的解读this。让大家对this,有一个正确的,全面的认知。
在这之前,我们需要来回顾一下执行上下文。
在前面几篇文章中,我有好几个地方都提到执行上下文的生命周期,为了防止大家没有记住,再次来回顾一下,如下图。
执行上下文生命周期
在执行上下文的创建阶段,会分别生成变量对象,建立作用域链,确定this指向。其中变量对象与作用域链我们都已经仔细总结过了,而这里的关键,就是确定this指向。
在这里,我们需要得出一个非常重要一定要牢记于心的结论,this的指向,是在函数被调用的时候确定的。也就是执行上下文被创建时确定的。因此我们可以很容易就能理解到,一个函数中的this指向,可以是非常灵活的。比如下面的例子中,同一个函数由于调用方式的不同,this指向了不一样的对象。
vara=10;var obj={
a:20
function fn0{
console.log(this.a);fn0;//10
fn.call(obj);//20除此之外,在函数执行过程中,this一旦被确定,就不可更改了。
vara=10;
var obj={
a:20
}
function fn 0{
this=obj;/∥这句话试图修改this,运行后会报错
console.log(this.a);
}
fn0;
前端进阶 训练营杨文坚课代表