javascript - 为什么 `(object.fun = object.fun)() use ` window` 但 (object.fun)() 使用 `object` 作为 `this` ？

Question

在《Professional JavaScript for Web Developers》第三版一书中，它说:

var name = "The window";

var object = {
    name: "My object",

    getName: function() {
        return this.name;
    }
}

object.getName();   //"My object"
(object.getName)(); //"My object"
(object.getName = object.getName)(); //"The window"

问题是为什么 (object.getName)(); 会打印 "My object" 而不是像 "The window"第三？

我认为 object.getName 应该返回一个指向该函数的指针，就像第三个一样。 this 应指向全局对象，即浏览器中的window。因此它应该打印“The window”。然而，object.getName 似乎返回了 object.getName 本身。为什么？

Answer 1

更令人困惑的部分实际上是关于第三个例子，但让我回答你关于第二个例子的具体问题:

The question is why (object.getName)(); will print "My object" instead of "The window" like the third?

想想 JavaScript 如何解析您的代码片段:

object // This is the reference to the object you've made. No surprises here

object.getName // A reference to the function `getName`, with `this` bound to `object`
(object.getName) // This is the same thing as #2. The parens aren't important here

object.getName(); // Invoking the function, as you normally would
(object.getName)(); // Strange syntax, but just invoking the function all the same

但是当打印“窗口”时呢？

这是比较困惑的部分。

(object.getName = object.getName)(); // Things start to go strange here

这部分是因为赋值 (=) 运算符，也是因为 JavaScript function binding (this keyword) is lost after assignment .

当您引用函数对象并将该引用分配给任何对象时，它会作为“值类型”而不是“引用类型”传递。这会删除 this 指针，除非您手动将其绑定(bind)回去。参见 the documentation for the this keyword, when calling a function as an object method :

When a function is called as a method of an object, its this is set to the object the method is called on.

通过修改您的示例，这意味着什么可能会变得更加清楚:

var name = "The window";

var object = {
    name: "My object",

    getName: function() {
        console.log(this); // See what `this` is bound to
        return this.name;
    }
}

object.getName(); // Prints `Object {name: "My object"}`
(object.getName)(); // Also prints `Object {name: "My object"}`
var func = object.getName;
func(); // Prints `Window`
(object.getName = object.getName)(); // Also prints `Window`

如果您尝试将函数作为回调传递给其他函数，您会注意到相同的行为:

function test(callback) {
    callback();
}

test(object.getName); // Prints `Window`

但是，如果基础对象在您调用它时仍然被绑定(bind)，那么您将看到正常的对象行为:

function test(obj) {
    obj.getName();
}

test(object); // Prints `Object {name: "My object"}`

---

其他有趣或有用的行为

进行分配不会破坏原始对象。即使您在其他一些引用中弄乱了 this，object 仍然完好无损:

(object.getName = object.getName)(); // Prints `Window`
object.getName(); // Prints `Object {name: "My object"}`. It didn't break

如果将函数引用分配回对象的不同属性，您会看到 this 已正确分配给新属性。这是因为重要的部分是您在调用函数时是否指定了基础对象:

var temp = object.getName;
temp(); // Prints `Window`
object.somethingElse = temp;
object.somethingElse(); // Prints `Object {name: "My object"}`. `this` is correctly bound

如果您从一个对象中提取一个函数并将其粘贴到一个完全不同的对象上，那么它仍然可以工作，但是 this 将绑定(bind)到新对象。

Object prototypes依靠这种行为来发挥他们的魔力。

var basketball = {
    name: "Sports equipment?!",
}

basketball.doStuff = object.getName;
basketball.doStuff(); // Prints `Object {name: "Sports equipment?!"}`

如果出于某种原因您在没有绑定(bind) this 的情况下获得对您的函数的引用，您仍然可以更正它，只要您有对原始对象的引用:

var temp = object.getName;
temp(); // Prints `Window`
var temp2 = temp.bind(object);
temp2(); // Prints `Object {name: "My object"}` because you bound `this`
temp.apply(object); // Also prints `Object {name: "My object"}`