javascript this 指向

作者: 淘淘笙悦 | 来源:发表于2018-06-23 12:54 被阅读7次

我在文章《javascript 执行上下文》中介绍了 javascript 代码在执行时,会相应地创建对应执行上下文并将其入栈出栈的过程。
每个执行上下文会包含三个重要属性,分别是变量对象(Variable Object,VO)作用域链(Scope Chain)this 指向

本篇主要详细介绍 this 指向的确定过程。

关于 this 的指向,其实最主要的是三种场景,分别是全局上下文 this普通函数 this构造函数 this。下面就这三种情况的 this 指向分别做介绍。

全局上下文 this

对于第一种场景,相信大家都很熟悉了,在全局上下文中,this 指代全局对象

// 在浏览器中, window 对象同时也是全局对象:
console.log(this === window); // true

a = 1;
this.b = 2;
console.log(window.a); // 1
console.log(window.b); // 2
console.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();  // 2
fn();  // 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);  // ttsy
console.log(ttsy.age);  // 24

相关文章

  • javascript this 指向

    我在文章《javascript 执行上下文》中介绍了 javascript 代码在执行时,会相应地创建对应执行上下...

  • javascript this指向

    首页,js默认的对象是Window,调用一个函数是,如果不去改变它的调用对象的话,this基本上都会指向Windo...

  • 关于js函数中this的指向的问题

    @(javascript)[JavaScript中this的指向] 关于js函数中this的指向的问题 javas...

  • JavaScript_this指向

    this的指向是在函数执行的时候确定的;同一个函数由于调用的方式不同,this的指向也会发生变化; this的几种...

  • JavaScript this的指向

    在 JavaScript 中 this 取什么值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了,因为...

  • JavaScript--this指向

    this存在的场景1)作为普通函数中的this2)使用call apply bind3)作为对象方法被调用4)在c...

  • JavaScript之this指向

    this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。 this绑定规则: 默认绑定,...

  • JavaScript this指向总结

    JS中this的指向有些复杂,分为较多种的情况。此外,在严格模式和非严格模式之间也会有一些差别。 注:node环境...

  • JavaScript中this指向

    文章较长,希望你耐心阅读并有所收获。 this指向 想必各位看客老爷搜索此问题,多多少少还是被this迷惑住了,今...

  • JavaScript:this的指向

    this 的默认绑定 全局环境下的 this 指向了 window 函数独立调用,函数内部的 this 也指向了 ...

网友评论

    本文标题:javascript this 指向

    本文链接:https://www.haomeiwen.com/subject/bydasftx.html