javascript this 和执行上下文 之大不同

this一直困扰我很久,在网上摘了一篇与大家一起学习,如有不妥之处还望谅解!

1.2 this 和执行上下文

在前面讨论封装时,我们已经接触过 this 了。在对封装的讨论中,我们看到的 this 都是表示 this 所在的类的实例化对象本身。真的是这样吗?

先看一下下面的例子吧:

  1. var x = "I'm a global variable!";
  2. function method() {
  3.     alert(x);
  4.     alert(this.x);
  5. }
  6. function class1() {
  7.     // private field
  8.     var x = "I'm a private variable!";
  9.     // private method
  10.     function method1() {
  11.         alert(x);
  12.         alert(this.x);
  13.     }
  14.     var method2 = method;
  15.     // public field
  16.     this.x = "I'm a object variable!";
  17.     // public method
  18.     this.method1 = function() {
  19.         alert(x);
  20.         alert(this.x);
  21.     }
  22.     this.method2 = method;
  23.     // constructor
  24.     {
  25.         this.method1();     // I'm a private variable!
  26.                             // I'm a object variable!
  27.         this.method2();     // I'm a global variable!
  28.                             // I'm a object variable!
  29.         method1();          // I'm a private variable!
  30.                             // I'm a global variable!
  31.         method2();          // I'm a global variable!
  32.                             // I'm a global variable!
  33.         method1.call(this)// I'm a private variable!
  34.                             // I'm a object variable!
  35.         method2.call(this)// I'm a global variable!
  36.                             // I'm a object variable!
  37.     }
  38. }
  39. var o = new class1();
  40. method();       // I'm a global variable!
  41.                 // I'm a global variable!
  42. o.method1();    // I'm a private variable!
  43.                 // I'm a object variable!
  44. o.method2();    // I'm a global variable!
  45.                 // I'm a object variable!

为什么是这样的结果呢?

那就先来看看什么是执行上下文吧。那什么是执行上下文呢?

如果当前正在执行的是一个方法,则执行上下文就是该方法所附属的对象,如果当前正在执行的是一个创建对象(就是通过 new 来创建)的过程,则创建的对象就是执行上下文。

如果一个方法在执行时没有明确的附属于一个对象,则它的执行上下文是全局对象(顶级对象),但它不一定附属于全局对象。全局对象由当前环境来决定。在浏览器环境下,全局对象就是 window 对象。

定义在所有函数之外的全局变量和全局函数附属于全局对象,定义在函数内的局部变量和局部函数不附属于任何对象。

那执行上下文跟变量作用域有没有关系呢?

执行上下文与变量作用域是不同的。

一个函数赋值给另一个变量时,这个函数的内部所使用的变量的作用域不会改变,但它的执行上下文会变为这个变量所附属的对象(如果这个变量有附属对象的话)。

Function 原型上的 call 和 apply 方法可以改变执行上下文,但是同样不会改变变量作用域。

要理解上面这些话,其实只需要记住一点:

变量作用域是在定义时就确定的,它永远不会变;而执行上下文是在执行时才确定的,它随时可以变。

这样我们就不难理解上面那个例子了。this.method1() 这条语句(注意,这里说的还没有进入这个函数体)执行时,正在创建对象,那当前的执行上下文就是这个正在创建的对象,所以 this 指向的也是当前正在创建的对象,在 this.method1() 这个方法执行时(这里是指进入函数体),这个正在执行的方法所附属的对象也是这个正在创建的对象,所以,它里面 this.x 的 this 也是同一个对象,所以你看的输出就是 I’m a object variable! 了。

而在执行 method1() 这个函数时(是指进入函数体后),method1() 没有明确的附属于一个对象,虽然它是定义在 class1 中的,但是他并没有不是附属于 class1 的,也不是附属于 class1 实例化后的对象的,只是它的作用域被限制在了 class1 当中。因此,它的附属对象实际上是全局对象,因此,当在它当中执行到 alert(this.x) 时,this.x 就成了我们在全局环境下定义的那个值为 “I’m a global variable!” 的 x 了。

method2() 虽然是在 class1 中定义的,但是 method() 是在 class1 之外定义的,method 被赋值给 method2 时,并没有改变 method 的作用域,所以,在 method2 执行时,仍然是在 method 被定义的作用域内执行的,因此,你看到的就是两个 I’m a global variable! 输出了。同样,this.method2() 调用时,alert(x) 输出 I’m a global variable! 也是这个原因。

因为 call 会改变执行上下文,所以通过 method1.call(this) 和 method2.call(this) 时,this.x 都变成了 I’m a object variable!。但是它不能改变作用域,所以 x 仍然跟不使用 call 方法调用时的结果是一样的。

而我们后面执行 o.method1() 时,alert(x) 没有用 this 指出 x 的执行上下文,则 x 表示当前执行的函数所在的作用域中最近定义的变量,因此,这时输出的就是 I’m a private variable!。最后输出 I’m a object variable! 我想不用我说大家也知道为什么了吧?:D

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值