【问题标题】:Strange change of Context in following example以下示例中上下文的奇怪变化
【发布时间】:2017-11-30 10:34:47
【问题描述】:

我尝试了以下示例,但 2 种类型的控制台返回了 2 个不同的结果。我希望我的自定义对象在这两种情况下都会返回,但结果似乎有点奇怪。有人可以解释结果吗?

<html> 
<head> </head> 
<body> 
<script>
var obj1 = {
 printThis: function() {
  console.log(this);
 }
};

obj1.printThis(); //refers to my custom object

var func1 = obj1.printThis;
func1(); //refers to window object
</script>
</body> 
</html> 

结果:

当第一个控制台返回 Custom Object 时,第二个返回 Window 对象(尽管在 StackOverflow 中,由于它们自己的匿名函数包装器可能会引用其他一些对象)。但是,在 Chrome 中,第二个控制台提供了对 Window 对象的引用。

【问题讨论】:

  • 第二个函数调用是闭包,这里指的是全局对象引用。第一个函数调用是引用当前对象实例。
  • @VIJAYABALDHANAPAL - 但是,它是从自定义对象内部运行的,因此“this”必须引用自定义对象。为什么要提到“窗口”对象?
  • 第二个函数调用在全局空间中。 obj1.printThis()->This 引用当前对象。

标签: javascript html lexical-scope


【解决方案1】:

输出因函数 (printThis) 执行的上下文或环境而异。 在第一种情况下,函数的执行上下文在obj1 内部。但在第二种情况下,函数是在全局上下文或环境中执行的。

如果你想在obj1中执行第二个函数调用,你必须像obj1.printThis.bind(obj1)这样显式地绑定它。

var obj1 = {
 printThis: function() {
  console.log(this);
 }
};

obj1.printThis(); 

var func1 = obj1.printThis.bind(obj1);
func1();

【讨论】:

    猜你喜欢
    • 2012-03-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多