每个执行上下文会包含三个重要属性,分别是变量对象(Variable Object,VO)、作用域链(Scope Chain)和 this 指向。
本篇主要详细介绍 this 指向的确定过程。
关于 this 的指向,其实最主要的是三种场景,分别是全局上下文 this、普通函数 this和构造函数 this。下面就这三种情况的 this 指向分别做介绍。
全局上下文 this
对于第一种场景,相信大家都很熟悉了,在全局上下文中,this 指代全局对象。
// 在浏览器中, window 对象同时也是全局对象:console.log(this === window); // truea = 1;this.b = 2;console.log(window.a); // 1console.log(window.b); // 2console.log(b); // 2
普通函数 this
而对于普通函数中的 this 指向,则是我们经常会疑惑的一点。
在普通函数中 this 的指向,是在函数被调用的时候确定的(函数上下文创建阶段的时候)。所以在函数执行过程中(函数上下文执行阶段的时候)this 是不能被更改的。
普通函数中的 this 指向是怎样一种情况呢,这里我直接给出结论:
如果被调用的函数,被某一个对象所拥有,那么其内部的 this 指向该对象;如果该函数被独立调用,那么其内部的 this 指向 undefined(非严格模式下指向 window)。
举个例子~
var a=1;function fn(){ console.log(this.a) }var obj={ a:2, fn:fn } obj.fn(); // 2fn(); // 1
上述代码中 fn 函数都是输出 this.a,根据上述的结论,obj.fn() 由于其是被 obj 对象所拥有,所以 this 指向 obj 对象;而 fn 是被独立调用,在非严格模式下 this 指向 window。
构造函数 this
而要清楚构造函数中 this 的指向,则必须先了解通过 new 操作符调用构造函数时所经历的阶段。
通过 new 操作符调用构造函数时所经历的阶段如下:
创建一个新对象;
将构造函数的 this 指向这个新对象;
执行构造函数内部代码;
返回这个新对象。
所以从上述流程可知,对于构造函数来说,其内部 this 指向新创建的对象实例。
function Person(name,age){ this.name=name; this.age=age; }var ttsy=new Person('ttsy',24);console.log(ttsy.name); // ttsyconsole.log(ttsy.age); // 24
作者:淘淘笙悦
链接:https://www.jianshu.com/p/37aa0890cf20