javascript - 为什么在通过引用传递后调用函数时对象内部的 "this"不同？

Question

这个问题在这里已经有了答案:





How does the "this" keyword work?

(22 个回答)


3年前关闭。




简而言之:为什么在使用 Objects 时，直接调用的函数和通过引用传递的函数在 Javascript 中具有不同的“this”上下文？

长:我定义了一个对象和一堆方法作为原型(prototype)，其中使用关键字“this”来访问对象属性。我实例化了该对象，并且能够调用方法并且一切都按预期工作。问题是这些方法中的任何一种都可能引发我想单独捕获每个方法的异常。为了避免重复代码，我实现了 运行捕获 我将要执行的方法的引用传递给它的函数以及发生错误时应调用的回调。里面运行捕获 我基本上是在执行引用的方法，并用 try-catch 包装它，但是像这样，“this”关键字指向“Window”对象而不是 Object 本身。所以从我对 Javascript 上下文的理解来看，如果我用 new 关键字初始化对象，原型(prototype)函数中的“this”上下文应该总是引用对象本身。

这是正在发生的事情的一个小例子:

https://jsbin.com/gugohubori/edit?html,js,output

HTML:

<div>Object Value (Direct Call): 
<span id="val1"></span>
<div>Object Value (Passed by Reference): 
<span id="val2"></span>

Javascript:

// The Object
function myobject(){
  this.value = "IT WORKS"
}

myobject.prototype.getValue = function(){
  return this.value;
}

var obj = new myobject(); // Instantiate Object

// Direct Call (this is correct)
document.getElementById('val1').innerText = obj.getValue();

// Call by reference funciton
function callbyref(callback){ return callback(); }

// Call by reference (this is correct)
document.getElementById('val2').innerText = callbyref(obj.getValue);

而前面代码的结果是:

对象值(直接调用):IT WORKS

对象值(通过引用传递):未定义

有人可以解释一下为什么“this”的上下文会因您称呼它的位置而异吗？拥有 的正确方法是什么？ callbyref 示例中的函数具有指向对象的正确“this”引用？

编辑:困惑从何而来？所以似乎对我来说主要的困惑是当你创建一个常规对象“{}”时，该对象内的 this 的上下文就是它被执行的上下文。但是，当您使用 new 关键字创建对象时，该对象内部的方法的上下文将绑定(bind)到对象本身，无论它们在什么上下文中被调用。但是无论出于何种原因，当函数作为变量传递并在其他地方调用时，有界上下文会丢失(@Carloluis 很好地解释了这一点)。

编辑重复 : 谁能澄清为什么这个问题被标记为重复？ 我知道 Javascript 中的这种变量混淆很受欢迎，似乎是一个需要问的微妙问题，但在提出问题之前我一直在研究。链接到重复问题的帖子并没有解决我的问题，而是以通用方式解释了“this”变量和上下文，但从未解释为什么使用 实例化的对象新 当作为引用传递时，最终会丢失其对象上下文。我认为@Carloluis 的答案比指向另一个标记为重复的不相关问题的链接更清晰。

Answer 1

问题是 this JavaScript 中的关键字值取决于函数的调用方式。

A function's this keyword behaves a little differently in JavaScript compared to other languages.

阅读更多 MDN .

你可以这样想 this在函数调用中指向“点”之前的对象，如果没有 .在调用中，它将指向 windows 对象(当您将 obj.getValue 的引用传递给您的 callbyref 函数时就是这种情况。

function MyObject(){
  this.value = "IT WORKS"
}

MyObject.prototype.getValue = function(){
  return this.value;
}

const myObject = new MyObject();
console.log(myObject.getValue()); // this -> { value: 'IT WORKS' }

const getValueRef = myObject.getValue;
console.log(getValueRef()); // this -> Windows object

// -- Using the `.bind` function to attach the this context
// In the new function this is permanently bound to the first argument of bind, regardless of how the function is being used.
const getValueRefBound = myObject.getValue.bind(myObject);
console.log(getValueRefBound()); // this -> myObject

在前面的代码片段中添加了一个示例来显示如何绑定(bind) this后面的函数执行的上下文，不管它是如何使用的。

Function.prototype.bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

您也可以查看这篇文章 Understanding Scope and Context in JavaScript .