javascript - 将其绑定(bind)在嵌套文字对象中

Question

假设我有这段代码

(function() {

    function Foo(arg) {
        this.name = arg;
    }

    Foo.prototype = {
        bar: {
            baz: function() {
                alert(this.name); // Undefined...
            }
        }
    }

    var foo = function(arg) {
        return new Foo(arg);
    };


    window.foo = foo;

    return foo;
}());

foo("Anything").bar.baz();

当我从外部调用它时，如何在不使用 bind 或 apply 的情况下使函数“baz”中的“this”引用对象 Foo？

Answer 1

FWIW，我强烈建议不要那样构建嵌套结构，或者至少不要在原型(prototype)上构建，因为bar 对象是共享 在所有实例中，这为很多串扰式错误打开了大门。相反，我会在构造函数中创建 bar。

How can I make "this" in my function "baz" refers to the object Foo without using bind or apply when I call it from outside ?

您可能对 bind 和 apply/call 有点困惑。您不会在调用 函数时使用bind，而是在创建函数时使用。除非你使用 bind (或类似的东西)，否则你不能做你想做的事，因为没有 bind (或类似的)， this 由函数的调用方式设置，因此 this.bar.baz() 将使 this 成为 this.bar 在通话中。

下面是如何在构造函数中构建 bar，并使用 bind 使 baz 使用正确的 this:

function Foo(arg) {
    this.name = arg;
    this.bar = {
        baz: function() {
            alert(this.name);
        }.bind(this)            // <== Note
    };
}

例子:

function Foo(arg) {
  this.name = arg;
  this.bar = {
    baz: function() {
      snippet.log(this.name);
    }.bind(this)            // <== Note
  };
}

var f1 = new Foo("f1");
var f2 = new Foo("f2");
f1.bar.baz(); // "f1"
f2.bar.baz(); // "f2"

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

---

关于串扰的更多信息:天真的做法是只在 Foo 构造函数中添加一行，并在原型(prototype)上保留 bar:

this.bar.baz = this.bar.baz.bind(this);

那将是一个非常糟糕的主意，因为您会在实例之间发生串扰:

function Foo(arg) {
  this.name = arg;
  this.bar.baz = this.bar.baz.bind(this); // DON'T DO THIS
}

Foo.prototype = {
  bar: {
    baz: function() {
      snippet.log(this.name);
    }
  }
};

var f1 = new Foo("f1");
var f2 = new Foo("f2");
f2.bar.baz(); // "f1" -- cross talk! Should be f2

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>