javascript - .defineProperty 方法期间调用堆栈和 this 的行为

Question

前言:

Feel free to skip to the actual question below, if you find the'backstory' here unnecessary. But I do believe it adds good amount ofdetail and further context for the question

最近我一直在尝试对象和 [[ Prototype ]] 链，

首先，我很困惑为什么我的 this 引用会以 NaN 的形式返回，代码如下:

var obj = {
  a: 2
}

Object.defineProperty(obj, 'b', {
  value: this.a + 2,
  enumerable: true
});

console.log(obj.b);

首先，我对为什么感到困惑，但后来发生的事情让我意识到了 NaN 行为。
我的 obj.b 计算为 undefined + 2，因此返回 NaN

现在，显然更改代码对 value: obj.a + 2 进行显式引用就可以解决问题，但我想进一步调查为什么 this.a > 返回为未定义。

<小时/>

基本上，我的问题是我的调用堆栈引用了Object.prototype.a，因为Object.defineProperty是隐式委托(delegate)的Object.prototype.defineProperty.

因此，明确将 a 设置为 Object.prototype 的属性可以解决此问题:

var obj = {
  a: 2
}

Object.prototype.a = obj.a;

Object.defineProperty(obj, 'b', {
  value: this.a + 2,
  enumerable: true
});

console.log(obj.b);

这将返回 4 的预期结果(尽管是的，但为整个 Object.prototype 创建属性 a 绝对不是最好的编程实践，但出于说明目的，它就可以了)

问题:

但是，令我困惑的是，如果我在表达式上运行 console.trace，我的调用堆栈纯粹由 (anonymous) 组成 - 所以基本上 global(默认)this 关键字的隐式绑定(bind)。

You will have to run the code in your own console, as sadly console.trace() is unfortunately not supported by jsfiddle (least to my knowledge)

var obj = {
  a: 2
}

Object.prototype.a = obj.a;

console.trace(Object.defineProperty(obj, 'b', {
  value: this.a + 2,
  enumerable: true
}));

<小时/>

TL/DR:

因此，将此问题总结为两个要点:

1. 为什么调用堆栈仅返回(匿名)，而不返回Object.prototype
2. 将 this 显式绑定(bind)到 .defineProperty() 方法中引用的对象 obj 的正确方法是什么？

提前谢谢您。

Answer 1

1) 为什么console.trace只返回(匿名)

一旦您意识到自己错误地使用了 console.trace()，这种行为就会变得明显。如果您查阅 Mozilla 手册并查找 console.trace()，您会发现它应该这样使用:

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

输出如下:

bar
foo
<anonymous>

换句话说，您必须在某个函数内调用 console.trace()，而不是用它包装函数调用。这是因为 console.trace() 首先检查调用它的函数的名称 (bar)，然后检查父调用函数的名称 (foo)，然后其父级的名称，依此类推，直到到达最外层的执行上下文，这是一个匿名函数 - 主执行线程，所有代码都从这里开始。

每当你在 devtools 中执行一些代码(我假设你正在使用它)时，它总是在这个全局执行上下文中以包装匿名函数的形式执行。由于您立即从此匿名函数调用 console.trace()，因此打印的内容是 - anonymous。

此外，console.trace() 还接受参数。当您调用 console.trace() 时，可以使用任意数量的参数，并且这些参数只是在堆栈跟踪之前打印到控制台。由于 Object.defineProperty() 返回您为其定义新属性的对象，因此这就是您传递给 console.trace() 的内容。

TL;DR - console.trace() 首先将其参数打印到控制台(即 obj，即 {a: 2, b: 4})；然后，它继续打印堆栈跟踪，该跟踪仅包含主执行上下文，当您从控制台调用代码时，它是一个匿名函数。

2) 这个、defineProperty 以及所有这些

Object.defineProperty 的第三个参数是一个简单对象，不是函数!它的属性在初始化期间立即解析，然后才传递到defineProperty。这意味着以下代码在功能上与您的代码相同:

// First we initialize the third argument, separately from the call
// to .defineProperty()

var descriptor = {
  value: this.a + 2,
  enumerable: true
};

// at this point descriptor is already constructed. If you do
// console.log(descriptor.value) here, you will get NaN or maybe
// 4 or something else, depending on what you did before

Object.defineProperty(obj, 'b', descriptor);
// Here we simply invoke .defineProperty with descriptor as the third argument.  

您还必须知道，当您在主执行上下文中运行代码时(例如从开发工具控制台调用代码)，this 指的是 Window 对象。 Window 没有属性 a，这就是 this.a 未定义的原因。

更有趣的是，在执行 Object.prototype.a = 2 后，this.a(或 window.a)变为 2。发生这种情况是因为 Window 毕竟仍然是一个对象。如果您将某个属性分配给对象原型(prototype)对象(!!!)，则该属性将在代码中的所有对象上可用!令人困惑？是的!现在只需说您打算做的事情(根据您的描述)可能是这样的:

obj.prototype = {a: 2};

或者这个:

var proto = {}; // First create a prototype
obj.prototype = proto; // Then assign it to the prototype property of your obj
obj.prototype.a = 2; // Now we can alter props on the prototype

看出区别了吗？这更有意义吗？当然，执行此操作后，您的代码将不再工作，因为 this.a 将再次变为未定义。

结果如下:按照这种方式，您无法实现您期望的行为。属性描述符(参数#3)实际上比值和可枚举的组合更强大，如果你实现了 set( ) & get() 方法。另外，我相信您可以使用代理来获得类似的行为。不提供更多细节，因为我建议您首先阅读函数执行上下文，然后再阅读更多关于原型(prototype)的内容，也许还有一些关于堆栈溢出的关于 this 行为的好问题。之后，您可以尝试研究建议的解决方案。