javascript - 在消化指令时捕获指令范围——比 console.log(scope) 详细得多

Question

我一直在使用 scope: false 的指令调查可以访问其父级范围的指令可用的内容 - 我现在才意识到执行 console.log(scope)在链接功能中有些误导。

.directive('directive', function() {
    return {
        scope: false;
        link: function (scope, elem, attrs) {
            console.log(scope); 
            console.log($.extend({}, scope));
        }
});

后者，console.log($.extend({}, scope)); ，是一个更加详细的对象，我假设这是在 $digest 期间记录的。相(作为属性之一， $$phase ，其值为 $digest :-P)。

console.log($.extend({}, scope));还包括我希望从父作用域访问的对象，例如父作用域上的对象，这些对象不会出现在 console.log(scope) 的输出中。

所以我现在假设 console.log($.extend({}, scope)); —实际上是scope可用的住房在指令的链接函数中。

无论如何，console.log(scope) 是怎么回事？ ——它到底向我展示了什么，为什么两者不同？

感谢任何帮助。谢谢你!

以下是两者的输出示例:

我注意到他们有不同的原型(prototype)，但不确定到底从中衍生出什么。因此，指令范围内实际可用的内容有点模糊。

Answer 1

这与 $digests 并没有真正的关系。

var verboseObject = $.extend({}, scope);
console.log(verboseObject);

上面的内容更加详细，因为 Angular 的 Scope 原型(prototype)(scope 继承自)的所有属性都被复制到 verboseObject 中。这就是 jQuery 的 $.extend 的工作方式: http://api.jquery.com/jquery.extend/

properties inherited from the object's prototype will be copied over

由于这些属性不在 verboseObject 原型(prototype)上，而是在对象本身上，因此开发人员工具仅将其显示为平面对象。

console.log(scope);

在上述情况下，所有“缺失”的属性，如 $digest、$apply、$eval 等仍然可用在范围上，就在原型(prototype)链的更上游。在开发者工具中，您可以通过扩展对象的 __proto__ 属性来检查原型(prototype)链。您可能需要向上几次才能到达 scope 继承的实际 Scope。