继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

javascript this 指向

LEATH
关注TA
已关注
手记 315
粉丝 93
获赞 466

每个执行上下文会包含三个重要属性,分别是变量对象(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 操作符调用构造函数时所经历的阶段如下:

  1. 创建一个新对象;

  2. 将构造函数的 this 指向这个新对象;

  3. 执行构造函数内部代码;

  4. 返回这个新对象。

所以从上述流程可知,对于构造函数来说,其内部 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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP